الخاصية text-decoration-color
الخاصية text-decoration-color
في CSS تُحدِّد لون خطوط الزخرفة (decorative lines) المستخدمة على النص والمضبوطة عبر الخاصية text-decoration-line
؛ وهذا يتضمن الأسطر التي تعلو الخط أو تظهر أدناه أو تمر عبره أو الخطوط المموجة (التي تُشير عادةً إلى أنَّ الكلام فيه خطأ إملائي على سبيل المثال)؛ وسيُطبَّق اللون المضبوط عبر هذه الخاصية على جميع خطوط الزخرفة المُحدَّدة على العنصر.
إذا كنت ستضبط عدِّة خاصيات لتحديد شكل خطوط الزخرفة، فمن المستحسن حينئذٍ استخدام الخاصية المختصرة text-decoration
.
/* <color> قيم لونية */
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;
/* قيم عامة */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: unset;
لا توفِّر CSS طريقةً مباشرةً لتحديد لون فريد لكل خط زخرفة مُطبَّق على العنصر، لكن يمكن فعل ذلك باستخدام أكثر من عنصر HTML وبتطبيق نوع خط مختلف على كل عنصر (باستخدام الخاصية text-decoration-line
) وتحديد لون الخط (عبر text-decoration-color
) لكل عنصر على حدة.
القيمة الابتدائية | currentcolor
|
---|---|
تُطبَّق على | جميع العناصر. |
قابلة للوراثة | لا |
قابلة للتحريك | نعم |
القيمة المحسوبة | قيمة لونية <color> .
|
أمثلة
مثال على استخدام الخاصية text-decoration-color
مع الخاصيات text-decoration-line
و text-decoration-style
على عنصر <p>
وعنصر <s>
موجود داخله:
<p>في هذه الفقرة <s>بعض الأخطااء الإملائية</s> التي نريد الإشارة إليها.</p>
شيفرة CSS:
p {
text-decoration-line: underline;
text-decoration-color: cyan;
}
s {
text-decoration-line: line-through;
text-decoration-color: red;
text-decoration-style: wavy;
}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 57 | 36.0 | غير مدعومة | 44 | 7.1 مع السابقة -webkit-
|
البنية العامة
تقبل الخاصية text-decoration-color
قيمةً لونيةً وحيدةً.
القيمة <color>
ضبط لون الزخرفة.
البنية الرسمية
text-decoration-color: <color>;
مصادر ومواصفات
- مواصفة CSS Text Decoration Module Level 3، أصبحت الخاصية
text-decoration
خاصيةً مختصرةً.