عرض مصدر CSS/list-style-image

<noinclude>{{DISPLAYTITLE:الخاصية <code>list-style-image</code>}}</noinclude>
الخاصية <code>list-style-image</code> في CSS تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة <code>[[CSS/list-style|list-style]]</code> لضبط قيمة هذه الخاصية.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>none</code>
|-
! scope="row" |تُطبَّق على
|عناصر القوائم.
|-
! scope="row" |قابلة للوراثة
|نعم
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|القيمة <code>none</code> أو رابط URI مطلق للصورة.

|}
<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>[[HTML/ul|<nowiki><ul></nowiki>]]</code> ضبطنا لها صورة للدلالة على عناصر القائمة:<syntaxhighlight lang="html">
<ul>
  <li>العنصر 1</li>
  <li>العنصر 2</li>
</ul>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
ul {
  list-style-image: url("list-icon.png")
}
</syntaxhighlight>
== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.0
|4.0
|7.0
|1.0
|}

== البنية العامة ==
تقبل الخاصية <code>list-style-image</code> إحدى القيمتين التاليتين.
===  <code>none</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>.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
list-style-image: <url> | none;

</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].
* مواصفة ‎[http://www.w3.org/TR/CSS2/generate.html#propdef-list-style-image CSS Level 2 (Revision 1)‎]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS List|{{SUBPAGENAME}}]]