ویژگی list-style-type ظاهر و نوع علامت هایی که در پشت آیتم های یک لیست قرار می گیرند را مشخص می کند.
این ویژگی همچنین می تواند بر روی عناصری که display آنها از نوع list-item است کنترل داشته باشد.
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;
}
- آیتم شماره یک
- آیتم شماره دو
- آیتم شماره سه
lower-roman
آیتم ها با اعداد رومی کوچک (i, ii, iii, iv, v) نشانه گذاری می شوند.
upper-roman
آیتم ها با اعداد رومی بزرگ (I, II, III, IV, V) نمایش داده می شوند.
lower-greek
آیتم های لیست با حروف یونانی کلاسیک نمایش داده می شوند.
ol {
list-style-type: lower-greek;
}
- آیتم شماره یک
- آیتم شماره دو
- آیتم شماره سه
lower-latin
آیتم ها با حروف کوچک اسکی (a, b, c,..) نمایش داده می شوند.
lower-alpha
برابر با lower-latin می باشد.
upper-latin
آیتم ها با حروف بزرگ اسکی (A, B, C,..) نمایش داده می شوند.
upper-alpha
برابر با upper-latin می باشد.
armenian
آیتم ها با اعداد زبان ارمنی نمایش داده می شود.
georgian
آیتم ها با اعداد زبان گرجی نمایش داده می شوند.
none
با استفاده از این مقدار نشانه گر حذف می شود.
inherit
مقدار inherit باعث می شود تا ظاهر نشانه گر از لیست پدر به ارث گرفته شود.
مثال
دموی زیر را بررسی کنید:
پشتیبانی مرورگر ها
این ویژگی برای زبان های دیگر نیز مقدار دارد اما فعلا مرورگرهای مختلف پشتیبانی جالبی ندارند. مثلا برای استفاده از اعداد فارسی می توان نوشت:
list-style-type: persian;
