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

<noinclude>{{DISPLAYTITLE:الخاصية <code>text-decoration-style</code>}}</noinclude>
الخاصية <code>text-decoration-style</code> في CSS تُحدِّد شكل خطوط الزخرفة (decorative lines) المستخدمة على النص (المضبوطة عبر الخاصية <code>[[CSS/text-decoration-line|text-decoration-line]]</code>). إذا كنت ستضبط عدِّة خاصيات لتحديد شكل خطوط الزخرفة، فمن المستحسن حينئذٍ استخدام الخاصية المختصرة <code>[[CSS/text-decoration|text-decoration]]</code>.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>solid</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.
|}

<syntaxhighlight lang="css">
/* الكلمات المحجوزة */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* القيم العامة */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;
</syntaxhighlight>لا توفِّر CSS طريقةً مباشرةً لتحديد شكل فريد لكل خط زخرفة مُطبَّق على العنصر، لكن يمكن فعل ذلك باستخدام أكثر من عنصر HTML وبتطبيق نوع خط مختلف على كل عنصر (باستخدام الخاصية <code>[[CSS/text-decoration-line|text-decoration-line]]</code>) وتحديد شكل الخط (عبر <code>text-decoration-style</code>) لكل عنصر على حدة.

إذا كنت تستعمل خطوط الزخرفة لإعطاء معنى تنظيمي للنص، مثل استخدام الخطوط المارة في النص للإشارة إلى أنَّ هذا النص قد حُذِف، فمن المستحسن أن تستعمل عناصر HTML الملائمة لهذا الغرض مثل <code>[[HTML/del|<nowiki><del></nowiki>]]</code> أو <code>[[HTML/s|<nowiki><s></nowiki>]]</code>؛ إذ يمكن أن تُعطِّل المتصفحات التنسيق في بعض الحالات، لكن المعنى التنظيمي لتلك العناصر لن يزول في تلك الحالة.

== أمثلة ==
مثال على استخدام الخاصية <code>text-decoration-style</code> مع الخاصيات <code>[[CSS/text-decoration-color|text-decoration-color]]</code> و <code>[[CSS/text-decoration-line|text-decoration-line]]</code> على عنصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code> لإضافة خط أحمر مموج تحت النص:<syntaxhighlight lang="html">
<p class="wavy">هذا نصٌ تحته خطٌ أحمر مموج.</p>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.wavy { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|57
|36.0
|غير مدعومة
|44
|7.1 مع السابقة <code>-webkit-</code>
|}
== البنية العامة ==
تقبل الخاصية <code>text-decoration-style</code> قيمةً واحدةً من الكلمات المحجوزة الآتية.
===  <code>solid</code> ===
خط الزخرفة مليء.
=== <code>double</code> ===
خط الزخرفة مزدوج.
===  <code>dotted</code> ===
خط الزخرفة منقط.
===  <code>dashed</code> ===
خط الزخرفة مقطع.
===  <code>wavy</code> ===
خط الزخرفة مموج.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
text-decoration-style: solid | double | dotted | dashed | wavy;

</syntaxhighlight>
== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-text-decor-3/#text-decoration-style CSS Text Decoration Module Level 3]، أصبحت الخاصية <code>[[CSS/text-decoration|text-decoration]]</code> خاصيةً مختصرةً. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Text Decoration|{{SUBPAGENAME}}]]