لیست های HTML و صفات لیست در CSS

در 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 استفاده می شود.

مثال :

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

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

برای نمایش بهتر و جذابتر می توان لیست ها را رنگ بندی کرد. هرچیزی که به تگ های <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;
}