Подробно о свойстве list-style
За добавление маркера, его расположение и внешний вид в css отвечают свойства:
- - list-style-image (я не использую это свойство - ниже обьясню, почему);
- - list-style-type;
- - list-style-position.
Существует так же универсальное свойство list-style, которое позволяет одновременно задать все три, два, или один параметр, перечисленные выше для маркеров пунктов списка.
Свойство list-style-type
Имеет следующие допустимые значения:
- disc - маркер пункта в списке будет отображаться в виде жирной точки;
ul {
list-style-type:disc;
}
- Пример использования свойства list-style-type с параметром disc
- circle - маркер пункта в списке будет отображаться в виде круга;
ul {
list-style-type:circle;
}
- Пример использования свойства list-style-type с параметром circle
- square - маркер пункта в списке будет отображаться в виде черного квадратика;
ul {
list-style-type:square;
}
- Пример использования свойства list-style-type с параметром square
- decimal - маркер пункта в списке будет отображаться в виде арабских цифр начиная с 1;
ul {
list-style-type:decimal;
}
- Пример использования свойства list-style-type с параметром decimal - первый пункт списка
- Пример использования свойства list-style-type с параметром decimal - второй пункт списка
- decimal-leading-zero - маркер пункта в списке будет отображаться в виде арабских цифр начиная с 01, 02... 98,99 (не поддерживается в ИЕ 7);
ul {
list-style-type:decimal-leading-zero;
}
- Пример использования свойства list-style-type с параметром decimal-leading-zero - первый пункт
- Пример использования свойства list-style-type с параметром decimal-leading-zero - второй пункт
- lower-roman - маркер пункта в списке будет отображаться в виде прописных букв римского алфавита (i, ii, iii, iv, v);
ul {
list-style-type:lower-roman;
}
- Пример использования свойства list-style-type с параметром lower-roman - первый пункт
- Пример использования свойства list-style-type с параметром lower-roman - второй пункт
- Пример использования свойства list-style-type с параметром lower-roman - третий пункт
- Пример использования свойства list-style-type с параметром lower-roman - четвертый пункт
- upper-roman - маркер пункта в списке будет отображаться в виде римских цифр (I, II, III, IV, V);
ul {
list-style-type:upper-roman;
}
- Пример использования свойства list-style-type с параметром upper-roman - первый пункт
- Пример использования свойства list-style-type с параметром upper-roman - второй пункт
- Пример использования свойства list-style-type с параметром upper-roman - третий пункт
- Пример использования свойства list-style-type с параметром upper-roman - четвертый пункт
- lower-greek - маркер пункта в списке будет отображаться в виде прописных букв греческого алфавита (не поддерживается в ИЕ 7);
ul {
list-style-type:lower-greek;
}
- Пример использования свойства list-style-type с параметром lower-greek
- Пример использования свойства list-style-type с параметром lower-greek
- lower-latin - маркер пункта в списке будет отображаться в виде прописных букв латинского алфавита (a, b, c) (не поддерживается в ИЕ 7);
ul {
list-style-type:lower-latin;
}
- Пример использования свойства list-style-type с параметром lower-latin
- Пример использования свойства list-style-type с параметром lower-latin
- upper-latin - маркер пункта в списке будет отображаться в виде заглавных букв латинского алфавита (A, B, C) (не поддерживается в ИЕ 7);
ul {
list-style-type:upper-latin;
}
- Пример использования свойства list-style-type с параметром upper-latin
- Пример использования свойства list-style-type с параметром upper-latin
- none - маркер пункта в списке не будет отображаться.
ul {
list-style-type:none;
}
- Пример использования свойства list-style-type с параметром none
Свойство наследуется и по умолчанию имеет значение disc.
Свойство list-style-position
Отвечает за расположение маркера в списке. Имеет два допустимых значения:
- inside - маркер будет находиться внутри блока с элементом списка, к которому он относится;
ul {
list-style-position:inside;
}
- Пример использования свойства list-style-position с параметром inside - маркер расположен внутри блока с элементом списка, к которому он относится.
- outside - маркер будет находиться снаружи блока с элементом списка, к которому он относится.
ul {
list-style-position:outside;
}
- Пример использования свойства list-style-position с параметром outside - маркер расположен снаружи блока с элементом списка, к которому он относится.
Свойство list-style-image
Устанавливает в качестве маркера изображение, которое будет использоваться для маркировки пунктов списка:
ul {
list-style-image:url('/images/ball.gif');
}
- Пример использования свойства list-style-image - маркер списка выводится в виде картинки.
Из-за возникающих сложностей с позиционированием изображения используется не часто. Лично я предпочитаю использовать свойство background-image, если требуется маркер-картинка.
Свойство list-style
Как уже упоминалось ранее в этой статье, это свойство является универсальным и позволяет установить одно, два, или три значения для маркировки пунктов списка.
Следующая запись отобразит маркер в виде черной жирной точки снаружи блока с элементом списка:
ul {
list-style:disc outside;
}
- Пример использования свойства list-style с параметрами disc и outside - маркер расположен снаружи блока с элементом списка, к которому он относится.
Запись такого вида отобразит маркер в виде окружности внутри блока с элементом списка:
ul {
list-style:circle inside;
}
- Пример использования свойства list-style с параметрами circle и inside - маркер расположен внутри блока с элементом списка, к которому он относится.
