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

من موسوعة حسوب
< CSS
مراجعة 11:10، 29 أكتوبر 2017 بواسطة عبد اللطيف ايمش (نقاش | مساهمات)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

الخاصية 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>;

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