الفرق بين المراجعتين لصفحة: «CSS/list-style-image»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| (1 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>list-style-image</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>list-style-image</code>}}</noinclude> | ||
الخاصية <code>list-style-image</code> في CSS تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة <code>[[CSS/list-style|list-style]]</code> لضبط قيمة هذه الخاصية. | الخاصية <code>list-style-image</code> في CSS تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة <code>[[CSS/list-style|list-style]]</code> لضبط قيمة هذه الخاصية. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 30: | سطر 21: | ||
|} | |} | ||
<syntaxhighlight lang="css"> | |||
/* كلمة مفتاحية */ | |||
list-style-image: none; | |||
/* <url> قيم */ | |||
list-style-image: url('starsolid.gif'); | |||
/* القيم العامة */ | |||
list-style-image: inherit; | |||
list-style-image: initial; | |||
list-style-image: unset; | |||
</syntaxhighlight> | |||
ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية <code>[[CSS/display|display]]</code> فيها تساوي <code>list-item</code>، وهذا يتضمن العنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> افتراضيًا؛ لكن لاحظ أنَّ قيمة هذه الخاصية قابلة للوراثة، أي يمكن ضبطها على العنصر الأب (الذي يكون عادةً <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> أو <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>) لتطبيق تنسيق القوائم على جميع العناصر الموجودة داخله. | ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية <code>[[CSS/display|display]]</code> فيها تساوي <code>list-item</code>، وهذا يتضمن العنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> افتراضيًا؛ لكن لاحظ أنَّ قيمة هذه الخاصية قابلة للوراثة، أي يمكن ضبطها على العنصر الأب (الذي يكون عادةً <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> أو <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>) لتطبيق تنسيق القوائم على جميع العناصر الموجودة داخله. | ||
| سطر 62: | سطر 65: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>list-style-image</code> إحدى القيمتين التاليتين. | تقبل الخاصية <code>list-style-image</code> إحدى القيمتين التاليتين. | ||
=== | === <code>none</code> === | ||
تشير هذه القيمة إلى أنَّنا لا نريد استخدام صورة للإشارة إلى عناصر القائمة، وبالتالي سيعرض المستخدم الرمز المضبوط عبر الخاصية <code>[[CSS/list-style-type|list-style-type]]</code>. | تشير هذه القيمة إلى أنَّنا لا نريد استخدام صورة للإشارة إلى عناصر القائمة، وبالتالي سيعرض المستخدم الرمز المضبوط عبر الخاصية <code>[[CSS/list-style-type|list-style-type]]</code>. | ||
=== | === <code>[[CSS/url|<url>]]</code> === | ||
رابط للصورة التي ستستخدم للإشارة إلى عناصر القائمة، لاحظ أنَّ المواصفة [https://drafts.csswg.org/css-lists-3/#list-style-image CSS Lists and Counters Module Level 3] قد سمحت باستخدام أي قيمة من نوع البيانات <code>[[CSS/image|<image>]]</code>. | رابط للصورة التي ستستخدم للإشارة إلى عناصر القائمة، لاحظ أنَّ المواصفة [https://drafts.csswg.org/css-lists-3/#list-style-image CSS Lists and Counters Module Level 3] قد سمحت باستخدام أي قيمة من نوع البيانات <code>[[CSS/image|<image>]]</code>. | ||
| سطر 73: | سطر 76: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* صفحة الخاصية <code>[[CSS/list-style|list-style]]</code> وهي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات الفرعية <code>[[CSS/list-style-type|list-style-type]]</code> و <code>[[CSS/list-style-position|list-style-position]]</code>. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [https://drafts.csswg.org/css-lists-3/#list-style-image CSS Lists and Counters Module Level 3]. | * مسودة [https://drafts.csswg.org/css-lists-3/#list-style-image CSS Lists and Counters Module Level 3]. | ||
المراجعة الحالية بتاريخ 07:45، 12 أغسطس 2018
الخاصية list-style-image في CSS تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة list-style لضبط قيمة هذه الخاصية.
بطاقة الخاصية
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | عناصر القوائم. |
| قابلة للوراثة | نعم |
| قابلة للتحريك | لا |
| القيمة المحسوبة | القيمة none أو رابط URI مطلق للصورة.
|
/* كلمة مفتاحية */
list-style-image: none;
/* <url> قيم */
list-style-image: url('starsolid.gif');
/* القيم العامة */
list-style-image: inherit;
list-style-image: initial;
list-style-image: unset;
ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية display فيها تساوي list-item، وهذا يتضمن العنصر <li> افتراضيًا؛ لكن لاحظ أنَّ قيمة هذه الخاصية قابلة للوراثة، أي يمكن ضبطها على العنصر الأب (الذي يكون عادةً <ol> أو <ul>) لتطبيق تنسيق القوائم على جميع العناصر الموجودة داخله.
أمثلة
مثال عن قائمة غير مرتبة <ul> ضبطنا لها صورة للدلالة على عناصر القائمة:
<ul>
<li>العنصر 1</li>
<li>العنصر 2</li>
</ul>
شيفرة CSS:
ul {
list-style-image: url("list-icon.png")
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 4.0 | 7.0 | 1.0 |
البنية العامة
تقبل الخاصية list-style-image إحدى القيمتين التاليتين.
none
تشير هذه القيمة إلى أنَّنا لا نريد استخدام صورة للإشارة إلى عناصر القائمة، وبالتالي سيعرض المستخدم الرمز المضبوط عبر الخاصية list-style-type.
<url>
رابط للصورة التي ستستخدم للإشارة إلى عناصر القائمة، لاحظ أنَّ المواصفة CSS Lists and Counters Module Level 3 قد سمحت باستخدام أي قيمة من نوع البيانات <image>.
البنية الرسمية
list-style-image: <url> | none;
انظر أيضًا
- صفحة الخاصية
list-styleوهي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات الفرعيةlist-style-typeوlist-style-position.
مصادر ومواصفات
- مسودة CSS Lists and Counters Module Level 3.
- مواصفة CSS Level 2 (Revision 1).