الخاصية text-decoration
الخاصية text-decoration في CSS تُحدِّد شكل خطوط الزخرفة (decorative lines) المستخدمة على النص؛ وهي خاصيةٌ مختصرة لضبط قيمة أكثر من خاصية عن خطوط الزخرفة بآنٍ واحد، وهي تتضمن text-decoration-line و text-decoration-color و text-decoration-style.
/* كلمات محجوزة */
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-color.
|
| القيمة المحسوبة | طول مطلق أو الكلمة المحجوزة normal.
|
أمثلة
مثال عن استخدام الخاصية المختصرة 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'>;
مصادر ومواصفات
- مواصفة CSS Text Decoration Module Level 3، أصبحت هذه الخاصية هي خاصية مختصرة، وأضافت هذه المواصفة دعمًا لقيمة الخاصية
text-decoration-style. - مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.