الخاصية list-style

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الخاصية list-style في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات list-style-type و list-style-image و list-style-position.
/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* كلمة محجوزة */
list-style: none;

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

ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية display فيها تساوي list-item، وهذا يتضمن العنصر <li> افتراضيًا؛ لكن لاحظ أنَّ قيمة هذه الخاصية قابلة للوراثة، أي يمكن ضبطها على العنصر الأب (الذي يكون عادةً <ol> أو <ul>) لتطبيق تنسيق القوائم على جميع العناصر الموجودة داخله.

أمثلة

مثال عن قائمتين غير مرتبتين <ul> الأولى جعلنا شكلها دوائر مفرغة list-style-type، والثانية جعلنا شكلها مربعات list-style-type وفي الطرف الداخلي من القائمة list-style-position:
القائمة 1
<ul class="one">
  <li>العنصر 1</li>
  <li>العنصر 2</li>
  <li>العنصر 3</li>
</ul>
القائمة 2
<ul class="two">
  <li>العنصر أ</li>
  <li>العنصر ب</li>
  <li>العنصر جـ</li>
</ul>
شيفرة CSS:
.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 1.0 1.0 4.0 7.0 1.0

البنية العامة

هذه الخاصية تختصر ثلاثة خاصيات، التي يمكن تحديد قيمها بأي ترتيب، وإذا ضُبِطَت قيمة الخاصيتين list-style-type و list-style-image، فستكون قيمة list-style-type هي القيمة الاحتياطية في حال لم تكن الصورة متوافرة.

القيمة <list-style-type>

راجع صفحة الخاصية list-style-type.

القيمة <list-style-image>

راجع صفحة الخاصية list-style-image.

القيمة <list-style-position>

راجع صفحة الخاصية list-style-position.

البنية الرسمية

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>;
يمكن وضع القيم بأي ترتيبٍ تشاء.

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