در CSS از ویژگی list-style-type برای تعیین نشانگر (marker) یا نماد عناصر لیست ها استفاده میشود.
مواردی مانند دایره، مربع، حروف و اعداد انگلیسی و اعداد رومی از جمله نشانگرهای متداول برای آیتم های لیست های بدون ترتیب و لیست های مرتب (المان های <li>) هستند. البته از این ویژگی میتوان برای هر المان دیگری که دارای مقدار list-item برای ویژگی display هستند نیز استفاده کرد.
نحوه تعیین نشانگر لیست در CSS با کمک ویژگی list-style-type
مثال زیر نمونهای از تعیین نشانه آیتم های یک لیست در CSS با کمک ویژگی list-style-type را نمایش میدهد:
ul {
list-style-type: square;
}در این مثال، مقدار square برای ویژگی list-style-type باعث میشود نشانگر عناصر لیست به صورت یک مربع توپر ظاهر شود.
با توجه به اینکه ویژگی list-style-type قابل ارث بری است میتوان مقدار این ویژگی را برای المان های والد تعیین نمود (معمولا المان های <ul> و <ol> که به عنوان والد عناصر لیست ظاهر میشوند). در مثال فوق، براساس همین موضوع المان های <ul> هدف قرار گرفتهاند. به این ترتیب المان های <li> که فرزند این المان ها هستند نیز همین مقدار را برای list-style-type از والد خود به ارث میبرند.
مقادیر متداول قابل استفاده برای ویژگی list-style-type
در جدول زیر تعدادی از متداولترین مقادیر ویژگی list-style-type را همراه با توضیحات هر مقدار مشاهده میکنید:
| مقدار | توضیحات نشانگر |
|---|---|
| none | با درج این مقدار برای ویژگی list-style-type، هیچ نشانگری نمایش داده نمیشود. |
| disc | دایره توپر. این مقدار، مقدار پیشفرض برای ویژگی list-style-type میباشد. |
| circle | دایره تو خالی |
| square | مربع توپر |
| decimal | عدد (1, 2, 3 و …) |
| lower-alpha lower-latin |
حروف انگلیسی کوچک (a, b, c و …) |
| lower-roman | اعداد رومی کوچک (i, ii, iii و …) |
| upper-alpha upper-latin |
حروف انگلیسی بزرگ (A, B, C و …) |
| upper-roman | اعداد رومی بزرگ (I, II, III و …) |
به طور معمول، برخی از موارد فوق (مانند دایره و مربع) برای لیست های نامرتب و برخی دیگر (شامل حروف و اعداد) برای لیست های مرتب به کار میروند.
البته با استفاده از ویژگی list-style-image میتوان یک تصویر یا رنگ شیبدار را به عنوان نشانگر آیتمهای لیست مشخص نمود.
