الفرق بين المراجعتين لصفحة: «CSS/text-decoration-line»

المراجعة الحالية بتاريخ 18:00، 30 يوليو 2018

الخاصية 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 التي تُحدِّد شكل خطوط الزخرفة المستخدمة على النص.

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

مواصفة CSS Text Decoration Module Level 3، أصبحت الخاصية text-decoration خاصيةً مختصرةً.

@@ سطر 85: / سطر 85: @@
 </syntaxhighlight>
+== انظر أيضًا[عدل | عدل المصدر] ==
+* صفحة الخاصية  <code>[[CSS/text-decoration|text-decoration]]</code> التي  تُحدِّد شكل خطوط الزخرفة المستخدمة على النص.
+* صفحة الخاصية <code>[[CSS/text-decoration-color|text-decoration-color]]</code> التي تُحدِّد لون خطوط الزخرفة المستخدمة على النص.
+* صفحة الخاصية  <code>[[CSS/text-decoration-style|text-decoration-style]]</code> التي تُحدِّد شكل خطوط الزخرفة المستخدمة على النص.
 == مصادر ومواصفات ==
 * مواصفة [https://drafts.csswg.org/css-text-decor-3/#text-decoration-line CSS Text Decoration Module Level 3]، أصبحت الخاصية <code>[[CSS/text-decoration|text-decoration]]</code> خاصيةً مختصرةً.