الخاصية text-decoration-style

الخاصية text-decoration-style في CSS تُحدِّد شكل خطوط الزخرفة (decorative lines) المستخدمة على النص (المضبوطة عبر الخاصية text-decoration-line). إذا كنت ستضبط عدِّة خاصيات لتحديد شكل خطوط الزخرفة، فمن المستحسن حينئذٍ استخدام الخاصية المختصرة text-decoration.

/* الكلمات المحجوزة */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* القيم العامة */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;

لا توفِّر CSS طريقةً مباشرةً لتحديد شكل فريد لكل خط زخرفة مُطبَّق على العنصر، لكن يمكن فعل ذلك باستخدام أكثر من عنصر HTML وبتطبيق نوع خط مختلف على كل عنصر (باستخدام الخاصية text-decoration-line) وتحديد شكل الخط (عبر text-decoration-style) لكل عنصر على حدة.

إذا كنت تستعمل خطوط الزخرفة لإعطاء معنى تنظيمي للنص، مثل استخدام الخطوط المارة في النص للإشارة إلى أنَّ هذا النص قد حُذِف، فمن المستحسن أن تستعمل عناصر HTML الملائمة لهذا الغرض مثل <del> أو <s>؛ إذ يمكن أن تُعطِّل المتصفحات التنسيق في بعض الحالات، لكن المعنى التنظيمي لتلك العناصر لن يزول في تلك الحالة.

القيمة الابتدائية	solid
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

أمثلة

مثال على استخدام الخاصية text-decoration-style مع الخاصيات text-decoration-color و text-decoration-line على عنصر <p> لإضافة خط أحمر مموج تحت النص:

<p class="wavy">هذا نصٌ تحته خطٌ أحمر مموج.</p>

شيفرة CSS:

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

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	57	36.0	غير مدعومة	44	7.1 مع السابقة -webkit-

البنية العامة

تقبل الخاصية text-decoration-style قيمةً واحدةً من الكلمات المحجوزة الآتية.

القيمة solid

خط الزخرفة مليء.

القيمة double

خط الزخرفة مزدوج.

القيمة dotted

خط الزخرفة منقط.

القيمة dashed

خط الزخرفة مقطع.

القيمة wavy

خط الزخرفة مموج.

البنية الرسمية

text-decoration-style: solid | double | dotted | dashed | wavy;

مصادر ومواصفات

• مواصفة CSS Text Decoration Module Level 3، أصبحت الخاصية text-decoration خاصيةً مختصرةً.