استایل‌دهی به متن‌ها یکی از اصول اولیه و ضروری در طراحی وب است. در این مطلب، تمامی ویژگی‌های CSS برای استایل‌دهی به متن‌ها را به همراه توضیح و مثال‌های کاربردی بررسی خواهیم کرد. این ویژگی‌ها به شما کمک می‌کنند متن‌هایی زیبا، خوانا و جذاب ایجاد کنید.

ویژگی‌های مربوط به متن در CSS

1. ویژگی‌های رنگ و فونت

• color: رنگ متن را مشخص می‌کند.
  color: #ff5733;
  مثال:
  h1 { color: #ff5733; }
• font-family: نوع فونت متن را تعیین می‌کند.
  font-family: 'Arial', sans-serif;
  مثال:
  p { font-family: 'Arial', sans-serif; }
• font-size: اندازه فونت متن را تعیین می‌کند.
  font-size: 20px;
  مثال:
  h2 { font-size: 24px; }
• font-weight: ضخامت متن را مشخص می‌کند (مثل نازک، عادی یا بولد).
  font-weight: bold;
  مثال:
  strong { font-weight: bold; }
• font-style: سبک متن (عادی، ایتالیک).
  font-style: italic;
  مثال:
  em { font-style: italic; }

2. ویژگی‌های فاصله و ترازبندی

• line-height: فاصله بین خطوط متن را تنظیم می‌کند.
  line-height: 1.6;
  مثال:
  p { line-height: 1.6; }
• text-align: تراز متن را تعیین می‌کند (چپ، راست، وسط، کشیده).
  text-align: justify;
  مثال:
  div { text-align: center; }
• text-indent: تورفتگی ابتدای پاراگراف را تعیین می‌کند.
  text-indent: 30px;
  مثال:
  p { text-indent: 30px; }
• letter-spacing: فاصله بین حروف را مشخص می‌کند.
  letter-spacing: 2px;
  مثال:
  h3 { letter-spacing: 2px; }
• word-spacing: فاصله بین کلمات را تعیین می‌کند.
  word-spacing: 5px;
  مثال:
  p { word-spacing: 5px; }

3. ویژگی‌های تغییر ظاهر متن

• text-transform: حالت متن را تغییر می‌دهد (به حروف بزرگ، کوچک یا اول هر کلمه بزرگ).
  text-transform: uppercase;
  مثال:
  h1 { text-transform: uppercase; }
• text-decoration: تزئینات متن (خط زیر، خط روی متن یا خط خوردگی).
  text-decoration: underline;
  مثال:
  a { text-decoration: none; }
• text-shadow: اضافه کردن سایه به متن.
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  مثال:
  h2 { text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); }

4. دیگر ویژگی‌ها

• direction: جهت نوشتار متن را تعیین می‌کند (چپ به راست یا راست به چپ).
  direction: rtl;
  مثال:
  body { direction: rtl; }
• white-space: نحوه نمایش فضای خالی را مشخص می‌کند.
  white-space: nowrap;
  مثال:
  p { white-space: nowrap; }
• overflow-wrap: نحوه شکستن کلمات بلند را تعیین می‌کند.
  overflow-wrap: break-word;
  مثال:
  p { overflow-wrap: break-word; }

تمرین‌ها

برای درک بهتر ویژگی‌های متنی در CSS، تمرین‌های زیر را انجام دهید:

1. یک متن طراحی کنید که فاصله خطوط و سایه زیبایی داشته باشد.
2. از ویژگی text-transform استفاده کنید تا متن به حروف بزرگ تبدیل شود.
3. ترازبندی متن خود را به صورت کشیده (justify) تنظیم کنید.
4. از ویژگی text-decoration برای ایجاد خط زیر متن استفاده کنید.
5. از letter-spacing برای افزایش فاصله حروف استفاده کنید.