С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка, добавить изображение для маркера, а также изменить местоположение маркера. Высоту блока маркера можно задать свойством line-height
.
Оформление списков с помощью CSS-стилей
- Содержание:
- 1. Тип маркера списка
list-style-type
- 2. Изображения для элементов списка
list-style-image
- 3. Местоположение маркера списка
list-style-position
- 4. Краткая форма задания стилей списка
list-style
- 5. Примеры красивого оформления списков
1. Тип маркера списка 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 |
Наследует значение свойства от родительского элемента. |
Синтаксис
ul {list-style-type: none;} ul {list-style-type: square;} ol {list-style-type: none;} ol {list-style-type: lower-alpha;}
Рис. 1. Пример оформления маркированного и нумерованного списков
2. Изображения для элементов списка list-style-image
В качестве маркера элементов списка можно использовать изображения и градиентые заливки. Наследуется.
Значения: | |
url(url) |
Путь к изображению. |
none |
значение по умолчанию, означает отсутствие изображения. Также убирает изображение для элемента из группы элементов с установленным изображением-маркером. |
initial |
Устанавливает значение свойства в значение по умолчанию. |
inherit |
Наследует значение свойства от родительского элемента. |
Синтаксис
ul {list-style-image: url("images/romb.png");} ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);}
Рис. 2. Оформление маркированного списка с помощью изображения
Рис. 3. Оформление маркированного списка с помощью градиента
3. Местоположение маркера списка list-style-position
Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.
Значения: | |
outside |
Значение по умолчанию. Маркер располагается вне блока с текстом. |
inside |
Маркер списка изображается в одном блоке с текстом. Последующие строки текста будут располагаться под значком маркера, т.е. маркер будет обтекаться текстом. |
initial |
Устанавливает значение свойства в значение по умолчанию. |
inherit |
Наследует значение свойства от родительского элемента. |
Синтаксис
ul {list-style-position: inside;} ol {list-style-position: outside;}
Рис. 4. Пример расположения маркера внутри и снаружи блока списка
4. Краткая форма задания стилей списка
Можно объединить все три свойства форматирования списка в одно с помощью list-style
. Значения свойств могут быть расположены в произвольном порядке, а часть значений может быть опущена. Если присутствует одно значение, то другие свойства примут значения браузера по умолчанию.
Синтаксис
ul {list-style: url("images/romb.png") inside;}