الفرق بين المراجعتين لصفحة: «CSS/list-style-position»

مراجعة 12:06، 27 يوليو 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;

مصادر ومواصفات

مسودة CSS Lists and Counters Module Level 3.
مواصفة ‎CSS Level 2 (Revision 1)‎.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>list-style-position</code>}}</noinclude>
-الخاصية <code>list-style-position</code> في CSS تُحدِّد مكان إشارة عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة <code>[[CSS/list-style|list-style]]</code>.<syntaxhighlight lang="css">
+الخاصية <code>list-style-position</code> في CSS تُحدِّد مكان إشارة عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة <code>[[CSS/list-style|list-style]]</code>.
-/* كلمات مفتاحية */
-list-style-position: inside;
-list-style-position: outside;
-/* القيم العامة */
+== بطاقة الخاصية ==
-list-style-position: inherit;
-list-style-position: initial;
-list-style-position: unset;
-</syntaxhighlight>
 {| 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>) لتطبيق تنسيق القوائم على جميع العناصر الموجودة داخله.
@@ سطر 69: / سطر 72: @@
 == البنية العامة ==
 تقبل الخاصية <code>list-style-position</code> إحدى القيمتين التاليتين.
-=== القيمة <code>outside</code> ===
+===  <code>outside</code> ===
 ستظهر الإشارة خارج صندوق المحتوى.
-=== القيمة <code>inside</code> ===
+===  <code>inside</code> ===
 ستظهر الإشارة داخل صندوق المحتوى.