Как сделать в html нумерованный список

Здравствуйте, друзья. Сегодня я бы хотел подробнее остановиться на теме, как создать в html нумерованный список, а также как его в дальнейшем оформить с помощью css.

Создаем список

Итак, сам по себе он создается с помощью тегов <ol>, а каждый пункт помещается в теги <li>. Этот простой код создает список из трех пунктов:

<ol>
	<li>Первый пункт списка</li>
	<li>Второй</li>
	<li>Третий</li>
</ol>

Выглядит все это так:нумерованный список в html

Для оформления списков нужно использовать css. В нем можно задать цвет текста, его размер, фон и многое другое. Но современный веб-дизайн требует красивого отображения списков, а для этого нам каким-то образом нужно стилизовать сами нумераторы. Как это сделать? Давайте рассмотрим наиболее правильный прием.

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

Как стилизовать нумераторы

Для начала стоит вообще убрать стандартные нумераторы, раз мы никак не можем их отдельно стилизовать, то лучше избавимся от них. Все будет реализовываться через псевдоэлемент :before.

Весь код выглядит следующим образом:

ol{
	list-style-type: none;
	counter-reset: count;
}
li{
	font-size: 18px;
}
li:before {
  color: white;
  background: orange;
  display: inline-block;
  text-align: center;
  margin: 5px 5px;
  line-height: 30px;
  width: 30px;
  height: 30px;
  counter-increment: count;
  content:counter(count);
}

Во-первых, мы избавились сразу же от всех нумераторов по умолчанию. Во-вторых, задали размер шрифта. Все основные стили, формирующие наш псевдонумератор прописаны элементу :before, который выведется перед содержимым в пункте списка.

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

Counter-increment: count – устанавливаем для наших псевдоэлементов увеличение счетчика в каждом следующем псевдоэлементе :before.
Content: counter(count) – свойство content позволяет вписать в псевдоэлемент текст, а в нашем случае оно впишет туда значение счетчика, начиная с единицы, и увеличивая его для каждого следующего пункта списка.
Counter-reset: count для ol – указывает, что для каждого нового нумерованного списка значение нужно сбросить и начать заново, с единицы.

Протестируем систему, добавим еще 3-4 пункта в список!
оформленный нумератор
Видим, что все прекрасно работает. При желании вы также можете расположить пункты списка в ряд, для этого просто добавляем в li такое правило:

Display: inline-block;

список в ряд
Оформляйте нумераторы так, как нужно вам, добавляя к ним свой фон, закругление углов (читайте тут) и любые трансформации.

Вложенные списки в html

Конечно, также язык разметки дает возможность сделать вложенные нумерованные списки. Это делается так:

<ol>
	<li>Первый пункт списка
		<ol>
			<li>Подпункт</li>
			<li>Подпункт</li>
			<li>Подпункт</li>
		</ol>
	</li>
	<li>Второй</li>
	<li>Третий</li>
</ol>

Как видите, мы пишем в первом подпункте текст, но не закрываем тег li, а создаем после основного содержимого еще один список, в который пять вкладываем теги li. После того, как список сформирован, он закрывается и только после этого закрывается тег li у главного списка.

Если сейчас мы оставим все как есть, то нумераторы у вложенного списка будут такими же, как и у основного. Давайте это исправим.

ol ol li:before{
  color: white;
  background: #A16636;
  display: inline-block;
  text-align: center;
  margin: 5px 5px;
  line-height: 20px;
  width: 20px;
  height: 20px;
  counter-increment: count;
  content:counter(count);
}

С помощью селектора ol ol li мы указали, чтобы стили применялись только для вложенных пунктов списка. Так, мы изменили фоновый цвет и немного уменьшили нумератор по сравнению с обычным.как оформить в html нумерованные списки

Также оформить можно было с помощью стилевого класса – всем вложенным li запишите какой-то одинаковый класс, а потом задайте для него псевдоэлемент before с измененными настройками.

Вот так вот с помощью достаточно простых приемов мы смогли получить красивые списки. Используйте такой метод для реализации их внешнего вида и на своем сайте.

Комментариев: 2
  1. Михаил (автор)

    Ну вот, сам написал, сам и использовал laugh

    1. Сергей

      Надо полагать, только может наоборот поди? )))))

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: