الخاصية list-style

الخاصية list-style في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات list-style-type و list-style-image و list-style-position.

بطاقة الخاصية

القيمة الابتدائية	لكل قيمة مختصرة: list-style-type: disc list-style-position: outside list-style-image: none
تُطبَّق على	عناصر القوائم.
قابلة للوراثة	نعم
قابلة للتحريك	لا
القيمة المحسوبة	لكل قيمة مختصرة: list-style-image: القيمة none أو رابط URI مطلق للصورة. list-style-position: كما حُدِّدَت. list-style-type: كما حُدِّدَت.

/* 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 التي تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة.

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

• مسودة CSS Lists and Counters Module Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.