CSS/Списки
< CSS
list-style-type
правитьЭто свойство определяет вид маркера в списке и для маркированных списков может принимать значения:
(значение по умолчанию)
Для нумерованных списков:
(значение по умолчанию)
Общее значение для списков, которое отменяет маркеры:
list-style-image
правитьЭто свойство позволяет задать в качестве маркера изображение.
Если вместо адреса изображения указать значение none, то вид маркера будет определяться свойством list-style-type.
Пример:
CSS:
li.odd {
list-style-image: url('green_bullet.gif');
}
li.even {
list-style-image: url('red_bullet.gif');
}
HTML:
<ul>
<li class="odd">Item 1</li>
<li class="even">Item 2</li>
<li class="odd">Item 3</li>
<li class="even">Item 4</li>
</ul>
Внешний вид:
• Item 1
• Item 2
• Item 3
• Item 4
list-style-position
правитьЭто свойство задаёт позицию маркера или изображения относительно элемента списка.
Значения:
- inside — маркер или изображение обтекается текстом;
- outside — маркер или изображение находится вне списка. (значение по умолчанию)
Примеры:
inside
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.
outside (значение по умолчанию)
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.
list-style
правитьСокращённая форма записи этих свойств:
list-style: list-style-type list-style-position list-style-image;