① Тип маркера списка list-style-type

CSS-списки — набор свойств, отвечающих за оформление списков. Использование HTML-списков очень распространено при создании панелей навигации по сайту. Элементы списка представляют набор блочных элементов.

С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка, добавить изображение для маркера, а также изменить местоположение маркера. Высоту блока маркера можно задать свойством line-height.

Оформление списков с помощью CSS-стилей

Содержание:

1. Тип маркера списка list-style-type

2. Изображения для элементов списка list-style-image

3. Местоположение маркера списка и краткая форма задания стилей списка

4. Примеры красивого оформления списков

Тип маркера списка list-style-type

Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков. Наследуется.

list-style-type

Значения:

• disc - Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок.
• armenian - Традиционная армянская нумерация.
• circle - В качестве маркера выступает незакрашенный кружок.
• cjk-ideographic - Идеографическая нумерация.decimal1, 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 - Наследует значение свойства от родительского элемента.

Синтаксис

CSS

ul {list-style-type: none;}
ul {list-style-type: square;}
ol {list-style-type: none;}
ol {list-style-type: lower-alpha;}

Продолжение в следующей статье!