عرض مصدر CSS/text-decoration

<noinclude>{{DISPLAYTITLE:الخاصية <code>text-decoration</code>}}</noinclude>
الخاصية <code>text-decoration</code> في CSS تُحدِّد شكل خطوط الزخرفة (decorative lines) المستخدمة على النص؛ وهي خاصيةٌ مختصرة لضبط قيمة أكثر من خاصية عن خطوط الزخرفة بآنٍ واحد، وهي تتضمن <code>[[CSS/text-decoration-line|text-decoration-line]]</code> و <code>[[CSS/text-decoration-color|text-decoration-color]]</code> و <code>[[CSS/text-decoration-style|text-decoration-style]]</code>.<syntaxhighlight lang="css">
/* كلمات محجوزة */
text-decoration: none;
text-decoration: underline red;
text-decoration: underline wavy red;

/* قيم عامة */
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;
</syntaxhighlight>لاحظ أنَّ خطوط الزخرفة ستُعرَض على العناصر النصية الأبناء، وهذا يعني أنَّه لو حدَّد أحد العناصر زخرفةً نصيةً فلن يتمكن العنصر الابن من إزالتها. فمثلًا لو كانت لدينا الشيفرة الآتية <code>‎<nowiki><p>This text has <em>some emphasized words</em></nowiki> in it.<nowiki></p></nowiki>‎</code> وُطبِّقت عليها القاعدة <code>p { text-‎decoration: underline;‎ ‎}</code>‎ فسيظهر خطٌ أسفل الفقرة كلها، ولن يكون للقاعدة <code>em { text-‎decoration: none; ‎}‎</code> أي تأثير؛ لكن إن استخدمنا <code>‎‎em‎ ‎‎{ ‎text-decoration:‎ ‎overline‎; ‎‎}‎‎</code> فسيؤدي ذلك إلى إظهار خط زخرفة آخر أعلى النص الموجود ضمن العنصر <code>[[HTML/em|<nowiki><em></nowiki>]]</code>.
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|لكل قيمة مختصرة:
* <code>[[CSS/text-decoration-color|text-decoration-color]]</code>: <code>currentcolor</code>
* <code>[[CSS/text-decoration-style|text-decoration-style]]</code>: <code>solid</code>
* <code>[[CSS/text-decoration-line|text-decoration-line]]</code>: <code>none</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا، باستثناء قيمة الخاصية <code>[[CSS/text-decoration-color|text-decoration-color]]</code>.
|-
! scope="row" |القيمة المحسوبة
|طول مطلق أو الكلمة المحجوزة <code>normal</code>.
|}

== أمثلة ==
مثال عن استخدام الخاصية المختصرة <code>text-decoration</code> مع مختلف القيم:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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; }
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.0
|3.0
|3.5
|1.0
|-
!الخاصية المختصرة
|مدعومة
|36.0
|غير مدعومة
|غير مدعومة
|7.1
|}
قبل أن تصبح هذه الخاصية مختصرةً، كانت تقبل خمس قيم، ألا وهي:<syntaxhighlight lang="css">
text-decoration: none | underline | overline | line-through | blink;

</syntaxhighlight>

== البنية العامة ==
تقبل الخاصية <code>text-decoration</code> إحدى القيم التالية التي يُفصل بينها بفراغات تُمثِّل قيم الخاصيات التي تختصرها هذه الخاصية.
=== القيمة <code><text-decoration-line></code> ===
ضبط نوع (أو مكان) الخطوط المستخدمة في الزخرفة، مثل <code>underline</code> أو <code>line-through</code>، انظر صفحة الخاصية <code>[[CSS/text-decoration-line|text-decoration-line]]</code> لمزيدٍ من المعلومات.

=== القيمة <code><text-decoration-color></code> ===
ضبط لون الزخرفة، انظر صفحة الخاصية <code>[[CSS/text-decoration-color|text-decoration-color]]</code> لمزيدٍ من المعلومات.

=== القيمة <code><text-decoration-style></code> ===
ضبط شكل الخطوط المستخدمة في الزخرفة، مثل <code>solid</code> أو <code>wavy</code> أو <code>dashed</code>، انظر صفحة الخاصية <code>[[CSS/text-decoration-style|text-decoration-style]]</code> لمزيدٍ من المعلومات.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>;

</syntaxhighlight>
== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-text-decor-3/#text-decoration-property CSS Text Decoration Module Level 3]، أصبحت هذه الخاصية هي خاصية مختصرة، وأضافت هذه المواصفة دعمًا لقيمة الخاصية <code>[[CSS/text-decoration-style|text-decoration-style]]</code>.
* مواصفة ‎[http://www.w3.org/TR/CSS2/text.html#lining-striking-props CSS Level 2 (Revision 1)‎].
* مواصفة [http://www.w3.org/TR/CSS1/#text-decoration CSS Level 1]. 
[[تصنيف:CSS]]
[[تصنيف:CSS Property]]
[[تصنيف:CSS Text Decoration]]