جلسه 6 آموزش CSS: کار با متن ها (Texts) در CSS

سلام رفقا! 👋 توی این جلسه از آموزش CSS، قراره بریم سراغ کار با متن‌ها و کلی چیز خفن یاد بگیریم! 😍
متن‌ها یکی از مهم‌ترین بخش‌های هر سایت هستن، چون محتوا رو به کاربر نشون میدن. اگه درست استایل داده بشن، هم قشنگ‌تر دیده میشن و هم خوانایی‌شون بهتر میشه. پس بریم که ببینیم چطور می‌تونیم با CSS به متن‌ها استایل بدیم! 🙃

در ادامه با مجموعه‌ای از ویژگی‌های قدرتمند CSS آشنا می‌شیم که به ما امکان می‌دن به راحتی به متن‌های سایت، استایل‌های جذاب و حرفه‌ای بدیم:

• font-family: انتخاب فونت متن
• font-size: تنظیم اندازه فونت متن
• font-weight: تنظیم ضخامت (پررنگی) متن
• font-style: تعیین سبک متن (مانند ایتالیک)
• color: تعیین رنگ متن
• text-align: تنظیم تراز بندی متن
• text-decoration: افزودن خط زیر یا دیگر دکوراسیون‌ها به متن
• text-transform: تغییر قالب و حروف متن (مانند تبدیل به حروف بزرگ)
• letter-spacing: تنظیم فاصله بین حروف
• line-height: تنظیم فاصله بین خطوط متن
• direction: تنظیم جهت نمایش متن
• word-spacing: تنظیم فاصله بین کلمات
• text-shadow: افزودن سایه به متن
• text-indent: تنظیم میزان تورفتگی خط اول متن
• white-space: جلوگیری از شکستن خط و انتقال به سطر بعدی

آموزش کار با ویژگی font-family در CSS (انتخاب فونت متن)

ویژگی font-family در CSS برای تعیین نوع فونت متن استفاده می‌شه. این ویژگی بهت اجازه می‌ده که فونت‌های مختلفی رو برای متن‌های سایتت انتخاب کنی تا ظاهری جذاب‌تر و خواناتر داشته باشن.

🖋️ نحوه استفاده از font-family

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• در این مثال مشخص کردیم که فونت متن داخل <p> از نوع Arial باشه و اگه این فونت در دسترس نبود، یک فونت جایگزین از دسته sans-serif استفاده بشه.
• نام فونت رو بین دو علامت ” ” قرار بده.

🖋️ مثال کاربردی برای تعیین فونت اصلی و جایگزین

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• بعضی فونت‌ها روی همه سیستم‌ها نصب نیستن، بنابراین همیشه بهتره یک یا چند فونت جایگزین مشخص کنیم. در کد بالا، ابتدا فونت “Iran Sans” تعیین شده، اما اگه به هر دلیلی لود نشه یا روی دستگاه کاربر موجود نباشه، مرورگر به ترتیب از Tahoma و در نهایت از یک فونت sans-serif استفاده می‌کنه تا متن همچنان خوانا و مرتب نمایش داده بشه.

آموزش کار با ویژگی font-size در CSS (تنظیم اندازه متن)

ویژگی font-size در CSS برای تعیین اندازه فونت متن استفاده می‌شه. با این ویژگی می‌تونی متن‌های سایتت رو کوچیک‌تر یا بزرگ‌تر کنی تا خوانایی و طراحی بهتری داشته باشن.

×

جلسه 22 آموزش CSS: شبه عناصر (pseudo elements) در CSS

مطالعه

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

🖋️ نحوه استفاده از font-size

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• این کد باعث می‌شه که اندازه فونت تمام متن‌های داخل <p> برابر ۱۸ پیکسل باشه.

👇 روش‌های مختلف تعیین اندازه فونت

font-size رو می‌تونی با واحدهای مختلفی نظیر (px, em, rem) مشخص کنی:

1️⃣ استفاده از پیکسل (px) – اندازه ثابت

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• مقدار px (پیکسل) یک اندازه ثابت به متن می‌ده، یعنی روی همه دستگاه‌ها دقیقا همون سایز نمایش داده می‌شه.

