Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

Как изменить нумерацию списка

Короткий ответ

Вид номеров меняет свойство 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 — Маркер или номер пункта списка.

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.