الفرق بين المراجعتين لصفحة: «CSS/text-decoration-style»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| (مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>text-decoration-style</code>}}</noinclude> | <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> | الخاصية <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%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 33: | سطر 20: | ||
|كما حُدِّدَت. | |كما حُدِّدَت. | ||
|} | |} | ||
<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>؛ إذ يمكن أن تُعطِّل المتصفحات التنسيق في بعض الحالات، لكن المعنى التنظيمي لتلك العناصر لن يزول في تلك الحالة. | |||
== أمثلة == | == أمثلة == | ||
| سطر 62: | سطر 65: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>text-decoration-style</code> قيمةً واحدةً من الكلمات المحجوزة الآتية. | تقبل الخاصية <code>text-decoration-style</code> قيمةً واحدةً من الكلمات المحجوزة الآتية. | ||
=== | === <code>solid</code> === | ||
خط الزخرفة مليء. | خط الزخرفة مليء. | ||
=== | === <code>double</code> === | ||
خط الزخرفة مزدوج. | خط الزخرفة مزدوج. | ||
=== | === <code>dotted</code> === | ||
خط الزخرفة منقط. | خط الزخرفة منقط. | ||
=== | === <code>dashed</code> === | ||
خط الزخرفة مقطع. | خط الزخرفة مقطع. | ||
=== | === <code>wavy</code> === | ||
خط الزخرفة مموج. | خط الزخرفة مموج. | ||
| سطر 78: | سطر 81: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* صفحة الخاصية <code>[[CSS/text-decoration|text-decoration]]</code> التي تُحدِّد شكل خطوط الزخرفة المستخدمة على النص. | |||
* صفحة الخاصية <code>[[CSS/text-decoration-color|text-decoration-color]]</code> التي تُحدِّد لون خطوط الزخرفة المستخدمة على النص. | |||
* صفحة الخاصية <code>[[CSS/text-decoration-line|text-decoration-line]]</code> التي تُحدِّد نوع خطوط الزخرفة المستخدمة على النص. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-text-decor-3/#text-decoration-style CSS Text Decoration Module Level 3]، أصبحت الخاصية <code>[[CSS/text-decoration|text-decoration]]</code> خاصيةً مختصرةً. | * مواصفة [https://drafts.csswg.org/css-text-decor-3/#text-decoration-style CSS Text Decoration Module Level 3]، أصبحت الخاصية <code>[[CSS/text-decoration|text-decoration]]</code> خاصيةً مختصرةً. | ||
المراجعة الحالية بتاريخ 11:17، 7 أكتوبر 2022
الخاصية text-decoration-style في CSS تُحدِّد شكل خطوط الزخرفة (decorative lines) المستخدمة على النص (المضبوطة عبر الخاصية text-decoration-line). إذا كنت ستضبط عدِّة خاصيات لتحديد شكل خطوط الزخرفة، فمن المستحسن حينئذٍ استخدام الخاصية المختصرة text-decoration.
بطاقة الخاصية
| القيمة الابتدائية | solid
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
/* الكلمات المحجوزة */
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;
لا توفِّر CSS طريقةً مباشرةً لتحديد شكل فريد لكل خط زخرفة مُطبَّق على العنصر، لكن يمكن فعل ذلك باستخدام أكثر من عنصر HTML وبتطبيق نوع خط مختلف على كل عنصر (باستخدام الخاصية text-decoration-line) وتحديد شكل الخط (عبر text-decoration-style) لكل عنصر على حدة.
إذا كنت تستعمل خطوط الزخرفة لإعطاء معنى تنظيمي للنص، مثل استخدام الخطوط المارة في النص للإشارة إلى أنَّ هذا النص قد حُذِف، فمن المستحسن أن تستعمل عناصر HTML الملائمة لهذا الغرض مثل <del> أو <s>؛ إذ يمكن أن تُعطِّل المتصفحات التنسيق في بعض الحالات، لكن المعنى التنظيمي لتلك العناصر لن يزول في تلك الحالة.
أمثلة
مثال على استخدام الخاصية text-decoration-style مع الخاصيات text-decoration-color و text-decoration-line على عنصر <p> لإضافة خط أحمر مموج تحت النص:
<p class="wavy">هذا نصٌ تحته خطٌ أحمر مموج.</p>
شيفرة CSS:
.wavy {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 57 | 36.0 | غير مدعومة | 44 | 7.1 مع السابقة -webkit-
|
البنية العامة
تقبل الخاصية text-decoration-style قيمةً واحدةً من الكلمات المحجوزة الآتية.
solid
خط الزخرفة مليء.
double
خط الزخرفة مزدوج.
dotted
خط الزخرفة منقط.
dashed
خط الزخرفة مقطع.
wavy
خط الزخرفة مموج.
البنية الرسمية
text-decoration-style: solid | double | dotted | dashed | wavy;
انظر أيضًا
- صفحة الخاصية
text-decorationالتي تُحدِّد شكل خطوط الزخرفة المستخدمة على النص. - صفحة الخاصية
text-decoration-colorالتي تُحدِّد لون خطوط الزخرفة المستخدمة على النص. - صفحة الخاصية
text-decoration-lineالتي تُحدِّد نوع خطوط الزخرفة المستخدمة على النص.
مصادر ومواصفات
- مواصفة CSS Text Decoration Module Level 3، أصبحت الخاصية
text-decorationخاصيةً مختصرةً.