2️⃣ استفاده از em – اندازه وابسته به والد

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• مقدار 1.5em یعنی ۱.۵ برابر اندازه فونت المنت والد. اگه اندازه فونت body برابر ۱۶ پیکسل باشه، متن داخل <p> برابر با ۲۴ پیکسل (۱۶ × ۱.۵) می‌شه.

3️⃣ استفاده از rem – اندازه وابسته به ریشه (root)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• مقدار 2rem یعنی ۲ برابر اندازه فونت ریشه (html). اگه html روی ۱۶px تنظیم شده باشه، اندازه h2 برابر ۳۲px می‌شه. (rem مقیاس‌پذیرتر از em هست!)

⚡ نکات مهم درباره font-size

✅ برای طراحی واکنش‌گرا (Responsive) بهتره از rem یا em به جای px استفاده کنی.
✅ px برای اندازه‌های دقیق و ثابت مناسبه، اما مقیاس‌پذیری نداره.
✅ rem همیشه از html تبعیت می‌کنه، پس قابل کنترل‌تره.
✅ em به والد خودش وابسته‌ست و ممکنه باعث تغییرات غیرمنتظره بشه.

آموزش کار با ویژگی font-weight در CSS (تنظیم ضخامت متن)

ویژگی font-weight در CSS برای تنظیم ضخامت یا وزن فونت استفاده می‌شه. با این ویژگی می‌تونی متن‌ها رو نازک تر و ضخیم تر کنی تا تأثیرگذاری و جذابیت بیشتری داشته باشن.

×

جلسه 18 آموزش CSS: لیست ها (List) در CSS

مطالعه

🖋️ نحوه استفاده از font-weight

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• در این کد، متن داخل تگ <p> به صورت پررنگ (bold) نمایش داده می‌شه.

👇 روش‌های مختلف تنظیم ضخامت متن

1️⃣ استفاده از کلمات کلیدی

• normal: ضخامت معمولی (معمولاً برابر با ۴۰۰)
• bold: ضخامت پررنگ (معمولاً برابر با ۷۰۰)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

2️⃣ استفاده از اعداد (100 تا 900)

بیشتر فونت‌ها از مقادیر عددی برای تنظیم ضخامت استفاده می‌کنن، جایی که عدد ۴۰۰ معادل normal و ۷۰۰ معادل bold است. می‌تونی مقدار عددی رو به دلخواه تنظیم کنی.

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• در اینجا 600 یک ضخامت متوسط است و 400 ضخامت معمولی فونت رو مشخص می‌کنه.

⚡ نکات مهم درباره font-weight

✅ مقدار font-weight می‌تونه به صورت عددی (از ۱۰۰ تا ۹۰۰) یا کلمه‌ای (مثل normal, bold) تنظیم بشه.
✅ برای متن‌ها یا عناوین مهم، استفاده از font-weight: bold می‌تونه باعث بشه که توجه کاربر بیشتر جلب بشه و اهمیت اون بخش بیشتر نمایان بشه.

آموزش کار با ویژگی font-style در CSS (تعیین سبک متن)

ویژگی font-style در CSS برای تنظیم سبک متن به کار می‌ره. با استفاده از این ویژگی می‌تونی متن‌ها رو به حالت ایتالیک دربیاری و در بعضی موارد، از سبک‌های خاص استفاده کنی. این ویژگی بیشتر برای تأکید بر روی بخش‌هایی از متن یا برای طراحی ظاهری متفاوت استفاده می‌شه.

🖋️ نحوه استفاده از font-style

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• در این کد، متن داخل تگ <p> به حالت ایتالیک نمایش داده می‌شه.

آموزش کار با ویژگی color در CSS (تعیین رنگ متن)

مشخصه color در CSS برای تعیین رنگ متن استفاده می‌شه. با این ویژگی می‌تونی رنگ دلخواهی برای متن‌ها انتخاب کنی و طراحی سایتت رو جذاب‌تر و متناسب با برند یا سلیقه خودت بسازی. 🌈

×

جلسه 3 آموزش CSS: کامنت گذاری در CSS

مطالعه

🖋️ نحوه استفاده از color

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• در این مثال، تمام متن‌های داخل تگ <p> با رنگ آبی نمایش داده می‌شن.

