Списки в CSS. Управление списками CSS

CSS предоставляет возможность управления нумерацией (счётчиками) разделов, списков, перечней иллюстраций ... Для этого используются функции counter() и counters(). Счётчики объявляются с помощью свойства content, потом могут обнуляться (свойство counter-reset) и прибавляться (свойство counter-increment). Например, для автоматической нумерации заголовков первого и второго уровней (h1 - главы и h2 - разделы) необходимо использовать стиль:

h1:before	{
	content: "Глава " counter(chapter) ". ";
	counter-increment: chapter;
	counter-reset: section;
}
h2:before	{
	content: counter(chapter) "." counter(section) " ";
	counter-increment: section;
}

Применение такого стиля даёт нумерацию глав в виде Глава 1., Глава 2., а для разделов в виде 1.1, 1.2 и т.д.

Для символов нумерации нумерованных списков и маркеров ненумерованных списков есть возможность выбрать стиль свойством list-style-type.

Расположение маркера по отношению к тексту элемента списка регулируется с помощью свойств list-style-position и marker-offset.

Таблица 2.7. Свойства управления списком
Свойство	Описание	Умолчание	Применение
`content`	Генерация содержимого	Пустая строка	К псевдоэлементам `before` и `after`
`counter-reset`	Сброс счётчика	`none`	Ко всем элементам
`counter-increment`	Приращение счётчика	`none`	Ко всем элементам
`list-style-type`	Стиль нумерации/маркирования	`disk`	К элементам с `display:list-item`
`list-style-image`	Символ маркирования	`none`	К элементам с `display:list-item`
`list-style-position`	Положение маркера	`outside`	К элементам с `display:list-item`
`marker-offset`	Смещение маркера	`auto`	К элементам с `display:marker`

Генерация содержимого

URI - адрес внешнего ресурса, используемого для генерации,
couter()|counters() - определение счётчиков,
attr(X) - функция, возвращающая значение атрибута Х элемента, выбранного селектором,
open-quote - открывающая кавычка, замещается соответствующими символами из свойства quotes,
close-quote - закрывающая кавычка, замещается соответствующими символами из свойства quotes,
no-open-quote - пустая строка, увеличивает уровень вложения кавычек на 1,
no-close-quote - пустая строка, уменьшает уровень вложения кавычек на 1.

Сброс счётчика

counter-reset:имя_счётчика Vv|none

Vv - начальное зачение счётчика.

Приращение счётчика

counter-increment:имя_счётчика Vv|none

Vv - величина приращения счётчика.

Стиль нумерации/маркирования

disk - диск в качестве маркера для маркированных списков,
circle - круг,
square - квадрат,
decimal - десятичная нумерация 1 2 3,
decimal-leading-zero - десятичная нумерация с ведущим нулём 01 02 03,
lower-roman - малые римские i ii iii iv,
upper-roman - большие римские I II III IV,
lower-greek - малые греческие буквы,
lower-latin - малые латинские буквы a b c,
upper-latin - большие латинские буквы A B C.

Положение маркера

list-style-position:inside|outside

<ul>
    <li>
        <code>outside</code> - маркер списка располагается<br> вне текста,
    </li>
    <li style="list-style-position:inside">
        <code>inside</code> - маркер списка располагается<br> внутри текста.
    </li>
</ul>

outside - маркер списка располагается
вне текста,
inside - маркер списка располагается
внутри текста.