الخاصية text-decoration

الخاصية text-decoration في CSS تُحدِّد شكل خطوط الزخرفة (decorative lines) المستخدمة على النص؛ وهي خاصيةٌ مختصرة لضبط قيمة أكثر من خاصية عن خطوط الزخرفة بآنٍ واحد، وهي تتضمن text-decoration-line و text-decoration-color و text-decoration-style.

بطاقة الخاصية

القيمة الابتدائية	لكل قيمة مختصرة: text-decoration-color: currentcolor text-decoration-style: solid text-decoration-line: none
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا، باستثناء قيمة الخاصية text-decoration-color.
القيمة المحسوبة	طول مطلق أو الكلمة المحجوزة normal.

/* كلمات محجوزة */
text-decoration: none;
text-decoration: underline red;
text-decoration: underline wavy red;

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

لاحظ أنَّ خطوط الزخرفة ستُعرَض على العناصر النصية الأبناء، وهذا يعني أنَّه لو حدَّد أحد العناصر زخرفةً نصيةً فلن يتمكن العنصر الابن من إزالتها. فمثلًا لو كانت لدينا الشيفرة الآتية ‎<p>This text has <em>some emphasized words</em> in it.</p>‎ وُطبِّقت عليها القاعدة p { text-‎decoration: underline;‎ ‎}‎ فسيظهر خطٌ أسفل الفقرة كلها، ولن يكون للقاعدة em { text-‎decoration: none; ‎}‎ أي تأثير؛ لكن إن استخدمنا ‎‎em‎ ‎‎{ ‎text-decoration:‎ ‎overline‎; ‎‎}‎‎ فسيؤدي ذلك إلى إظهار خط زخرفة آخر أعلى النص الموجود ضمن العنصر <em>.

أمثلة

مثال عن استخدام الخاصية المختصرة text-decoration مع مختلف القيم:

<p class="under">هذا النص تحته خط.</p>
<p class="over">هذا النص فوقه خط.</p>
<p class="line">يمر خط عبر هذا النص.</p>
<p>هذا <a class="plain" href="#">الرابط لن يوضع تحته خط</a>، لكن خذ حذرك عند إزالة الخط الذي تحت الروابط لأن ذلك قد يتسبب بتشويش الزوار.</p>
<p class="underover">هذا النص تحته خط <em>و</em> فوقه خط.</p>
<p class="blink">قد يومض هذا النص إذا كان متصفحك يدعم ذلك.</p>

شيفرة CSS:

.under     { text-decoration: underline red; }
.over      { text-decoration: wavy overline lime; }
.line      { text-decoration: line-through; }
.plain     { text-decoration: none; }
.underover { text-decoration: dashed underline overline; }
.blink     { text-decoration: blink; }

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	3.0	3.5	1.0
الخاصية المختصرة	مدعومة	36.0	غير مدعومة	غير مدعومة	7.1

قبل أن تصبح هذه الخاصية مختصرةً، كانت تقبل خمس قيم، ألا وهي:

text-decoration: none | underline | overline | line-through | blink;

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

تقبل الخاصية text-decoration إحدى القيم التالية التي يُفصل بينها بفراغات تُمثِّل قيم الخاصيات التي تختصرها هذه الخاصية.

<text-decoration-line>

ضبط نوع (أو مكان) الخطوط المستخدمة في الزخرفة، مثل underline أو line-through، انظر صفحة الخاصية text-decoration-line لمزيدٍ من المعلومات.

<text-decoration-color>

ضبط لون الزخرفة، انظر صفحة الخاصية text-decoration-color لمزيدٍ من المعلومات.

<text-decoration-style>

ضبط شكل الخطوط المستخدمة في الزخرفة، مثل solid أو wavy أو dashed، انظر صفحة الخاصية text-decoration-style لمزيدٍ من المعلومات.

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

text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>;

انظر أيضًا

• صفحة الخاصية text-decoration-color التي تُحدِّد لون خطوط الزخرفة المستخدمة على النص.
• صفحة الخاصية  text-decoration-line التي  تُحدِّد نوع خطوط الزخرفة المستخدمة على النص.
• صفحة الخاصية  text-decoration-style التي تُحدِّد شكل خطوط الزخرفة المستخدمة على النص.

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

• مواصفة CSS Text Decoration Module Level 3، أصبحت هذه الخاصية هي خاصية مختصرة، وأضافت هذه المواصفة دعمًا لقيمة الخاصية text-decoration-style.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.