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

من موسوعة حسوب
< CSS
مراجعة 18:00، 30 يوليو 2018 بواسطة Riyad-khalifeh (نقاش | مساهمات)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

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

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

القيمة الابتدائية none
تُطبَّق على جميع العناصر.
قابلة للوراثة لا
قابلة للتحريك لا
القيمة المحسوبة كما حُدِّدَت.
/* الكلمات المحجوزة */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
text-decoration-line: underline overline;               /* استخدام خطَيّ زخرفة */
text-decoration-line: overline underline line-through;  /* استخدام عدِّة خطوط زخرفة */

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

أمثلة

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

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

شيفرة CSS:

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

.both {
  text-decoration-line: underline overline;
}

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

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

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

تقبل الخاصية text-decoration-line الكلمة المحجوزة none (التي تعني عدم استخدام زخرفة للنص)، أو قيمةً واحدةً أو أكثر من الكلمات المحجوزة الآتية التي يُفصَل بينها بفراغ.

underline

سيوضع خط الزخرفة تحت النص.

overline

سيوضع خط الزخرفة فوق النص.

line-through

سيمر خط الزخرفة ضمن النص.

blink

سيومض النص، لكن هذه الخاصية مهملة بسبب تفضيل استخدام الحركات في CSS عليها.

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

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

انظر أيضًا[عدل | عدل المصدر]

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

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