فصل ۱۳ | CSS Text & Fonts

استایل‌دهی متن در CSS

CSS ویژگی‌های زیادی برای کنترل ظاهر متن در اختیار قرار می‌دهد. با استفاده از این ویژگی‌ها می‌توان رنگ، تراز، فاصله‌ی خطوط، تزئینات و جهت متن را تنظیم کرد. در این درس با مهم‌ترین ویژگی‌های مربوط به متن آشنا می‌شویم.

رنگ متن (color)

ویژگی color برای تعیین رنگ متن استفاده می‌شود. مقدار آن می‌تواند نام رنگ، کد هگزادسیمال یا مقادیر RGB باشد.

style.css
p{
    color: darkslategray;
}

در این مثال، رنگ متن تمام پاراگراف‌ها برابر darkslategray تنظیم شده است.

تراز متن (text-align)

ویژگی text-align جهت‌گیری افقی متن داخل عنصر را مشخص می‌کند. مقادیر رایج آن عبارت‌اند از:

  • left: چپ‌چین
  • right: راست‌چین
  • center: وسط‌چین
  • justify: تراز از دو طرف
style.css
h1{
    text-align: center;
}

در این مثال، متن عنصر h1 به‌صورت وسط‌چین نمایش داده می‌شود.

تزئین متن (text-decoration)

ویژگی text-decoration برای اضافه یا حذف کردن خطوط تزئینی روی متن استفاده می‌شود. برخی از مقادیر رایج آن عبارت‌اند از:

  • letter-spacing: فاصله بین حروف
  • word-spacing: فاصله بین کلمات
  • line-height: فاصله بین خطوط متن

style.css
p{
    letter-spacing: 1px;
    line-height: 1.6;
}

در این مثال، فاصله‌ی بین حروف برابر 1px و فاصله‌ی بین خطوط متن برابر 1.6 برابر اندازه‌ی فونت تنظیم شده است.

نکته: تنظیم مناسب line-height تأثیر زیادی روی خوانایی متن‌های طولانی دارد و معمولاً مقداری بین 1.4 تا 1.8 پیشنهاد می‌شود