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