Как сделать в 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);
}
как оформить в html нумерованные списки

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

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

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

Понравилась статья? Поделиться с друзьями:
Комментариев: 2
  1. Михаил (автор)

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

    1. Сергей

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

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