Списки в 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) &".quot; counter(section) " ";
 counter-increment: section;
}

Застосування такого стилю дає нумерацію голів у вигляді роздiл 1., роздiл 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 - маркер списку розташовується
всередині тексту.