Сегодня рассмотрим списки. Будем использовать встроенный в CSS функционал для работы со списками: counter и counters. А также зададим сложную нумерацию для элементов списка.
Допустим, у нас есть html документ такого содержания:
<div class="list"> <span>Глава первая</span> <span>Глава вторая</span> <span>Глава третья</span> </div>
Рассмотрим основные правила построения списков (элемент list) в CSS. По сути, списочные структуры можно создавать из чего угодно. Теперь в файле со стилями опишем стиль для list:
- Если для элементов «span» указать представление list-item, то они превратятся в элементы списка:
.list span{ display:list-item}
Тут же элементы становятся блочными, и к ним пририсовывается маркер. Только маркер невидим.
- .list {padding-left:40px;} — делаем маркеры видимыми, т.е. освобождаем под них пространство.
- .list{direction:rtl;} — аналог правила dir, направление справа-налево.
- .list{unicode-bidi:bidi-override;} — переписать направление текста в соответствии с предыдущим правилом direction, т.е. текст встанет справа-налево. Это правило может быть полезно для языков с написанием справа-налево.
- .list{list-style-type:decimal} — разные типы нумерации списка, например, цифры.
Сложная нумерация списков
Иногда нужно нумеровать элементы списка как: 1.2.4, 1.1.1.127 и т.п. Для этого используют сложную нумерацию. Рассмотрим на примерах.
Есть html документ такого вида:
<div id="ul"> <div>Глава <span>Раздел</span> <span>Раздел</span> </div> <div>Глава <span>Раздел</span> <span>Раздел</span> <span>Раздел</span> </div> </div>
Тогда в файле со стилями пишем следующий код:
- #ul{counter-reset:d1;} — сбрасываем счетчие d1 в нулевое состояние.
- #ul div:before{content:counter (d1, upper-roman) ‘.’; counter-increment:d1; } — здесь используем псевдоэлемент before. Записываем какой-то контент с помощью функционала counter: указываем счетчик d1, потом тип нумерации (по умолчанию стоит decimal), потом к строке прибавляем точку (в итоге выходит цифра с точкой). В конце увеличиваем счетчик (по умолчанию на 1, можно поставить другое значение).
- #ul div:before{counter-reset:d2;} — сбрасываем счетчик d2, который будем использовать в элементах «span».
- #ul span:before{content:counter (d1, upper-roman) ‘.’ counter (d2, lower-alpha) ‘. ‘; counter-increment:d2; — здесь создаем сборный счетчик, как в предыдущих правилах, т.е. по сути здесь два счетчика.
Пример другого типа нумерации с использованием нумерованных списков «ol»:
ol{ counter-reset:w; list-style:none;} ol li:before{ content:counters(w, '.', decomal) '. '; counter-increment:1;}
Функционал counters позволяет все счетчики записывать друг за другом, причем разделитель между ними — это точка (.) Далее увеличиваем счетчик на 1.
Вот два функционала — counter и counters, которые позволяют делать нумерацию абсолютно любого уровня сложности. Теперь не надо вручную проставлять все эти значения.