Здравствуйте, друзья. Сегодня я бы хотел подробнее остановиться на теме, как создать в html нумерованный список, а также как его в дальнейшем оформить с помощью css.
Создаем список
Итак, сам по себе он создается с помощью тегов <ol>, а каждый пункт помещается в теги <li>. Этот простой код создает список из трех пунктов:
<ol>
<li>Первый пункт списка</li>
<li>Второй</li>
<li>Третий</li>
</ol>
Выглядит все это так:
Для оформления списков нужно использовать 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 мы указали, чтобы стили применялись только для вложенных пунктов списка. Так, мы изменили фоновый цвет и немного уменьшили нумератор по сравнению с обычным.
Также оформить можно было с помощью стилевого класса – всем вложенным li запишите какой-то одинаковый класс, а потом задайте для него псевдоэлемент before с измененными настройками.
Вот так вот с помощью достаточно простых приемов мы смогли получить красивые списки. Используйте такой метод для реализации их внешнего вида и на своем сайте.
Ну вот, сам написал, сам и использовал