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

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

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

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

نحوه استفاده از ویژگی text-decoration-color

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

.mistake {
  text-decoration-line: underline;
  text-decoration-color: red;
}

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

چند نکته در مورد رنگ خط تزئین متن در CSS

معمولا به صورت پیشفرض رنگ خط تزئین متن با رنگ متن یکسان است. تفاوت رنگ خط تزئین متن با رنگ متن می‌تواند باعث جلب توجه بیشتر شود. مواردی مانند غلط املایی و همچنین متون حذف یا اضافه شده با رنگ متفاوت برای خط تزئین متن، بهتر دیده می‌شوند.

بیشتر بخوانید: رنگ متن در CSS و ویژگی color

مقدار ویژگی text-decoration-color مشابه با سایر مقادیر رنگ در CSS معمولا به صورت نام رنگ، مقدار هگز یا مقدار RGB رنگ مشخص می‌شود.

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

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