Получить профессию в Skypro
Стилизация нумерованных списков в HTML и CSS: 1.1, 1.2
Быстрый ответ
Для того чтобы в упорядоченных списках числа отображались как 1.1, 1.2, используйте CSS-счетчики совместно с вложенными элементами <ol>. Свойство counter-reset устанавливается на верхнем уровне <ol> для ведения подсчета, counter-increment применяется к тегам <li>, а для отображения используется псевдо-элемент li::before, который показывает значения счетчика с помощью свойства content.
ol {
counter-reset: subsection; /* Обнуление счетчика для каждого нового подраздела */
list-style-type: none; /* Отключение стандартной нумерации, так как мы будем формировать номера сами */
}
li {
display: block; /* Каждый элемент списка представляется как отдельный блок */
}
li::before {
counter-increment: subsection; /* Увеличение значения счетчика для каждого элемента списка */
content: "1." counter(subsection) ". "; /* Форматирование вывода номера элемента */
}Вот так будет выглядеть пример HTML-кода:
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>А так результат:
1.1. Подпункт 1.2. Подпункт 1.3. Подпункт
Теперь давайте добавим немного интерактивности и покажем, как организовать многоуровневую нумерацию с использованием вложенных счетчиков.
Номерация разделов и подразделов!
Вы сможете присваивать номера подпунктам, согласно их родительским разделам (1.1.1, 2.2.1), воспользовавшись функцией counters():
ol {
list-style-type: none;
counter-reset: section; /* Сброс счетчика для основных разделов */
}
li {
counter-increment: section;
display: block; /* Блочное отображение элементов для подсчета */
}
li::before {
content: counters(section, ".") " "; /* Отображение иерархической нумерации */
position: absolute; /* Абсолютное позиционирование элементов */
margin-left: -20px; /* Выравнивание отступа слева */
}
li ol {
counter-reset: subsection; /* Обнуление счетчика для подразделов */
}Пример HTML-кода выглядит следующим образом:
<ol>
<li>Раздел 1
<ol>
<li>Подраздел 1</li>
<li>Подраздел 2</li>
</ol>
</li>
<li>Раздел 2</li>
</ol>А результат будет примерно таким:
- Раздел 1 1.1 Подраздел 1 1.2 Подраздел 2
- Раздел 2
Созданием единство с помощью таблиц
Для обеспечения однородного выравнивания и отступов вы можете отобразить списки в формате таблиц:
ol {
display: table; /* Включаем форматирование в виде таблицы */
counter-reset: section; /* Вновь сбрасываем счетчик */
list-style-type: none; /* Отключаем стандартные маркеры списка */
}
li {
display: table-row; /* Каждый элемент списка представляем как строку таблицы */
counter-increment: section;
}
li::before {
display: table-cell; /* Создание псевдо-элемента как ячейки таблицы */
text-align: right; /* Выравнивание текста по правому краю */
padding-right: 10px; /* Отступ от правого края */
content: counters(section, ".") ". "; /* Вывод номера, учитывающего иерархию */
}Это гарантирует аккуратное выравнивание номеров и улучшает читаемость списка.
Ваш контрольный список: Кроссбраузерность
Пробегитесь по разным браузерам и проверьте, как работают CSS-счетчики. При возникновении незначительных различий стоит их исправить.
Визуализация
Представьте себе матрешку (🪆), где каждый размер символизирует уровень подпункта:
| 🪆 | 1. | | 🪆 | 1.1 |
| | | -> | 🪆 | 1.2 |
| 🪆 | 2. | | 🪆 | 1.3 |
| | | | 🪆 | 2.1 |
| 🪆 | 3. | | | ... |CSS позволяет нам стилизовать это графически:
ol { counter-reset: section; } /* Начинаем подсчет заново с каждым новым списком */
li::before { content: counters(section, ".") " "; } /* Каждый элемент списка получает уникальный номер, соответствующий его уровню в иерархии */Таким образом, у каждого элемента списка есть уникальный номер, соответствующий его уровню вложенности.
Оставляем отпечаток: Стилизация номеров
Придайте номерам изящный вид с помощью различного позиционирования и отступов, чтобы они гармонично подчеркивали общий стиль вашего сайта.
li::before {
position: relative;
left: -10px; /* Смещение влево */
color: #333; /* Темно-серый цвет текста */
font-weight: bold; /* Жирность шрифта номеров */
}С помощью этих методов ваш стильный и гармоничный список станет неотъемлемой составляющей общего дизайна веб-страницы.
Поделиться – значит заботиться: Живые примеры
Не стесняйтесь делиться своими решениями на платформах типа JSFiddle или Gist, чтобы получить обратную связь от сообщества.
Полезные материалы
- ::marker – CSS: Каскадные таблицы стилей | MDN — подробное описание способов стилизации маркеров списков в CSS.
- Стилизация списков CSS — основы стилизации списков на примерах от W3Schools.
- CSS Lists and Counters Module Level 3 — официальная спецификация W3C по использованию списков и счетчиков в CSS.
- Укрощение продвинутых CSS селекторов — Smashing Magazine — интересная статья о сложных CSS селекторах.