الفرق بين المراجعتين ل"CSS/list-style-type"

المراجعة الحالية بتاريخ 07:48، 12 أغسطس 2018

الخاصية list-style-type في CSS تُحدِّد شكل الإشارة إلى عناصر القائمة.

بطاقة الخاصية

القيمة الابتدائية	`disc`
تُطبَّق على	عناصر القوائم.
قابلة للوراثة	نعم
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

/* قائمة مختصرة بأنواع الأشكال */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: arabic-indic;

/* <string> */
list-style-type: '-';

/* @counter-style rule */
list-style-type: custom-counter-style;

list-style-type: none;

/* القيم العامة */
list-style-type: inherit;
list-style-type: initial;
list-style-type: unset;

ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية display فيها تساوي list-item، وهذا يتضمن العنصر <li> افتراضيًا؛ لكن لاحظ أنَّ قيمة هذه الخاصية قابلة للوراثة، أي يمكن ضبطها على العنصر الأب (الذي يكون عادةً <ol> أو <ul>) لتطبيق تنسيق القوائم على جميع العناصر الموجودة داخله.

ملاحظة: لون الإشارة يماثل لون العنصر المضبوط عبر الخاصية color.

أمثلة

مثال عن قوائم غير مرتبة <ul> ضبطنا لها مختلف القيم:

<code>list-style-type: disc;</code>
<ul class="disc">
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<code>list-style-type: circle;</code>
<ul class="circle">
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<code>list-style-type: square;</code>
<ul class="square">
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<code>list-style-type: upper-alpha;</code>
<ul class="upper-alpha">
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<code>list-style-type: arabic-indic;</code>
<ul class="arabic-indic">
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

شيفرة CSS:

.disc         { list-style-type: disc; }
.circle       { list-style-type: circle; }
.square       { list-style-type: square; }
.upper-alpha  { list-style-type: upper-alpha; }
.arabic-indic { list-style-type: arabic-indic; }

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	4.0	3.5	1.0

الدعم الأساسي يتضمن القيم none و disc و circle و square و decimal و lower-alpha و upper-alpha و lower-roman و upper-roman، أما بقية القيم فهي إما مدعومة في بعض المتصفحات أو أنَّ دعمها قليل.

البنية العامة

تقبل الخاصية list-style-type القيم التالية.

`none`

تشير هذه القيمة إلى أنَّنا لا نريد استعمال رمز للإشارة إلى عناصر القائمة.

`<string>`

ستُستخدَم السلسلة النصية المُحدَّدة للإشارة إلى عناصر القائمة.

`<custom-ident>`

مُعرِّف يطابق اسم قاعدة ‎@counter-style أو نمط مُعرَّف مسبقًا.

هذه بعض الأنماط المُعرَّفة:

disc: دائرة مليئة • (القيمة الافتراضية).
circle: دائرة مُفرّغة ◦ .
square: مربع ◾ .
decimal: أرقام، ويبدأ العد من 1.
lower-roman: أرقام رومانية بالحالة الصغيرة.
upper-roman: أرقام رومانية بالحالة الكبيرة.
lower-alpha: الأحرف اللاتينية بالحالة الصغيرة.
upper-alpha: الأحرف اللاتينية بالحالة الكبيرة.
arabic-indic: الأرقام العربية المشرقية (١‎ ٢ ٣ ٤).

البنية الرسمية

list-style-image: <counter-style> | <string> | none;

حيث:

<counter-style> = <custom-ident> | symbols()

انظر أيضًا

صفحة الخاصية list-style وهي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات الفرعية list-style-image و list-style-position.

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

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

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>list-style-type</code>}}</noinclude>
-الخاصية <code>list-style-type</code> في CSS تُحدِّد شكل الإشارة إلى عناصر القائمة.<syntaxhighlight lang="css">
+الخاصية <code>list-style-type</code> في CSS تُحدِّد شكل الإشارة إلى عناصر القائمة.
+== بطاقة الخاصية ==
+{| class="wikitable" style="width: 100%;"
+|-
+! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
+|<code>disc</code>
+|-
+! scope="row" |تُطبَّق على
+|عناصر القوائم.
+|-
+! scope="row" |قابلة للوراثة
+|نعم
+|-
+!قابلة للتحريك
+|لا
+|-
+! scope="row" |القيمة المحسوبة
+|كما حُدِّدَت.
+|}
+<syntaxhighlight lang="css">
 /* قائمة مختصرة بأنواع الأشكال */
 list-style-type: disc;
@@ سطر 21: / سطر 42: @@
 list-style-type: unset;
 </syntaxhighlight>
-{| class="wikitable" style="width: 100%;"
-|-
-! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
-|<code>disc</code>
-|-
-! scope="row" |تُطبَّق على
-|عناصر القوائم.
-|-
-! scope="row" |قابلة للوراثة
-|نعم
-|-
-!قابلة للتحريك
-|لا
-|-
-! scope="row" |القيمة المحسوبة
-|كما حُدِّدَت.
-|}
 ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية <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>) لتطبيق تنسيق القوائم على جميع العناصر الموجودة داخله.
@@ سطر 106: / سطر 109: @@
 == البنية العامة ==
 تقبل الخاصية <code>list-style-type</code> القيم التالية.
-=== القيمة <code>none</code> ===
+===  <code>none</code> ===
 تشير هذه القيمة إلى أنَّنا لا نريد استعمال رمز للإشارة إلى عناصر القائمة.
-=== القيمة <code>[[CSS/string|<string>]]</code> ===
+=== <code>[[CSS/string|<string>]]</code> ===
 ستُستخدَم السلسلة النصية المُحدَّدة للإشارة إلى عناصر القائمة.
-=== القيمة <code>[[CSS/custom-ident|<custom-ident>]]</code> ===
+=== <code>[[CSS/custom-ident|<custom-ident>]]</code> ===
 مُعرِّف يطابق اسم قاعدة ‎<code>[[CSS/@counter-style|@counter-style]]</code> أو نمط مُعرَّف مسبقًا.
@@ سطر 134: / سطر 137: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+* صفحة الخاصية <code>[[CSS/list-style|list-style]]</code> وهي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات الفرعية <code>[[CSS/list-style-image|list-style-image]]</code> و <code>[[CSS/list-style-position|list-style-position]]</code>.
 == مصادر ومواصفات ==