الفرق بين المراجعتين ل"CSS/text-decoration-color"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
| (مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين) | |||
| سطر 2: | سطر 2: | ||
الخاصية <code>text-decoration-color</code> في CSS تُحدِّد لون خطوط الزخرفة (decorative lines) المستخدمة على النص والمضبوطة عبر الخاصية <code>[[CSS/text-decoration-line|text-decoration-line]]</code>؛ وهذا يتضمن الأسطر التي تعلو الخط أو تظهر أدناه أو تمر عبره أو الخطوط المموجة (التي تُشير عادةً إلى أنَّ الكلام فيه خطأ إملائي على سبيل المثال)؛ وسيُطبَّق اللون المضبوط عبر هذه الخاصية على جميع خطوط الزخرفة المُحدَّدة على العنصر. | الخاصية <code>text-decoration-color</code> في CSS تُحدِّد لون خطوط الزخرفة (decorative lines) المستخدمة على النص والمضبوطة عبر الخاصية <code>[[CSS/text-decoration-line|text-decoration-line]]</code>؛ وهذا يتضمن الأسطر التي تعلو الخط أو تظهر أدناه أو تمر عبره أو الخطوط المموجة (التي تُشير عادةً إلى أنَّ الكلام فيه خطأ إملائي على سبيل المثال)؛ وسيُطبَّق اللون المضبوط عبر هذه الخاصية على جميع خطوط الزخرفة المُحدَّدة على العنصر. | ||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 32: | سطر 20: | ||
|قيمة لونية <code>[[CSS/color value|<color>]]</code>. | |قيمة لونية <code>[[CSS/color value|<color>]]</code>. | ||
|} | |} | ||
| + | |||
| + | إذا كنت ستضبط عدِّة خاصيات لتحديد شكل خطوط الزخرفة، فمن المستحسن حينئذٍ استخدام الخاصية المختصرة <code>[[CSS/text-decoration|text-decoration]]</code>.<syntaxhighlight lang="css"> | ||
| + | /* <color> قيم لونية */ | ||
| + | text-decoration-color: currentColor; | ||
| + | text-decoration-color: red; | ||
| + | text-decoration-color: #00ff00; | ||
| + | text-decoration-color: rgba(255, 128, 128, 0.5); | ||
| + | text-decoration-color: transparent; | ||
| + | |||
| + | /* قيم عامة */ | ||
| + | text-decoration-color: inherit; | ||
| + | text-decoration-color: initial; | ||
| + | text-decoration-color: unset; | ||
| + | </syntaxhighlight>لا توفِّر CSS طريقةً مباشرةً لتحديد لون فريد لكل خط زخرفة مُطبَّق على العنصر، لكن يمكن فعل ذلك باستخدام أكثر من عنصر HTML وبتطبيق نوع خط مختلف على كل عنصر (باستخدام الخاصية <code>[[CSS/text-decoration-line|text-decoration-line]]</code>) وتحديد لون الخط (عبر <code>text-decoration-color</code>) لكل عنصر على حدة. | ||
== أمثلة == | == أمثلة == | ||
| سطر 66: | سطر 68: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>text-decoration-color</code> قيمةً لونيةً وحيدةً. | تقبل الخاصية <code>text-decoration-color</code> قيمةً لونيةً وحيدةً. | ||
| − | === | + | === <code>[[CSS/color value|<color>]]</code> === |
ضبط لون الزخرفة. | ضبط لون الزخرفة. | ||
| سطر 74: | سطر 76: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == انظر أيضًا == | ||
| + | * صفحة الخاصية <code>[[CSS/text-decoration|text-decoration]]</code> التي تُحدِّد شكل خطوط الزخرفة المستخدمة على النص. | ||
| + | * صفحة الخاصية <code>[[CSS/text-decoration-line|text-decoration-line]]</code> التي تُحدِّد نوع خطوط الزخرفة المستخدمة على النص. | ||
| + | * صفحة الخاصية <code>[[CSS/text-decoration-style|text-decoration-style]]</code> التي تُحدِّد شكل خطوط الزخرفة المستخدمة على النص. | ||
| + | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-text-decor-3/#text-decoration-property CSS Text Decoration Module Level 3]، أصبحت الخاصية <code>[[CSS/text-decoration|text-decoration]]</code> خاصيةً مختصرةً. | * مواصفة [https://drafts.csswg.org/css-text-decor-3/#text-decoration-property 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}}]] |
المراجعة الحالية بتاريخ 17:57، 30 يوليو 2018
الخاصية text-decoration-color في CSS تُحدِّد لون خطوط الزخرفة (decorative lines) المستخدمة على النص والمضبوطة عبر الخاصية text-decoration-line؛ وهذا يتضمن الأسطر التي تعلو الخط أو تظهر أدناه أو تمر عبره أو الخطوط المموجة (التي تُشير عادةً إلى أنَّ الكلام فيه خطأ إملائي على سبيل المثال)؛ وسيُطبَّق اللون المضبوط عبر هذه الخاصية على جميع خطوط الزخرفة المُحدَّدة على العنصر.
بطاقة الخاصية
| القيمة الابتدائية | currentcolor
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | قيمة لونية <color>.
|
إذا كنت ستضبط عدِّة خاصيات لتحديد شكل خطوط الزخرفة، فمن المستحسن حينئذٍ استخدام الخاصية المختصرة text-decoration.
/* <color> قيم لونية */
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;
/* قيم عامة */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: unset;
لا توفِّر CSS طريقةً مباشرةً لتحديد لون فريد لكل خط زخرفة مُطبَّق على العنصر، لكن يمكن فعل ذلك باستخدام أكثر من عنصر HTML وبتطبيق نوع خط مختلف على كل عنصر (باستخدام الخاصية text-decoration-line) وتحديد لون الخط (عبر text-decoration-color) لكل عنصر على حدة.
أمثلة
مثال على استخدام الخاصية text-decoration-color مع الخاصيات text-decoration-line و text-decoration-style على عنصر <p> وعنصر <s> موجود داخله:
<p>في هذه الفقرة <s>بعض الأخطااء الإملائية</s> التي نريد الإشارة إليها.</p>
شيفرة CSS:
p {
text-decoration-line: underline;
text-decoration-color: cyan;
}
s {
text-decoration-line: line-through;
text-decoration-color: red;
text-decoration-style: wavy;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 57 | 36.0 | غير مدعومة | 44 | 7.1 مع السابقة -webkit-
|
البنية العامة
تقبل الخاصية text-decoration-color قيمةً لونيةً وحيدةً.
<color>
ضبط لون الزخرفة.
البنية الرسمية
text-decoration-color: <color>;
انظر أيضًا
- صفحة الخاصية
text-decorationالتي تُحدِّد شكل خطوط الزخرفة المستخدمة على النص. - صفحة الخاصية
text-decoration-lineالتي تُحدِّد نوع خطوط الزخرفة المستخدمة على النص. - صفحة الخاصية
text-decoration-styleالتي تُحدِّد شكل خطوط الزخرفة المستخدمة على النص.
مصادر ومواصفات
- مواصفة CSS Text Decoration Module Level 3، أصبحت الخاصية
text-decorationخاصيةً مختصرةً.