Нумерованный список css. Стилизация номеров строк (цифр) в упорядоченных списках ol. Пример: Нумерованный список

Если вы когда-либо пробовали изменять css-стили номеров строк (цифр) в упорядоченных списках

    , то, наверняка, сталкивались с проблемами. Достучаться до стилей этих элементов при помощи css-селекторов невозможно. А ведь довольно часто дизайн интерфейса предполагает изменение иx цвета, фона, размера и т.д.

    Вот самый простой пример нестилизованного списка:

    html

    1. Посадить дерево
    2. Построить дом
    3. Вырастить сына

    Давайте рассморим несколько способов решения вышеописанной задачи.

    Традиционно топорный способ.

    Традиционный способ решения этой проблемы сводится к тому, чтобы скрыть номера строк, автоматически расставленные браузером. При этом используется свойство list-style: none; .

    css

    li{ list-style: none; } .num{ color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; }

    html

    1. 1 Посадить дерево
    2. 2 Построить дом
    3. 3 Вырастить сына

    Согласитесь, выглядит избыточно и не гибко. Мы скрываем автоматически расставленные порядковые номера и заменяем их вручную заданными значениями, засоряем верстку и т.п.

    Давайте посмотрим, как можно добиться такого же результата, не засоряя верстку и используя псевдоэлемент::before и css-свойства content , counter-increment , counter-reset .

    Красивый и правильный способ.

    Вначале мы приведем код и демку, а потом разберемся, что к чему.

    css

    ol{ counter-reset: myCounter; } li{ list-style: none; } li:before { counter-increment: myCounter; content:counter(myCounter); color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; }

    html

    1. Посадить дерево
    2. Построить дом
    3. Вырастить сына

    Как видите, html-код остается чистым и красивым. При этом вся стилизация элементов списка переносится в css.

    Давайте разберем по пунктам:

    • li::before – создает внутри списка псевдоэлемент, который становится на место первого потомка.
    • counter-reset:myCounter; – обнуляет css-счетчик myCounter внутри каждого
        .
      1. counter-increment: myCounter; – инкрементирует css-счетчик myCounter для каждого псевдоэлемента::before .
      2. content:counter(myCounter); – выводит текущее значение счетчика myCounter внутри псевдоэлемента::before .

    подробнее о css-счетчиках можно посмотреть в

    При необходимости нумерации чего-либо на сайте чаще всего используют упорядоченный список (

      ). Резонно ожидать, что может возникнуть желание поработать над дизайном этих чисел. В СSS, однако, реализовать это желание довольно проблематично, но, к счастью, не невозможно. В своем руководстве Roger Johansson показывает, как это может быть реализовано с помощью псевдоэлемента:before , который для свойства content может иметь значение counter .

      Псевдоэлемент:before применяется для отображения желаемого контента до элемента, к которому он добавляется. Работает совместно со свойством content .

      Стоит прояснить, однако, что пронумерованные счетчики (counters) можно применять не только к упорядоченным спискам. К примеру, предположим, что вы захотели пронумеровать список определений (

      ), который состоит из вопросов и ответов для вашего FAQ.

      Разметка будет выглядеть приблизительно так:

      How much wood would a wood chuck chuck if a wood chuck could chuck wood?
      1,000,000
      What is the air-speed velocity of an unladen swallow?
      What do you mean? An African or European swallow?
      Why did the chicken cross the road?
      To get to the other side

      Каждый новый

      элемент это новый вопрос, поэтому к ним и применим нумерацию. Выглядеть это будет предельно просто:

      Свойство content позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует.
      Значение counter Выводит значение счетчика, заданного свойством counter-reset .

      Свойство counter-reset устанавливает идентификатор для счетчика и задает начальное значение.
      Свойство counter-increment задает шаг увеличения значения счетчика.

      Faq { counter-reset: my-badass-counter; } .faq dt:before { content: counter(my-badass-counter); counter-increment: my-badass-counter; }

      Псевдоэлементу:before можно назначить любые стили. Например:

      Освоив это свойство, можно нумеровать все, что только захочется. На днях, к примеру, я выложил один из моих любимых рецептов и пронумеровал каждый шаг/фото римскими цифрами. Это послужило для меня напоминанием: числа необязательно должны быть десятичными.

      Числовое многообразие представлено в виде значений свойства list-style-type .
      А именно:

      Все, что требуется, так это указать желаемый вариант в значении счетчика.

      Content: counter(my-counter, lower-roman);

      Будущее CSS3

      Вышеописанный материал актуален для сегодняшнего дня, однако и он меркнет в сравнении с теми возможностями, которые скрыты CSS3 списках. Как только в браузерах будет реализована их поддержка, можно будет, к примеру, работать с маркерами списков напрямую.

      Li::marker { width: 30px; text-align: right; margin-right: 10px; display: inline-block; } ol { list-style: symbols("*""2020""2021""A7"); } ul { list-style-type: "тут должна быть звездочка)"; }

      HTML-списки используются для группировки связанных между собой фрагментов информации. Существует три вида списков:

      маркированный список —

        — каждый элемент списка
      • отмечается маркером,
        нумерованный список —
          — каждый элемент списка
        1. отмечается цифрой,
          список определений — — состоит из пар термин
          —
          определение.

          Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение. Элементы списка ведут себя как блочные элементы, располагаясь друг под другом и занимая всю ширину блока-контейнера. Каждый элемент списка имеет дополнительный блок, расположенный сбоку, который не участвует в компоновке.

          Создание HTML-списков

          1. Маркированный список

          Маркированный список представляет собой неупорядоченный список (от англ. Unordered List) . Создаётся с помощью парного тега

          . В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

          Браузеры по умолчанию добавляют следующее форматирование блоку списка:

          Каждый элемент списка создаётся с помощью парного тега

        2. (от англ. List Item) .
          доступны .
        • Microsoft
        • Google
        • Apple
        Рис. 1. Маркированный список

        2. Нумерованный список

        Нумерованный список создаётся с помощью парного тега . Каждый пункт списка также создаётся с помощью элемента

      • . Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.

        Блок списка также имеет стили браузера по умолчанию:

      • доступен атрибут value , который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать
      • , то остальная нумерация будет пересчитана относительно нового значения.

        Для тега

          доступны следующие атрибуты:

          Таблица 1. Атрибуты тега
          Атрибут Описание, принимаемое значение
          reversed Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
          start Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция
            первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например,
              .
          type Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения:
          1 — значение по умолчанию, десятичная нумерация.
          A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).
          a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).
          I — нумерация римскими заглавными цифрами (I, II, III, IV).
          i — нумерация римскими строчными цифрами (i, ii, iii, iv).
          1. Microsoft
          2. Google
          3. Apple
          Рис. 2. Нумерованный список

          3. Список определений

          Списки определений создаются с помощью тега

          . Для добавления термина применяется тег
          , а для вставки определения — тег
          .

          Блок списка определений имеет следующие стили браузера по умолчанию:

          Для тегов

          ,
          и
          доступны .

          Режиссер:
          Петр Точилин
          В ролях:
          Андрей Гайдулян
          Алексей Гаврилов
          Виталий Гогунский
          Мария Кожевникова

          Рис. 3. Список определений

          4. Вложенный список

          Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов . Разметка для вложенного списка будет следующей:

          • Пункт 1.
          • Пункт 2.
            • Подпункт 2.1.
            • Подпункт 2.2.
              • Подпункт 2.2.1.
              • Подпункт 2.2.2.
            • Подпункт 2.3.
          • Пункт 3.

          Рис. 4. Вложенный список

          5. Многоуровневый нумерованный список

          Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:

          1. пункт
          2. пункт
            1. пункт
            2. пункт
            3. пункт
              1. пункт
              2. пункт
              3. пункт
            4. пункт
          3. пункт
          4. пункт

          Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
          counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
          counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
          content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

          Ol { /* убираем стандартную нумерацию */ list-style: none; /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ counter-reset: li; } li:before { /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */ counter-increment: li; /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */ content: counters(li,".") ". "; }
          Рис. 5. Многоуровневый нумерованный список


      Довольно часто приходиться пользоваться нумерацией: при создании различных списков, перечней, оформлении оглавления или содержания и т.п.

      В CSS для автоматизации процесса нумерации используются счетчики.

      Для начала приведем простой пример. Затем посложнее - создадим вложенный список с автоматизированной нумерацией его пунктов и подпунктов.

      Идентификация счетчика

      Сначала необходимо идентифицировать счетчик.

      С помощью свойства counter-reset счетчику присваивается имя и начальное значение. Имя может быть любым, но не может начинаться с цифры.

      Фрагмент кода:

      Эта запись говорит о том, что для тега установлен счетчик с именем number и начальным значением 3 .

      По умолчанию начальное значение счетчика равно 0 .

      Приращение счетчика

      Для этого служит свойство counter-increment . Также оно используется для задания приращений счетчика - числа, на которое будет увеличиваться значение счетчика.

      Фрагмент кода:

      body { counter-reset : number 3 ;}
      body p { counter-increment : number 3; }

      Этот фрагмент кода говорит о том, что абзацы (тег

      ) в теле документа будут нумероваться счетчиком number с приращением равным 3 .

      Первый абзац будет под номером 6 , так как начальное значение счетчика 3 и его приращение равно 3 .

      По умолчанию значение приращений счетчика равно 1 .

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

      Отображение счетчика

      Теперь необходимо вывести значение счетчика и задать правила его расположения. Это делается с помощью свойства content и псевдоэлементов before и after .

      Свойство content вставляет содержимое до (before ) или после (after ) указанного элемента.

      Фрагмент кода:

      body { counter-reset : number 3 ;}
      body p:after { counter-increment : number 3; content : " равно " counter(number) "." ;}

      Итак, к предыдущему фрагменту кода мы добавили свойство content , которое выводит слово "равно" , затем значение счетчика number и точку "." . Все это вставляется на страницу после содержимого абзаца (тега

      ), о чем говорит псевдоэлемент after .

      В итоге...

      Ниже представлен описанный пример.

      Фрагмент кода:






      2 умножить на 3


      3 умножить на 3


      4 умножить на 3


      5 умножить на 3


      Результат:

      Вложенные списки с автоматической нумерацией

      Давайте рассмотрим пример применения счетчиков для автоматизации процесса нумерации вложенных списков.

      Вам должно быть уже известно, как из HTML, так и при изучении списков в CSS, что пункты списка нумеруются автоматически. Но эта нумерация является простейшей.

      А как насчет автоматической нумерации подпунктов вида 1.1, 1.2, 2.1, 2.2 и т.д.?

      Эта задача решается при помощи счетчиков, позволяющих автоматизировать процесс нумерации вложенных списков.

      Фрагмент кода:





      Автоматическая нумерация в CSS


      1. Первый пункт списка


        1. Первый подпункт 1-го пункта

        2. Второй подпункт 1-го пункта

      2. Второй пункт списка


        1. Первый подпункт 2-го пункта

        2. Второй подпункт 2-го пункта

      3. Третий пункт списка


        1. Первый подпункт 3-го пункта

        2. Второй подпункт 3-го пункта

        3. Третий подпункт 3-го пункта


        Результат:

        Вот так происходит автоматизация процесса нумерации вложенных списков!

        Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега

          , который и применяется для создания списка. Каждый пункт нумерованного списка обозначается тегом
        1. , как показано ниже.

          1. Первый пункт
          2. Второй пункт
          3. Третий пункт

          Если не указывать никаких дополнительных атрибутов и просто написать тег

            , то по умолчанию применяется список с арабскими числами (1, 2, 3,...), как показано в примере 11.3.

            Пример 11.3. Создание нумерованного списка

            Нумерованный список

            Работа со временем

            1. создание пунктуальности (никогда не будете никуда опаздывать);
            2. излечение от пунктуальности (никогда никуда не будете торопиться);
            3. изменение восприятия времени и часов.

            Результат данного примера показан на рис. 11.3.

            Рис. 11.3. Вид нумерованного списка

            Заметьте, что в нумерованном списке также добавляются автоматические отступы сверху, снизу и слева от текста.

            В качестве нумерующих элементов могут выступать следующие значения:

            • арабские числа (1, 2, 3, ...);
            • прописные латинские буквы (A, B, C, ...);
            • строчные латинские буквы (a, b, c, ...);
            • прописные римские числа (I, II, III, ...);
            • строчные римские числа (i, ii, iii, ...).

            Для указания типа нумерованного списка применяется атрибут type тега

              . Его возможные значения приведены в табл. 11.2.

              Табл. 11.2. Типы нумерованного списка
              Тип списка Код HTML Пример
              Арабские числа

              		1. Чебурашка
              2. Крокодил Гена
              3. Шапокляк
              Прописные буквы латинского алфавита

              		A. Чебурашка
              B. Крокодил Гена
              C. Шапокляк
              Строчные буквы латинского алфавита

              		a. Чебурашка
              b. Крокодил Гена
              c. Шапокляк
              Римские числа в верхнем регистре

              		I. Чебурашка
              II. Крокодил Гена
              III. Шапокляк
              Римские числа в нижнем регистре

              		i. Чебурашка
              ii. Крокодил Гена
              iii. Шапокляк

              Чтобы начать список с определенного значения, используется атрибут start тега

                . При этом не имеет значения, какой тип списка установлен с помощью type , атрибут start одинаково работает и с римскими и с арабскими числами. В примере 11.4 показано создание списка с использованием римских цифр в верхнем регистре, начинающихся с восьми.

                Пример 11.4. Нумерация списка

                Римские числа

                1. Король Магнум XLIV
                2. Король Зигфрид XVI
                3. Король Сигизмунд XXI
                4. Король Хусбрандт I

                Результат данного примера показан на рис. 11.4.

                Рис. 11.4. Нумерованный список с римскими числами