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

Нумерованный список похож на маркированный, с тем отличием, что вместо элемента <ul> мы используем <ol>. После этого, вместо маркеров браузер ставит автоматическую нумерацию (рис. 1).

Рис. 1. Вид нумерованного списка

Изменение типа нумерации

В нумерованном списке по умолчанию применяются арабские цифры, но с помощью свойства list-style-type или list-style нумерацию можно заменить на другую. Вот некоторые популярные значения:

• lower-alpha — строчные латинские буквы (a, b, c, d, e,…);
• upper-alpha — заглавные латинские буквы (A, B, C, D, E,…);
• lower-greek — строчные греческие буквы (α, β, γ, δ,…);
• upper-roman — римские цифры в верхнем регистре (I, II, III, IV, V,…).

Само свойство добавляется к селектору ol или li, как показано в примере 1.

Пример 1. Использование list-style-type

Результат данного примера показан на рис. 2.

Рис. 2. Римские цифры в списке

Пользовательская нумерация

Вместо предлагаемых значений свойства list-style-type можно сделать свою произвольную нумерацию, используя для этого стилевое правило @counter-style. Сперва необходимо дать нашей нумерации уникальное имя. К примеру, если мы хотим использовать в качестве нумерации кириллицу, то её можно назвать my-cyrillic. Здесь my- добавлено для того, чтобы мы помнили о том, что это наше пользовательское название.

@counter-style my-cyrillic {
}

Внутри фигурных скобок пишем несколько дескрипторов, разделяя их точкой с запятой:

• system — алгоритм, согласно которому выводится нумерация, для букв нам подходит значение alphabetic;
• symbols — символы или буквы, которые мы хотим видеть в нумерации. Отделяются друг от друга пробелом, можно писать в кавычках, можно без них;
• prefix — символ, который идёт до номера, например, открывающая скобка;
• suffix — символ, который идёт после номера, к примеру, точка или закрывающая скобка.

Вот как будет выглядеть описание нашей нумерации с кириллицей.

@counter-style my-cyrillic {
  system: alphabetic;
  symbols: а б в г д е ж з и к;
  prefix: '(';
  suffix: ') ';
}

prefix и suffix использовать не обязательно, а лишь когда требуется определённым образом оформить нумерацию.

Теперь имя my-cyrillic мы используем в качестве значения свойства list-style.

ol {
  list-style: cyrillic;
}

В примере 2 показан весь код для создания пользовательской нумерации.

Пример 2. Использование @counter-style

Результат данного примера показан на рис. 3.

Рис. 3. Кириллица в качестве нумерации списка

В нашем примере используется всего 10 букв и если этого недостаточно для списка, всегда можно добавить новые буквы к значению symbols. Но даже если букв мало, браузер в любом случае отобразит нумерацию, просто удваивая буквы («аа», «аб», «ав», «аг» и т. д.).

Стиль нумерации

В простых случаях, когда нужно изменить цвет или шрифт нумерации, используется псевдоэлемент ::marker, который добавляется к селектору li (пример 3).

Пример 3. Использование ::marker

Влияние ::marker на стиль списка показано на рис. 4.

Рис. 4. Цвет и шрифт нумерации

Для ::marker можно задать цвет и параметры шрифта, но всё остальное нет. Поэтому для сложного дизайна мы снова должны обратиться к псевдоэлементу ::before и выводить нумерацию с его помощью.

Сперва определяем переменную для нашего счётчика через свойство counter-reset, назовём эту переменную my-item.

ol {
  counter-reset: my-item;
}

Чтобы счётчик увеличивался для каждого пункта списка, к селектору li добавляем свойство counter-increment с нашей переменной.

li {
  counter-increment: my-item;
}

Осталось для li::before отобразить нумерацию через свойство content и функцию counter() следующим образом.

li::before {
  content: counter(my-item);
}

Если мы хотим использовать ранее сделанную нумерацию my-cyrillic, то её надо указать через запятую в функции counter().

li::before {
  content: counter(my-item, my-cyrillic);
}

Окончательный код показан в примере 4.

Пример 4. Использование ::before

Результат данного примера показан на рис. 5.

Рис. 5. Пользовательский стиль нумерации

Итоги

• Нумерованный список создаётся с помощью HTML-элементов <ol> и <li>.
• За изменение вида нумерации отвечает свойство list-style-type или list-style. К примеру, значение upper-roman выводит нумерацию римскими цифрами.
• Стилевое правило @counter-style позволяет создать собственную нумерацию — используя для этого произвольные символы или буквы.
• Псевдоэлемент ::marker применяется, чтобы задать цвет нумерации, шрифт и его размер.

Перейти к заданиям