الخاصية list-style-image

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الخاصية list-style-image في CSS تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة list-style لضبط قيمة هذه الخاصية.
/* كلمة مفتاحية */
list-style-image: none;

/* <url> قيم */
list-style-image: url('starsolid.gif');

/* القيم العامة */
list-style-image: inherit;
list-style-image: initial;
list-style-image: unset;
القيمة الابتدائية none
تُطبَّق على عناصر القوائم.
قابلة للوراثة نعم
قابلة للتحريك لا
القيمة المحسوبة القيمة none أو رابط URI مطلق للصورة.

ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية 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;

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