تاریخ انتشار:۱۰:۰ ۱۳۹۹/۴/۲۸

در HTML دو نوع لیست اصلی وجود دارد :

• لیست های غیر ترتیبی (<ul>) - آیتم های لیست در این نوع لیست ها با بولت ها نشانه گذاری میشوند
• لیست های ترتیبی (<ol>) - آیتم های لیست ها با اعداد و حروف نشانه گذاری میشوند
  

صفات CSS برای لیست ها به ما اجازه میدهد :

• از نشان گذار های مختلفی برای آیتم های لیست ترتیبی خود استفاده کنیم
• از نشان گذار های مختلفی برای آیتم های لیست غیر ترتیبی خود استفاده کنیم
• از تصاویر به عنوان نشان گذار آیتم های لیست استفاده کنیم
• برای لیست خود و آیتم های آن عکس پس زمینه مشخص کنیم

---

استفاده از نشان گذار های مختلف برای آیتم های لیست

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

در نمونه مثال زیر به بعضی از این نشانگذار ها اشاره شده است :

 }  ul.a
 ;list-style-type : circle
 {
 }  ul.b
 ;list-style-type : square
 {
 }  ol.c
 ;list-style-type : upper-roman
 {
 }  ol.d
 ;list-style-type : lower-alpha
 {

بعضی مقادیر در مثال بالا برای لیست های ترتیبی و بعضی برای لیست های غیر ترتیبی هستند.

---

استفاده از تصویر به عنوان نشان گذار

از صفت list-style-image برای مشخص کردن تصویر نشان گذار در لیست استفاده میشود :

 }  ul
 ;('list-style-image :  url('sqpurple.gif
 {

---

مکان نشان گذار ها در لیست

از صفت list-style-position برای مشخص کردن اینکه آیا نشانگذار ها باید در داخل لیست قرار بگیرند و یا خارج از آن، استفاده میشود.

 }  ul
 ;list-style-position : inside
 {

---

حذف تنظیمات پیشفرض

صفت list-style-type:none میتواند برای حذف نشان گذار ها و بولت ها استفاده شود. دقت داشته باشد که لیست همچنان دارای مقدار پیشفرض برای margin و padding است. برای حذف آن مقادیر margin:0 و margin:0 را به <ul> یا <ol> اضافه کنید :

 }  ul
 ;list-style-type : none
 ;margin : 0
 ;padding : 0
 {

---

صفت list-style (صفت کوتاه شده)

صفت list-style یک صفت کوتاه شده است. با استفاده از آن میتوان تمام صفات لیست را در یک اعلان تنظیم کرد :

 }  ul
 ;("list-style : square inside  url("sqpurple.gif
 {

وقتی از صفت کوتاه شده استفاده میکنید، ترتیب مقادیر صفات به شکل زیر است :

• list-style-type
• list-style-position
• list-style-image

اگر هرکدام از صفات بالا در اعلان نباشند، مقدار پیشفرض آنها جایگزین خواهد شد.

---

استایل دهی لیست با رنگ ها 

برای زیبا کردن لیست ها  میتوان آنها را با رنگ های مختلف استایل دهی کرد.

هر چیزی که به تگ های <ol> یا <ul> اضافه میشود، بر روی تمامی لیست اثر میگذارد. در حالی که صفاتی که به تگ های <li> اعمال میشوند فقط بر خود آن آیتم اثر میگذارند.

 }  ol
 ;background : #ff9999
 ;padding : 20px
 {
 }  ul
 ;background : #3399ff
 ;padding : 20px
 {
 }  ol li
 ;background : #ffe5e5
 ;padding : 5px
 ;margin-left : 35px
 {
 }  ul li
 ;background : #cce5ff
 ;margin : 5px
 {

منبع:learnsource