CSS/list-style-image

الخاصية 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)‎.