Руководство по CSS counter

Руководство по CSS counter

От автора: используйте свойство CSS counter, чтобы превратить любой элемент в нумерованный список. Аналогично тому, как работает тег упорядоченного списка ol. Это очень полезно, если вы создаете сайт документации, где вам нужно автоматически нумеровать заголовки или создавать оглавление.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Как работает свойство counter

Чтобы счетчик заработал, нужно сделать 3 вещи:

Определить и инициализировать счетчик

Обеспечить увеличение счетчика

Вывести счетчик

1. Определение и инициализация счетчика

Этот шаг состоит из 2 частей. Вам нужно определить счетчик и задать ему имя.

1a. Определение счетчика

Я назвал счетчик tidbit-counter. Мы задаем для него имя, чтобы иметь возможность вызвать его в дальнейшем.

1б. Инициализация счетчика

Дальше нам нужно инициализировать счетчик. По умолчанию его начальное значение — 0. Обратите внимание, что этот номер не отображается. Именно здесь вы устанавливаете «старт» счетчика. Так что, если бы я установил 20, то у меня был бы вывод 21, 22, 23… и т.д., предполагая, что шаг увеличения у меня 1 (подробнее об этом ниже).

Руководство по CSS counter

Вот пример:

Вывод:

Где применяется свойство counter-reset?

Вам нужно применить свойство counter-reset к родительскому элементу. Вот что произойдет, если вы примените его не к родителю.

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

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

Вывод:

2. Увеличение значения счетчика

Вы установили счетчик. Теперь вы можете начать увеличивать его значение. Вот синтаксис для этого свойства:

Как вы заметили, он принимает целочисленный аргумент. Это означает, что вы не ограничены просто увеличением значения счетчика на 1. В приведенном ниже примере предполагается, что для counter-reset установлено 0.

Руководство по CSS counter

И да, вы также можете передать отрицательное целое число, чтобы уменьшать значение счетчика. Хорошо, давайте посмотрим, как это будет реализовано:

Вывод:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

3. Вывод счетчика

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

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

Руководство по CSS counter

Полный список стилей вы можете найти здесь.

Пример

Вывод:

Несколько счетчиков

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

Вывод:

Вложенный счетчик

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

Аргумент string — это разделитель строк, который вы используете, чтобы указать, как вы хотите отделить элемент списка для вложенных счетчиков.

Руководство по CSS counter

Давайте рассмотрим пример:

Вывод:

counter или ol

CSS counter не заменяет ol. Если у вас есть нумерованный упорядоченный список, то вы все равно должны использовать

    , потому что важно структурировать HTML, используя правильную семантику. Семантическая разметка имеет решающее значение для доступности и SEO.

    Предпочтительно использовать ol

    Вот пример, где я должен использовать ol. В данном случае я просто перечисляю несколько правил. Имеет смысл использовать упорядоченный список ol.

    Предпочтительно использовать CSS counter

    Вот пример, где я бы использовал CSS counter. В этом случае у меня есть страница документации с использованием заголовков h2 и абзацев p. В этом примере наличие счетчика — это скорее визуальное представление. В этом примере будет иметь смысл использовать CSS counter.

    Вывод

    Поддержка браузерами

    CSS counter поддерживается всеми основными браузерами, включая Internet Explorer 8 и выше. Can I Use: CSS Counters

    Автор: Samantha Ming

    Источник: https://medium.com

    Редакция: Команда webformyself.

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Узнать подробнее

    CSS3. Основы

    Прямо сейчас изучите CSS3 с нуля!

    Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree