list-style-type

ویژگی list-style-type ظاهر و نوع علامت هایی که در پشت آیتم های یک لیست قرار می گیرند را مشخص می کند.

این ویژگی همچنین می تواند بر روی عناصری که display آنها از نوع list-item است کنترل داشته باشد.

list-style-type زمانی بر روی آیتم های یک لیست اعمال می شود که مقدار ویژگی list-style-image برابر با none باشد یا تصویر قابل نمایش نباشد.

ظاهر علامت آیتم های یک لیست می تواند یک شکل ساده، شماره و یا حروف الفبا باشد. رنگ این علامت یکسان با رنگ متن لیست که توسط ویژگی color تعیین شده است می باشد.

 

مقادیر ویژگی list-style-type

 

list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit 

 

 

disc

disc مقدار اولیه و پیشفرض این ویژگی می باشد که علامت را به شکل یک دایره توپر در میاورد.

 

circle

علامت به شکل یک دایره توخالی رسم خواهد شد.

 

ol {
  list-style-type: circle;
}

 

 

square

علامت لیست بصورت مربع خواهد بود.

 

decimal

آیتم های لیست با عدد نمایش داده می شوند. که این اعداد از 1 شروع می شوند.

 

decimal-leading-zero

آیتم های لیست با عدد نمایش داده می شود. که این اعداد همیشه با یک صفر در اول آنها همراه خواهد بود مثلا آیتم شماره یک با عدد 01 نمایش داده می شود.

 

ol {
  list-style-type: decimal-leading-zero;
}

 

1. آیتم شماره یک
2. آیتم شماره دو
3. آیتم شماره سه

 

lower-roman

آیتم ها با اعداد رومی کوچک (i, ii, iii, iv, v) نشانه گذاری می شوند.

 

upper-roman

آیتم ها با اعداد رومی بزرگ (I, II, III, IV, V) نمایش داده می شوند.

 

lower-greek

آیتم های لیست با حروف یونانی کلاسیک نمایش داده می شوند.

 

ol {
  list-style-type: lower-greek;
}

 

1. آیتم شماره یک
2. آیتم شماره دو
3. آیتم شماره سه

 

lower-latin

آیتم ها با حروف کوچک اسکی (a, b, c,..) نمایش داده می شوند.

 

lower-alpha

برابر با lower-latin می باشد.

 

upper-latin

آیتم ها با حروف بزرگ اسکی (A, B, C,..) نمایش داده می شوند.

 

upper-alpha

برابر با upper-latin می باشد.

 

armenian

آیتم ها با اعداد زبان ارمنی نمایش داده می شود.

 

georgian

آیتم ها با اعداد زبان گرجی نمایش داده می شوند.

 

none

با استفاده از این مقدار نشانه گر حذف می شود.

 

inherit

مقدار inherit باعث می شود تا ظاهر نشانه گر از لیست پدر به ارث گرفته شود.

 

مثال

دموی زیر را بررسی کنید:

 

See the Pen list-style-type by Mojtaba Seyedi (@seyedi) on CodePen.

 

 

پشتیبانی مرورگر ها

این ویژگی برای زبان های دیگر نیز مقدار دارد اما فعلا مرورگرهای مختلف پشتیبانی جالبی ندارند. مثلا برای استفاده از اعداد فارسی می توان نوشت:

 

list-style-type: persian;