الخاصية list-style-type

الخاصية 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)‎.