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

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

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

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

نحوه تعیین استایل خط تزئین و استفاده از ویژگی text-decoration-style

برای تعیین استایل خط تزئین متن در CSS کافیست مقدار ویژگی text-decoration-style را مشابه با مثال زیر مشخص کنید:

.dtext{
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: dashed;
}

مقدار dashed برای این ویژگی در مثال بالا باعث می‌شود خط تزئین متن به صورت خط‌چین رسم شود. با توجه به مقدار red برای ویژگی text-decoration-color و مقدار underline برای ویژگی text-decoration-line، این خط با رنگ قرمز و به صورت آندرلاین رسم می‌شود. تصویر زیر نتیجه اعمال قانون فوق را روی بخشی از یک پاراگراف شامل واژه simple نمایش می‌دهد. (این واژه در قالب یک المان <span> با کلاس dtext داخل پاراگراف قرار دارد):

<p>This is a <span class="dtext">simple</span> paragraph.</p>

مقادیر متداول

شما می‌توانید از مقادیر متداول زیر برای ویژگی text-decoration-style استفاده کنید:

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

در تصویر زیر می‌توانید نتیجه تک تک مقادیر فوق برای ویژگی text-decoration-style را روی یک متن ساده (واژه Text) مشاهده کنید. (فراموش نکنید این ظاهر با فرض مقدار underline برای ویژگی text-decoration-line می‌باشد).

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