الفرق بين المراجعتين لصفحة: «CSS/list-style»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 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>. | ||
| سطر 106: | سطر 109: | ||
</syntaxhighlight>يمكن وضع القيم بأي ترتيبٍ تشاء. | </syntaxhighlight>يمكن وضع القيم بأي ترتيبٍ تشاء. | ||
== انظر أيضًا == | |||
* صفحة الخاصية <code>[[CSS/list-style-image|list-style-image]]</code> التي تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة. | |||
* صفحة الخاصية <code>[[CSS/list-style-position|list-style-position]]</code> التي تُحدِّد مكان إشارة عناصر القائمة. | |||
* صفحة الخاصية <code>[[CSS/list-style-type|list-style-type]]</code> التي تُحدِّد شكل الإشارة إلى عناصر القائمة. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [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}}]] | ||
المراجعة الحالية بتاريخ 07:42، 12 أغسطس 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'>;
يمكن وضع القيم بأي ترتيبٍ تشاء.
انظر أيضًا
- صفحة الخاصية
list-style-imageالتي تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة. - صفحة الخاصية
list-style-positionالتي تُحدِّد مكان إشارة عناصر القائمة. - صفحة الخاصية
list-style-typeالتي تُحدِّد شكل الإشارة إلى عناصر القائمة.
مصادر ومواصفات
- مسودة CSS Lists and Counters Module Level 3.
- مواصفة CSS Level 2 (Revision 1).