الفرق بين المراجعتين لصفحة: «CSS/list-style»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>list-style</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>list-style</code>}}</noinclude> | ||
الخاصية <code>list-style</code> في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات <code>[[CSS/list-style-type|list-style-type]]</code> و <code>[[CSS/list-style-image|list-style-image]]</code> و <code>[[CSS/list-style-position|list-style-position]]</code>. | الخاصية <code>list-style</code> في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات <code>[[CSS/list-style-type|list-style-type]]</code> و <code>[[CSS/list-style-image|list-style-image]]</code> و <code>[[CSS/list-style-position|list-style-position]]</code>. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 47: | سطر 26: | ||
* <code>[[CSS/list-style-type|list-style-type]]</code>: كما حُدِّدَت. | * <code>[[CSS/list-style-type|list-style-type]]</code>: كما حُدِّدَت. | ||
|} | |} | ||
<syntaxhighlight lang="css"> | |||
/* 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; | |||
</syntaxhighlight> | |||
ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية <code>[[CSS/display|display]]</code> فيها تساوي <code>list-item</code>، وهذا يتضمن العنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> افتراضيًا؛ لكن لاحظ أنَّ قيمة هذه الخاصية قابلة للوراثة، أي يمكن ضبطها على العنصر الأب (الذي يكون عادةً <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> أو <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>) لتطبيق تنسيق القوائم على جميع العناصر الموجودة داخله. | ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية <code>[[CSS/display|display]]</code> فيها تساوي <code>list-item</code>، وهذا يتضمن العنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> افتراضيًا؛ لكن لاحظ أنَّ قيمة هذه الخاصية قابلة للوراثة، أي يمكن ضبطها على العنصر الأب (الذي يكون عادةً <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> أو <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>) لتطبيق تنسيق القوائم على جميع العناصر الموجودة داخله. | ||
| سطر 91: | سطر 94: | ||
== البنية العامة == | == البنية العامة == | ||
هذه الخاصية تختصر ثلاثة خاصيات، التي يمكن تحديد قيمها بأي ترتيب، وإذا ضُبِطَت | هذه الخاصية تختصر ثلاثة خاصيات، التي يمكن تحديد قيمها بأي ترتيب، وإذا ضُبِطَت الخاصيتين <code>[[CSS/list-style-type|list-style-type]]</code> و <code>[[CSS/list-style-image|list-style-image]]</code>، فستكون <code>[[CSS/list-style-type|list-style-type]]</code> هي القيمة الاحتياطية في حال لم تكن الصورة متوافرة. | ||
=== | === <code><list-style-type></code> === | ||
راجع صفحة الخاصية <code>[[CSS/list-style-type|list-style-type]]</code>. | راجع صفحة الخاصية <code>[[CSS/list-style-type|list-style-type]]</code>. | ||
=== | === <code><list-style-image></code> === | ||
راجع صفحة الخاصية <code>[[CSS/list-style-image|list-style-image]]</code>. | راجع صفحة الخاصية <code>[[CSS/list-style-image|list-style-image]]</code>. | ||
=== | === <code><list-style-position></code> === | ||
راجع صفحة الخاصية <code>[[CSS/list-style-position|list-style-position]]</code>. | راجع صفحة الخاصية <code>[[CSS/list-style-position|list-style-position]]</code>. | ||
مراجعة 12:02، 27 يوليو 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).