В этой записи мы с вами рассмотрим стили которые применяются для списков. С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка, добавить изображение для маркера, а также изменить местоположение маркера.
О HTML списках можно прочитать здесь — http://prog-time.ru/uroki-html-css-spiski/
list-style-type
— указывает тип маркера
disc | Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок. |
armenian | Традиционная армянская нумерация. |
circle | В качестве маркера выступает незакрашенный кружок. |
cjk-ideographic | Идеографическая нумерация. |
decimal | 1, 2, 3, 4, 5, … |
decimal-leading-zero | 01, 02, 03, 04, 05, … |
georgian | Традиционная грузинская нумерация. |
hebrew | Традиционная еврейская нумерация. |
hiragana | Японская нумерация: a, i, u, e, o, … |
hiragana-iroha | Японская нумерация: i, ro, ha, ni, ho, … |
katakana | Японская нумерация: A, I, U, E, O, … |
katakana-iroha | Японская нумерация: I, RO, HA, NI, HO, … |
lower-alpha | a, b, c, d, e, … |
lower-greek | Строчные символы греческого алфавита. |
lower-latin | a, b, c, d, e, … |
lower-roman | i, ii, iii, iv, v, … |
none | Маркер отсутствует. |
square | В качестве маркера выступает закрашенный или незакрашенный квадрат. |
upper-alpha | A, B, C, D, E, … |
upper-latin | A, B, C, D, E, … |
upper-roman | I, II, III, IV, V, … |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Часто списки используют для создания меню. Но для создания меню отключают маркировку с помощью свойства list-style-type
и значения none
ol {
list-style-type: none;//убирает маркеры
}
- Первый элемент
- Второй элемент
- Третий элемент
list-style-image
— задает изображения для элементов списка
url(url) | Путь к изображению. |
none | значение по умолчанию, означает отсутствие изображения. Также убирает изображение для элемента из группы элементов с установленным изображением-маркером. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
- Первый элемент
- Второй элемент
- Третий элемент
Информация была взята с сайта — https://html5book.ru