👇 روش‌های مختلف تعیین رنگ متن

1️⃣ استفاده از نام رنگ‌ها

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• در اینجا متن داخل تگ <h1> به رنگ قرمز نمایش داده می‌شه. CSS از نام‌های رنگی معروف (مثل red, blue, green, yellow و …) پشتیبانی می‌کنه.

2️⃣ استفاده از کد هگز (Hex)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از کد هگز (مثل #ff6347)، می‌تونی دقیقاً رنگ مورد نظر رو انتخاب کنی. این کدها بیشتر برای رنگ‌های خاص و دقیق استفاده می‌شن.

3️⃣ استفاده از RGB

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• در اینجا از RGB برای تعیین رنگ استفاده شده که سه مقدار قرمز, سبز, و آبی رو ترکیب می‌کنه تا رنگ دلخواه ساخته بشه.

⚡ نکات مهم درباره color

✅ اگر از رنگ‌های hex استفاده کنی، می‌تونی رنگ‌های خیلی خاص و دقیق رو بسازی.
✅ برای انتخاب رنگ‌ها، می‌تونی از ابزارهای آنلاین مثل Adobe Color یا Colorzilla استفاده کنی.

آموزش کار با ویژگی text-align در CSS (ترازبندی متن)

ویژگی text-align در CSS برای تراز کردن متن درون یک عنصر استفاده می‌شه. این ویژگی بهت کمک می‌کنه که متن‌ها رو به صورت تراز چپ، راست و وسط نمایش بدی✨

🖋️ نحوه استفاده از text-align

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• در این کد، متن داخل تگ <p> به مرکز (center) صفحه تراز می‌شه.

👇 حالت های مختلف ترازبندی متن

1️⃣ تراز چپ (left)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از left، متن به سمت چپ تراز میشه. این گزینه معمولاً پیش‌فرض بیشتر زبان‌های نوشتاری از جمله فارسی و انگلیسیه.

2️⃣ تراز راست (right)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از right، متن به سمت راست تراز می‌شه. این گزینه بیشتر برای زبان‌هایی مثل عربی یا فارسی کاربرد داره.

3️⃣ تراز وسط (center)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با center، متن در مرکز عنصر قرار می‌گیره. این روش برای عنوان‌ها و بخش‌های برجسته خیلی مفیده.

4️⃣ متن رو میکشه تا بتونه تمام فضای باکس رو پُر کنه (justify)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• justify باعث می‌شه که متن در تمام عرض عنصر گسترش پیدا کنه تا تمام فضای باکس رو پوشش بده. این روش بیشتر برای پاراگراف‌ها و متن‌های طولانی استفاده می‌شه.

⚡ نکات مهم درباره text-align

✅ text-align فقط روی متن‌های داخل یک عنصر تأثیر داره. برای مثال، اگه روی یک <div> اعمال بشه، فقط متن‌های داخل <div> تغییر می‌کنن.
✅ برای تراز کردن متن‌ها در داخل المان‌هایی مثل جدول‌ها یا فرم‌ها، از text-align استفاده کن.
✅ برای تراز عمودی (بالا، وسط، پایین)، از ویژگی‌های دیگه مثل vertical-align یا Flexbox استفاده کن.

آموزش کار با ویژگی text-decoration در CSS (تزئین متن و زیرخط دار کردن)

ویژگی text-decoration در CSS برای دکوراسیون دادن به متن (تزئین متن) و زیرخط دار کردن اون استفاده می‌شه. با این ویژگی می‌تونی ظاهر متن رو تغییر بدی و جلوه‌های خاصی بهش بدی مثل خط کشیدن زیر متن یا حتی تغییر رنگ خط زیر.

×

جلسه 19 آموزش CSS: جدول (Table) در CSS

مطالعه

🖋️ نحوه استفاده از text-decoration

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• در این کد، متن داخل تگ <p> با خط زیر یا آندرلاین (underline) نمایش داده می‌شه.

👇 حالت‌های مختلف text-decoration

1️⃣ زیرخط دار کردن (underline)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با underline می‌تونی متن رو زیرخط دار کنی. این معمولاً برای تأکید روی بخش‌های خاصی از متن به کار می‌ره.

2️⃣ خط خورده (line-through)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• line-through باعث می‌شه که متن خط خورده باشه. این معمولاً برای نشون دادن تغییرات یا حذف‌های انجام شده به کار می‌ره.

3️⃣ بی‌خط کردن (none)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از none، می‌تونی خط‌های اضافی مثل زیرخط لینک‌ها رو حذف کنی. این گزینه زمانی به کار میاد که نمی‌خواهی متن خط‌دار نشون داده بشه.

4️⃣ خط بالای متن (overline)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از overline، خطی در بالای متن ایجاد می‌شه که معمولاً برای تأکید یا نشان دادن بخش‌های خاصی از متن استفاده می‌شه.

5️⃣ تغییر رنگ خط (color)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از text-decoration-color می‌تونی رنگ خط زیر متن رو تغییر بدی. در این مثال، رنگ خط به قرمز تغییر می‌کنه.

6️⃣ استفاده از text-decoration-style

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• می‌تونی نوع خط زیر متن رو هم تغییر بدی. از گزینه‌هایی مثل solid (خط صاف)، dotted (خط نقطه‌ای) و dashed (خط شکسته) استفاده کن.

⚡ نکات مهم درباره text-decoration

✅ text-decoration به‌طور پیش‌فرض روی لینک‌ها اعمال می‌شه و بیشتر برای زیرخط دار کردن لینک‌ها استفاده میشه.
✅ با استفاده از text-decoration می‌تونی جلوه‌های مختلفی مثل خط‌زدن و زیرخط‌دار کردن رو به متن‌ها اضافه کنی.
✅ text-decoration-color و text-decoration-style برای داشتن کنترل دقیق‌تر روی ظاهر خط‌های زیر متن به کار می‌رن.

آموزش کار با ویژگی text-transform در CSS (تبدیل حروف متن)

ویژگی text-transform در CSS برای تبدیل حروف متن به کار می‌ره. با استفاده از این ویژگی می‌تونی حروف رو به حروف بزرگ (uppercase)، حروف کوچک (lowercase) یا حالت (capitalize) (یعنی حالتی که حرف اول کلمه فقط بزرگ باشه) تغییر بدی. این ویژگی بهت کمک می‌کنه که ظاهر متن‌ها رو به راحتی تغییر بدی و طراحی سایتت رو به شکل دلخواه دربیاری. 🌟

🖋️ نحوه استفاده از text-transform

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• در این کد، تمام متن داخل تگ <p> به حروف بزرگ تبدیل می‌شه.

👇 حالت‌های مختلف text-transform

1️⃣ تبدیل به حروف بزرگ (uppercase)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از uppercase، تمام حروف متن به حروف بزرگ تبدیل می‌شن. این گزینه معمولاً برای عناوین یا بخش‌های مهم استفاده می‌شه.

2️⃣ تبدیل به حروف کوچک (lowercase)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با lowercase، تمام حروف متن به حروف کوچک تغییر می‌کنن. این حالت برای زمانی که بخوای متن رو به طور یکنواخت و کوچک نشون بدی، به کار میاد.

3️⃣ حالت (capitalize)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از capitalize، فقط اولین حرف هر کلمه به حروف بزرگ تبدیل می‌شه. این ویژگی معمولاً برای عناوین یا نام‌ها استفاده می‌شه.

⚡ نکات مهم درباره text-transform

✅ text-transform به طور مستقیم فقط روی حروف تأثیر می‌ذاره و می‌تونه ظاهر متن رو تغییر بده.
✅ این ویژگی با حالت‌های فونت یا اندازه فونت تداخل نداره، بلکه فقط شکل حروف رو تغییر می‌ده.
✅ از text-transform می‌تونی برای یکسان کردن یا زیبا کردن متن‌ها در سایت استفاده کنی، مخصوصاً در عناوین و لیست‌ها.

آموزش کار با ویژگی letter-spacing در CSS (تنظیم فاصله بین حروف)

ویژگی letter-spacing در CSS برای تنظیم فاصله بین حروف استفاده می‌شه. با این ویژگی می‌تونی فاصله بین حروف متن رو بیشتر یا کمتر کنی.

×

جلسه 16 آموزش CSS: تصاویر (Images) در CSS

مطالعه

🖋️ نحوه استفاده از letter-spacing

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• در این مثال، فاصله بین حروف متن داخل تگ <p> به ۲ پیکسل افزایش پیدا می‌کنه.

👇 روش‌های مختلف استفاده از letter-spacing

1️⃣ افزایش فاصله بین حروف

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از 5px، فاصله بین حروف متن داخل تگ <h1> به ۵ پیکسل افزایش می‌یابد. این حالت برای زمانی که بخوای متن رو خواناتر یا طراحی خاص‌تری داشته باشه مفیده.

2️⃣ کاهش فاصله بین حروف

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از مقدار منفی -1px، فاصله بین حروف متن داخل تگ <p> کاهش می‌یابد. این گزینه زمانی که بخوای متن فشرده‌تر به نظر برسه کاربرد داره.

⚡ نکات مهم درباره letter-spacing

✅ افزایش فاصله بین حروف می‌تونه به متن کمک کنه که خواناتر و راحت‌تر خونده بشه، مخصوصاً برای عناوین.
✅ کاهش فاصله بین حروف ممکنه به متن ظاهری فشرده‌تر بده، ولی باید مواظب باشی که متن ناخوانا نشه.
✅ این ویژگی می‌تونه برای تغییر طراحی و ساخت جلوه‌های خاص برای متن‌های طولانی یا تگ‌های خاص مثل عناوین استفاده بشه.

آموزش کار با ویژگی line-height در CSS (تنظیم فاصله بین سطرها)

ویژگی line-height در CSS برای تنظیم فاصله بین خطوط متن استفاده می‌شه. این ویژگی بهت کمک می‌کنه که متن رو خواناتر و منظم‌تر کنی. با تنظیم فاصله بین سطرها می‌تونی متن‌های طولانی رو بهتر برای کاربر نمایش بدی.

🖋️ نحوه استفاده از line-height

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• در این مثال، فاصله بین خطوط متن داخل تگ <p> به 1.5 برابر ارتفاع فونت تنظیم می‌شه. این مقدار فاصله معمولاً برای خوانایی بهتر مناسبه.

👇 روش‌های مختلف استفاده از line-height

1️⃣ تنظیم فاصله خط به نسبت ارتفاع فونت

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از 1.8، فاصله بین خطوط متن بیشتر میشه. این کار کمک می‌کنه تا متن‌ها بهتر خونده بشن و شلوغ نباشن.

2️⃣ تنظیم فاصله با پیکسل

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از 24px، فاصله بین خطوط متن به طور ثابت به 10 پیکسل تنظیم میشه. این کار زمانی مفیده که بخواهی فاصله دقیقی بین سطرها داشته باشی.

3️⃣ تنظیم فاصله به طور خودکار

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از normal، فاصله بین سطرها به حالت پیش‌فرض برمی‌گرده که بستگی به اندازه فونت و تنظیمات دیگر داره.

⚡ نکات مهم درباره line-height

✅ استفاده از line-height به خوانایی متن کمک می‌کنه، به خصوص برای پاراگراف‌های طولانی و متن‌های کوچک.
✅ فاصله بیشتر بین خطوط باعث می‌شه که متن راحت‌تر خونده بشه و چشمای کاربر اذیت نشه.
✅ بهتره از مقادیر نسبی مثل 1.5 یا normal استفاده کنی تا فاصله بین سطرها نسبت به اندازه فونت تغییر کنه، مگر اینکه نیاز به فاصله دقیق داشته باشی.

آموزش کار با ویژگی direction در CSS (تنظیم جهت نمایش متن)

ویژگی direction در CSS برای تنظیم جهت نمایش متن استفاده می‌شه. این ویژگی بهت کمک می‌کنه که تعیین کنی متن از راست به چپ نمایش داده بشه یا از چپ به راست. این ویژگی مخصوصاً برای زبان‌هایی که جهت نوشتار متفاوتی دارن (مثل زبان فارسی یا عربی) مفیده.

×

جلسه 7 آموزش CSS: کار با رنگ ها (colors) در CSS

مطالعه

🖋️ نحوه استفاده از direction

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• در این مثال، جهت نمایش متن داخل تگ <p> به راست به چپ (rtl) تغییر می‌کنه، که برای زبان‌هایی مثل فارسی و عربی کاربرد داره.

👇 حالت‌های مختلف direction

1️⃣ راست به چپ (rtl)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از rtl (right-to-left)، متن از سمت راست به چپ نمایش داده می‌شه. این گزینه برای زبان‌هایی مثل فارسی، عربی که جهت نوشتار از راست به چپ هست، استفاده می‌شه.

2️⃣ چپ به راست (ltr)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از ltr (left-to-right)، متن از سمت چپ به راست نمایش داده می‌شه. این گزینه برای زبان‌هایی مثل انگلیسی که جهت نوشتار از چپ به راست هست، به کار میره.

⚡ نکات مهم درباره direction

✅ direction به طور خاص برای زبان‌های راست به چپ (مثل فارسی و عربی) یا چپ به راست (مثل انگلیسی) تنظیم میشه.
✅ این ویژگی می‌تونه روی سایر المان‌ها مثل لیست‌ها، جعبه‌ها یا حتی لینک‌ها تأثیر بذاره.
✅ تنظیم درست جهت نمایش متن برای تجربه کاربری بهتر در زبان‌های مختلف بسیار مهمه.

آموزش کار با ویژگی word-spacing در CSS (تنظیم فاصله بین کلمات)

مشخصه word-spacing در CSS برای تنظیم فاصله بین کلمات استفاده می‌شه. این ویژگی بهت کمک می‌کنه که فاصله بین کلمات متن رو بیشتر یا کمتر کنی. این کار باعث می‌شه متن‌ها به شکل بهتری نمایش داده بشن و خوانایی بالاتری داشته باشن.

🖋️ نحوه استفاده از word-spacing

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• در این مثال، فاصله بین کلمات داخل تگ <p> به ۱۰ پیکسل افزایش پیدا می‌کنه. این گزینه به متن کمک می‌کنه که خواناتر و واضح‌تر بشه.

👇 روش‌های مختلف استفاده از word-spacing

1️⃣ افزایش فاصله بین کلمات

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از 15px، فاصله بین کلمات در داخل تگ <h1> افزایش می‌یابد. این حالت به خوانایی بهتر متن کمک می‌کنه و زمانی که بخوای کلمات از هم جدا و واضح دیده بشن مفیده.

2️⃣ کاهش فاصله بین کلمات

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از مقدار منفی -5px، فاصله بین کلمات کاهش می‌یابد. این گزینه زمانی مفیده که بخوای متن فشرده‌تر باشه یا در طراحی خاصی نیاز به فاصله کمتر داشته باشی.

⚡ نکات مهم درباره word-spacing

✅ افزایش فاصله بین کلمات می‌تونه به خوانایی و زیبایی متن کمک کنه، مخصوصاً برای متون طولانی یا عناوین.
✅ کاهش فاصله ممکنه باعث بشه که متن فشرده‌تر به نظر برسه، اما باید مراقب باشی که متن ناخوانا نشه.
✅ این ویژگی به‌طور خاص برای تنظیم طراحی و ظاهر متن‌ها استفاده می‌شه و می‌تونه تفاوت زیادی در زیبایی و خوانایی متن ایجاد کنه.

آموزش کار با ویژگی text-shadow در CSS (افزودن سایه به متن)

ویژگی text-shadow در CSS برای افزودن سایه به متن استفاده می‌شه. این ویژگی بهت کمک می‌کنه تا جلوه‌ای جذاب و سه‌بعدی به متن بدی و اون رو از پس‌زمینه جدا کنی. می‌تونی سایه‌ها رو با رنگ، اندازه و جهت دلخواه تنظیم کنی تا متن‌ها جذاب‌تر و برجسته‌تر بشن. ✨

×

CSS چیست؟ آشنایی با سلاح مخفی طراحان وب

مطالعه

🖋️ نحوه استفاده از text-shadow

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• در این مثال، سایه‌ای با فاصله ۲ پیکسل از افقی، ۲ پیکسل از عمودی و ۵ پیکسل تاری به متن داخل تگ <h1> افزوده میشه. رنگ سایه هم سیاه با شفافیت ۳۰ درصده.

آموزش کار با ویژگی text-indent در CSS (تنظیم میزان تورفتگی اولین خط پاراگراف)

ویژگی text-indent در CSS برای تنظیم تورفتگی اولین خط متن در یک پاراگراف استفاده می‌شه. این ویژگی بهت این امکان رو می‌ده که برای زیبایی بیشتر یا خوانایی بهتر، اولین خط متن رو نسبت به بقیه خطوط به سمت داخل (چپ یا راست) بتونی حرکت بدی. این معمولاً برای پاراگراف‌ها و متن‌های طولانی به کار میره.

🖋️ نحوه استفاده از text-indent

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• در این مثال، اولین خط متن داخل تگ <p> به اندازه ۳۰ پیکسل به سمت راست تورفتگی پیدا می‌کنه.

👇 روش‌های مختلف استفاده از text-indent

1️⃣ افزایش تورفتگی

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از 40px، اولین خط پاراگراف ۴۰ پیکسل به داخل میره و یه فاصله مشخص در ابتدای پاراگراف ایجاد میشه.

2️⃣ استفاده از مقدار منفی برای تورفتگی معکوس

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از -20px، اولین خط پاراگراف به بیرون حرکت می‌کنه. این حالت برای ایجاد طراحی خاص یا برای مواقعی که می‌خوای پاراگراف به بیرون از مرز خود کشیده بشه استفاده می‌شه.

3️⃣ تعیین میزان تورفتگی با درصد

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• اینجا با استفاده از 5%، اولین خط از پاراگراف به اندازه ۵ درصد از عرض کادر خودش به داخل میره. این روش بیشتر در طراحی‌های واکنشگرا کاربرد داره.

⚡ نکات مهم درباره text-indent

✅ این ویژگی بیشتر برای پاراگراف‌ها یا متن‌های طولانی استفاده می‌شه تا شکل ظاهری بهتری به متن بدی.
✅ تورفتگی منفی می‌تونه باعث بشه که اولین خط از پاراگراف بیرون از مرز قرار بگیره، که در طراحی‌های خاص کاربرد داره.
✅ از text-indent می‌تونی برای ساختاردهی به متن‌ها و نمایش آن‌ها به صورت مرتب و سازماندهی شده استفاده کنی.

آموزش کار با ویژگی white-space در CSS (جلوگیری از شکستن خط و رفتن به سطر بعدی)

ویژگی white-space در CSS بهت این امکان رو می‌ده که نحوه‌ی نمایش فضای خالی (مثل فاصله‌ها، تب‌ها یا خط‌های جدید) در متن رو کنترل کنی. این ویژگی برای جلوگیری از شکستن خطوط یا حفظ فواصل مهمه. برای مثال، می‌تونی ازش برای جلوگیری از شکستن خودکار خط‌ها استفاده کنی.

👇 نحوه استفاده از white-space

1️⃣ normal (حالت پیش‌فرض)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• در این حالت، متن به طور خودکار در صورت نیاز به سطر بعدی منتقل می‌شه. این همون رفتار پیش‌فرض برای متن‌های عادیه.

2️⃣ nowrap (جلوگیری از شکستن خط)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• با استفاده از nowrap، متن در یک خط باقی می‌مونه و از شکستن به سطر بعدی جلوگیری می‌کنه. این گزینه زمانی مفیده که بخوای تمام متن در یک خط نمایش داده بشه، مثلاً در طراحی‌های خاص. این حالت باعث میشه صفحه اسکرول افقی بخوره!

🎯 سخن پایانی

دیدی چقدر راحت می‌تونیم با CSS به متن‌ها استایل بدیم؟ 😎 مرسی که تا پایان این جلسه از آموزش CSS با من همراه بودی و منو با نگاه قشنگت همراهی کردی کدهایی که تو آموزش قرار میدم رو همیشه خودت تست کن و تمرین فراموش نشه!

×

جلسه 2 آموزش CSS: سینتکس CSS – اصول پایه و قواعد نوشتاری

مطالعه

در ضمن سوالی داشتی بپرس تا راهنمایی ات کنم! 😉💬