الفرق بين المراجعتين لصفحة: «CSS/list-style-image»

مراجعة 12:05، 27 يوليو 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;

مصادر ومواصفات

مسودة CSS Lists and Counters Module Level 3.
مواصفة ‎CSS Level 2 (Revision 1)‎.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>list-style-image</code>}}</noinclude>
-الخاصية <code>list-style-image</code> في CSS تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة <code>[[CSS/list-style|list-style]]</code> لضبط قيمة هذه الخاصية.<syntaxhighlight lang="css">
+الخاصية <code>list-style-image</code> في CSS تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة <code>[[CSS/list-style|list-style]]</code> لضبط قيمة هذه الخاصية.
-/* كلمة مفتاحية */
-list-style-image: none;
-/* <url> قيم */
-list-style-image: url('starsolid.gif');
-/* القيم العامة */
+== بطاقة الخاصية ==
-list-style-image: inherit;
-list-style-image: initial;
-list-style-image: unset;
-</syntaxhighlight>
 {| 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>) لتطبيق تنسيق القوائم على جميع العناصر الموجودة داخله.
@@ سطر 62: / سطر 65: @@
 == البنية العامة ==
 تقبل الخاصية <code>list-style-image</code> إحدى القيمتين التاليتين.
-=== القيمة <code>none</code> ===
+===  <code>none</code> ===
 تشير هذه القيمة إلى أنَّنا لا نريد استخدام صورة للإشارة إلى عناصر القائمة، وبالتالي سيعرض المستخدم الرمز المضبوط عبر الخاصية <code>[[CSS/list-style-type|list-style-type]]</code>.
-=== القيمة <code>[[CSS/url|<url>]]</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>.