استایل متن در css

استایل متن در css ویژگی های متفاوتی می گیرد که در ادامه به صورت مختصر، هر یک را توضیح خواهیم داد:

Text Color

ویژگی color در css رنگ متن را تعیین می کند که به یکی از روش های زیر مقداردهی می شود:

با استفاده از نام رنگ مثل Red
با استفاده از روش HEX مثل ff0000 #
با استفاده از روش RGB مثل (rgb(255,0,0

رنگی که به صورت پیش فرض برای کل صفحه انتخاب می شود، رنگی است که به body اختصاص می یابد.

body {
  color: blue;
}
h1 {
  color: green;
}

Text Alignment

ویژگی text-align استایل متن در css را در جهت افقی تعیین می کند که این مقادیر را می تواند بگیرد:
center، right، left و justify.
به مثال زیر دقت کنید:

h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}

نکته: اگر text-direction:ltr باشد، استایل متن در css به صورت پیش فرض از چپ چیده خواهد شد و برعکس.
هنگامی که مقدار text-align را مساوی justify قرار می دهیم همه سطرها کشیده می شوند و از حاشیه در یک راستا قرار می گیرند؛ بنابراین عرض همه سطرها برابر می شود.

div {
  text-align: justify;
}

Text Decoration

text-decoration: none باعث می شود خط زیر متن حذف شود، از این ویژگی برای حذف خط زیر لینک ها می توان استفاده کرد.
سایر ویژگی ها را در مثال زیر می بینید:

h1 {
  text-decoration: overline;
}
h2 {
  text-decoration: line-through;
}
h3 {
  text-decoration: underline;
}

نکته: خط کشیدن زیر متنی که لینک نیست، توصیه نمی شود، زیرا این کار باعث گیج شدن خواننده متن می شود.

Text Transformation

ویژگی text-transform برای تعیین کوچک یا بزرگ نوشتن حروف استفاده می شود.
می توانید تمام حروف یک متن را کوچک یا بزرگ کنید یا اینکه فقط حرف اول هر کلمه را بزرگ بنویسید:

p.uppercase {
  text-transform: uppercase;
}
p.lowercase {
  text-transform: lowercase;
}
p.capitalize {
  text-transform: capitalize;
}

Text Indentation

ویژگی text-indent برای به وجود آورد تورفتگی سطر اول متن نسبت به سایر سطرها استفاده می شود:

p {
  text-indent: 50px;
}

Letter Spacing

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

h1 {
  letter-spacing: 3px;
}
h2 {
  letter-spacing: -3px;
}

Line Height

ویژگی line-height فاصله بین سطرهای متن را تعیین می کند:

p.small {
  line-height: 0.8;
}
p.big {
  line-height: 1.8;
}

Text Direction

ویژگی direction برای تعیین جهت متن به کار می رود:

p {
  direction: rtl;
}

Word Spacing

ویژگی word-spacing برای ایجاد فاصله بین کلمات استفاده می شود:

h1 {
  word-spacing: 10px;
}
h2 {
  word-spacing: -5px;
}

Text Shadow

ویژگی text-shadow برای متن، سایه ای با رنگ دلخواه ایجاد می کند.
در مثال زیر ۳ پیکسل سایه در جهت افقی و ۲ پیکسل در جهت عمودی با رنگ قرمز به متن داده شده است.