تک دیک

واژه نامه و مجله آموزشی کامپیوتر و فناوری

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

ویژگی text-decoration-line در CSS برای تعیین نوع یا موقعیت خط تزئین متن (به عنوان مثال به صورت آندرلاین یا خط بالا) به کار می‌رود.

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

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

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

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

a {
  text-decoration-line: underline;
}

مقدار underline برای این ویژگی در قانون بالا باعث می‌شود زیر تمام لینک ها (یا المان های <a>) یک خط زیر ساده (یا آندرلاین) رسم شود. تصویر زیر نتیجه قانون فوق روی یک لینک نمونه را (با فرض مقادیر پیشفرض عامل کاربری برای سایر ویژگی‌های مرتبط) نمایش می‌دهد:

نمایی از یک لینک با خط زیر نتیجه مقدار underline برای ویژگی text-decoration-line

شما می‌توانید به طور همزمان از چند مقدار برای این ویژگی استفاده کنید. مثال زیر نمونه‌ای از این حالت برای رسم خط زیر و خط بالا را نمایش می‌دهد:

p {
  text-decoration-line: underline overline;
}

نتیجه قانون CSS فوق روی یک پاراگراف (یا المان <p>) فرضی مشابه با تصویر زیر رندر می‌شود:

نمایی از خط زیر و خط بالا با کمک دو مقدار برای ویژگی text-decoration-line در CSS

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

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

  • none: این مقدار به عنوان مقدار پیشفرض برای ویژگی text-decoration-line باعث می‌شود هیچ خط تزئینی برای متن رسم نشود. یکی از کاربردهای رایج برای استفاده از این مقدار، حذف خطی است که معمولا زیر لینک ها به عنوان ظاهر پیشفرض رسم می‌شود. به این ترتیب امکان تعیین ظاهر خاص برای لینک‌هایی مانند آیتم‌های منوی سایت و … فراهم می‌شود.
  • underline: این مقدار باعث می‌شود خط تزئینی به صورت آندرلاین زیر متن رسم شود. یکی از کاربردهای رایج این مقدار، رسم خط زیر برای لینک های عادی صفحه است. به علاوه از این مقدار برای نمایش بخشی از متن که پس از بازبینی و … اضافه شده است هم استفاده می‌شود. (بیشتر بخوانید: متن اضافه شده در HTML).
  • overline: این مقدار سبب می‌شود خط تزئینی بالای متن رسم شود.
  • line-through: این مقدار باعث می‌شود خط تزئینی به صورت استرایکترو روی متن رسم شود. یکی از کاربردهای رایج برای این مقدار، رسم خط روی متونی است که می‌خواهیم به عنوان متن حذف شده نادیده گرفته شوند. (بیشتر بخوانید: متن حذف شده در HTML).

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

نتیجه مقادیر مختلف ویژگی text-decoration-line در سی اس اس

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

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *