خط تزئین متن در CSS – ویژگی text-decoration

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

ویژگی text-decoration از جمله ویژگی های خلاصه (Shorthand) در سی‌اس‌اس محسوب می‌شود و می‌تواند به عنوان جایگزینی برای مجموع ویژگی های text-decoration-line, text-decoration-color, text-decoration-style و text-decoration-thickness مورد استفاده قرار بگیرد.

نحوه استفاده از ویژگی text-decoration برای تعیین ظاهر خط تزئین متن در CSS

برای تعیین ظاهر خطوط تزئینی متن، می‌توانید در سی‌اس‌اس مقدار ویژگی text-decoration را در ساده‌ترین حالت مشابه با نمونه زیر مشخص کنید.

a {
  text-decoration: underline;
}

کد CSS فوق باعث می‌شود زیر تمام لینک ها یک خط زیر ساده (یا آندرلاین) رسم شود. نتیجه این قانون معمولا به صورت پیشفرض مشابه با لینک نمونه زیر خواهد بود.

به عنوان مثالی کامل‌تر، قانون زیر را در نظر بگیرید:

a {
  text-decoration: underline red dashed 3px;
}

کد CSS فوق باعث می‌شود زیر تمام لینک ها یک خط قرمز رنگ به صورت خط‌چین (dashed) و با ضخامت 3 پیکسل رسم شود. تصویر زیر نمونه اعمال این قانون روی یک لینک نمونه را نمایش می‌دهد.

چند نکته در مورد ویژگی text-decoration

مشابه با سایر ویژگی‌های Shorthand، مقادیر بخش‌های مختلف در ویژگی text-decoration متناسب با مقادیر چهار ویژگی text-decoration-line, text-decoration-color, text-decoration-style و text-decoration-thickness می‌باشد. برای نمونه به جای مقدار underline در مثال قبل می‌توانید از سایر مقادیر مجاز برای ویژگی text-decoration-line (نظیر none, overline یا line-through) نیز استفاده کنید.

چهار ویژگی فوق، کاربرد و مقادیر مجاز برای آن‌ها به صورت خلاصه عبارتند از:

• ویژگی text-decoration-line: این ویژگی، نوع خط تزئینی مانند خط زیر (یا underline)، خط بالا (یا overline) و خط میانی (یا line-through) را مشخص می‌کند. مقدار none برای این ویژگی باعث می‌شود هیچ نوع خط تزئینی برای متن رسم نشود.
• ویژگی text-decoration-color: این ویژگی، رنگ خط تزئینی را با کمک مقادیر مجاز تعیین رنگ در سی‌اس‌اس مشخص می‌کند.
• ویژگی text-decoration-style: این ویژگی، استایل خط تزئینی را مشخص می‌کند. مواردی مانند تک خط ساده یکپارچه (solid)، خط دوتایی (double)، نقطه چین (dotted)، خط چین (dashed) یا خط موج دار (wavy) از جمله استایل‌هایی هستند که با کمک این ویژگی تعیین می‌شود.
• ویژگی text-decoration-thickness: میزان ضخامت خط تزئینی را مشخص می‌کند.

فراموش نکنید در ویژگی text-decoration، صرفا درج مقدار متناسب با ویژگی text-decoration-line برای نمایش خط لازم است و ذکر مقادیر متناسب با سایر ویژگی‌های فوق اختیاری است. به عنوان مثال تعیین مقدار ویژگی text-decoration مطابق با تمام موارد زیر قابل قبول است.

text-decoration: none;
text-decoration: underline 2px dashed;
text-decoration: underline green;

بازگشت به فهرست مجموعه آموزشی CSS