Как изменить нумерацию списка
Короткий ответ
Вид номеров меняет свойство list-style-type:
<ol style="list-style-type: upper-roman;">
<li>Introduction</li>
<li>Main part</li>
<li>Conclusion</li>
</ol>Частые значения: decimal (1, 2, 3), decimal-leading-zero (01, 02), lower-alpha (a, b, c), upper-roman (I, II, III).
Начать с другого числа
Атрибут start задаёт первый номер, а reversed включает обратный отсчёт:
<ol start="5">
<li>Fifth step</li>
<li>Sixth step</li>
</ol>
<ol reversed>
<li>Bronze</li>
<li>Silver</li>
<li>Gold</li>
</ol>Отдельному пункту можно задать номер атрибутом value: <li value="10">.
Оформить сами номера
Цвет, жирность и размер номеров меняет псевдоэлемент ::marker:
<style>
li::marker { color: crimson; font-weight: 700; }
</style>
<ol>
<li>Preheat the oven</li>
<li>Mix the flour and eggs</li>
</ol>Частая ошибка
Номера пишут прямо в текст пунктов маркированного списка: «1. Preheat…». При добавлении шага в середину все числа приходится переписывать вручную, а программы чтения с экрана не понимают, что список упорядочен. Для последовательных шагов используйте <ol> — браузер пронумерует сам.
Функции из этого ответа
- <ol> — Нумерованный список: пункты, порядок которых важен.
- list-style — Вид маркеров списка: тип, положение и картинка.
- <li> — Пункт списка `<ul>`, `<ol>` или `<menu>`.
- ::marker — Маркер или номер пункта списка.