الفرق بين المراجعتين لصفحة: «CSS/text-decoration-line»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| (مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>text-decoration-line</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>text-decoration-line</code>}}</noinclude> | ||
الخاصية <code>text-decoration-line</code> في CSS تُحدِّد نوع خطوط الزخرفة (decorative lines) المستخدمة على النص. إذا كنت ستضبط عدِّة خاصيات لتحديد شكل خطوط الزخرفة، فمن المستحسن حينئذٍ استخدام الخاصية المختصرة <code>[[CSS/text-decoration|text-decoration]]</code>. | الخاصية <code>text-decoration-line</code> في CSS تُحدِّد نوع خطوط الزخرفة (decorative lines) المستخدمة على النص. إذا كنت ستضبط عدِّة خاصيات لتحديد شكل خطوط الزخرفة، فمن المستحسن حينئذٍ استخدام الخاصية المختصرة <code>[[CSS/text-decoration|text-decoration]]</code>. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 32: | سطر 20: | ||
|كما حُدِّدَت. | |كما حُدِّدَت. | ||
|} | |} | ||
<syntaxhighlight lang="css"> | |||
/* الكلمات المحجوزة */ | |||
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; | |||
</syntaxhighlight> | |||
== أمثلة == | == أمثلة == | ||
| سطر 67: | سطر 71: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>text-decoration-line</code> الكلمة المحجوزة <code>none</code> (التي تعني عدم استخدام زخرفة للنص)، أو قيمةً واحدةً أو أكثر من الكلمات المحجوزة الآتية التي يُفصَل بينها بفراغ. | تقبل الخاصية <code>text-decoration-line</code> الكلمة المحجوزة <code>none</code> (التي تعني عدم استخدام زخرفة للنص)، أو قيمةً واحدةً أو أكثر من الكلمات المحجوزة الآتية التي يُفصَل بينها بفراغ. | ||
=== | === <code>underline</code> === | ||
سيوضع خط الزخرفة تحت النص. | سيوضع خط الزخرفة تحت النص. | ||
=== | === <code>overline</code> === | ||
سيوضع خط الزخرفة فوق النص. | سيوضع خط الزخرفة فوق النص. | ||
=== | === <code>line-through</code> === | ||
سيمر خط الزخرفة ضمن النص. | سيمر خط الزخرفة ضمن النص. | ||
=== | === <code>blink</code> === | ||
سيومض النص، لكن هذه الخاصية مهملة بسبب تفضيل استخدام [[CSS/animation|الحركات]] في CSS عليها. | سيومض النص، لكن هذه الخاصية مهملة بسبب تفضيل استخدام [[CSS/animation|الحركات]] في CSS عليها. | ||
| سطر 81: | سطر 85: | ||
</syntaxhighlight> | </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> خاصيةً مختصرةً. | * مواصفة [https://drafts.csswg.org/css-text-decor-3/#text-decoration-line CSS Text Decoration Module Level 3]، أصبحت الخاصية <code>[[CSS/text-decoration|text-decoration]]</code> خاصيةً مختصرةً. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Text Decoration]] | [[تصنيف:CSS Text Decoration|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 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خاصيةً مختصرةً.