ویژگی list در CSS
لیست ها در HTML، برای نمایش یک فهرست مورد استفاده قرار می گیرند.
در حالت کلی لیست ها، دو نوع هستند:
- لیست منظم (ol)
- لیست نامنظم (ul)
برای تغییر ظاهر لیست ها، از ویژگی های:
- list-style-type: نوع لیست را مشخص می کند.
- list-style-image: استفاده از تصاویر به جای شماره گذاری آیتم ها
- list-style-position: تعیین موقعیت آیتم های لیست
- شبه کلاس marker: استایل دهی به علامت یا شماره لیست
ویژگی list-style-type در CSS
با استفاده از ویژگی list-style-type، می توان:
- نوع شماره گذاری لیست های مرتب (اعداد لاتین یا رومی)
- شکل لیست های نامرتب (مربع یا دایره)
را مشخص کرد.
list-style-type: circle;
list-style-type: square;
list-style-type: upper-roman;
list-style-type: lower-alpha;استفاده از تصویر برای لیست ها در CSS
با استفاده از ویژگی list-style-image، می توانیم به جای استفاده از شماره گذاری فهرست، از آیتم تصویر استفاده کنیم.
list-style-image: url('tick-icon.png');موقعیت آیتم های لیست در CSS
با استفاده از ویژگی list-style-position، می توانیم موقعیت قرارگیری آیتم های لیست را مشخص کنیم.
list-style-position: outside;
list-style-position: inside;ویژگی list-style در CSS
ویژگی list-style، به طور خلاصه، تمام ویژگی های list را مشخص می کند.
list-style: square inside url("tick-icon.png");استایل دهی به علامت یا شماره لیست در CSS
شبه المان ::marker، علامت یا شماره ی پشت محتوای لیست را استایل دهی می کند.
::marker {
color: red;
font-size: 30px;
}نکته: برای اطلاعات بیشتر، به آموزش شبه المان مراجعه کنید.
خلاصه درس
در این درس با لیست در CSS و ویژگی های آن:
- list-style-type
- list-style-image
- list-style-position
- list-style
- شبه کلاس ::marker
آشنا شدیم.
توسعه دهندگان
احسان اسلامی
