الخاصية 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'>;

يمكن وضع القيم بأي ترتيبٍ تشاء.

انظر أيضًا

  • صفحة الخاصية list-style-image التي تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة.
  • صفحة الخاصية list-style-position التي تُحدِّد مكان إشارة عناصر القائمة. 
  • صفحة الخاصية list-style-type التي تُحدِّد شكل الإشارة إلى عناصر القائمة.

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

مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/list-style&oldid=14840»