الخاصية list-style

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

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

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

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

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

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