الفرق بين المراجعتين لصفحة: «CSS/list-style»
لا ملخص تعديل |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
| سطر 110: | سطر 110: | ||
* مسودة [https://drafts.csswg.org/css-lists-3/#list-style-property CSS Lists and Counters Module Level 3]. | * مسودة [https://drafts.csswg.org/css-lists-3/#list-style-property CSS Lists and Counters Module Level 3]. | ||
* مواصفة [http://www.w3.org/TR/CSS2/generate.html#propdef-list-style CSS Level 2 (Revision 1)]. | * مواصفة [http://www.w3.org/TR/CSS2/generate.html#propdef-list-style CSS Level 2 (Revision 1)]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS List]] | [[تصنيف:CSS List|{{SUBPAGENAME}}]] | ||
مراجعة 15:33، 28 يناير 2018
الخاصية 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).