الفرق بين المراجعتين ل"CSS/list-style-position"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| (مراجعة متوسطة واحدة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>list-style-position</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>list-style-position</code>}}</noinclude> | ||
| − | الخاصية <code>list-style-position</code> في CSS تُحدِّد مكان إشارة عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة <code>[[CSS/list-style|list-style]]</code>. | + | الخاصية <code>list-style-position</code> في CSS تُحدِّد مكان إشارة عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة <code>[[CSS/list-style|list-style]]</code>. |
| − | |||
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 28: | سطر 21: | ||
|} | |} | ||
| + | <syntaxhighlight lang="css"> | ||
| + | /* كلمات مفتاحية */ | ||
| + | list-style-position: inside; | ||
| + | list-style-position: outside; | ||
| + | |||
| + | /* القيم العامة */ | ||
| + | list-style-position: inherit; | ||
| + | list-style-position: initial; | ||
| + | list-style-position: 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>) لتطبيق تنسيق القوائم على جميع العناصر الموجودة داخله. | ||
| سطر 69: | سطر 72: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>list-style-position</code> إحدى القيمتين التاليتين. | تقبل الخاصية <code>list-style-position</code> إحدى القيمتين التاليتين. | ||
| − | === | + | === <code>outside</code> === |
ستظهر الإشارة خارج صندوق المحتوى. | ستظهر الإشارة خارج صندوق المحتوى. | ||
| − | === | + | === <code>inside</code> === |
ستظهر الإشارة داخل صندوق المحتوى. | ستظهر الإشارة داخل صندوق المحتوى. | ||
| سطر 80: | سطر 83: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == انظر أيضًا == | ||
| + | * صفحة الخاصية <code>[[CSS/list-style|list-style]]</code> وهي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات الفرعية <code>[[CSS/list-style-type|list-style-type]]</code> و <code>[[CSS/list-style-image|list-style-image]]</code>. | ||
| + | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [https://drafts.csswg.org/css-lists-3/#list-style-position-property CSS Lists and Counters Module Level 3]. | * مسودة [https://drafts.csswg.org/css-lists-3/#list-style-position-property CSS Lists and Counters Module Level 3]. | ||
المراجعة الحالية بتاريخ 07:47، 12 أغسطس 2018
الخاصية list-style-position في CSS تُحدِّد مكان إشارة عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة list-style.
بطاقة الخاصية
| القيمة الابتدائية | outside
|
|---|---|
| تُطبَّق على | عناصر القوائم. |
| قابلة للوراثة | نعم |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
/* كلمات مفتاحية */
list-style-position: inside;
list-style-position: outside;
/* القيم العامة */
list-style-position: inherit;
list-style-position: initial;
list-style-position: unset;
ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية display فيها تساوي list-item، وهذا يتضمن العنصر <li> افتراضيًا؛ لكن لاحظ أنَّ قيمة هذه الخاصية قابلة للوراثة، أي يمكن ضبطها على العنصر الأب (الذي يكون عادةً <ol> أو <ul>) لتطبيق تنسيق القوائم على جميع العناصر الموجودة داخله.
أمثلة
مثال عن قائمتين غير مرتبتين غير مرتبة <ul> ضبطنا لها الخاصية list-style-position مع القيمتين inside و outside:
<code>list-style-position: inside;</code>
<ul class="inside">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<code>list-style-position: outside;</code>
<ul class="outside">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
شيفرة CSS:
.inside { list-style-position: inside; }
.outside { list-style-position: outside; }
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 4.0 | 3.5 | 1.0 |
البنية العامة
تقبل الخاصية list-style-position إحدى القيمتين التاليتين.
outside
ستظهر الإشارة خارج صندوق المحتوى.
inside
ستظهر الإشارة داخل صندوق المحتوى.
البنية الرسمية
list-style-position: inside | outside;
انظر أيضًا
- صفحة الخاصية
list-styleوهي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات الفرعيةlist-style-typeوlist-style-image.
مصادر ومواصفات
- مسودة CSS Lists and Counters Module Level 3.
- مواصفة CSS Level 2 (Revision 1).