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

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الخاصية list-style-type في CSS تُحدِّد شكل الإشارة إلى عناصر القائمة.
/* قائمة مختصرة بأنواع الأشكال */
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;
القيمة الابتدائية disc
تُطبَّق على عناصر القوائم.
قابلة للوراثة نعم
قابلة للتحريك لا
القيمة المحسوبة كما حُدِّدَت.

ملاحظة: هذه الخاصية ستُطبَّق على عناصر القوائم، أي العناصر التي تكون قيمة الخاصية 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()

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