Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS CSS-фоны CSS границы CSS поля CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS CSS-текст CSS-шрифты CSS-иконки CSS-ссылки CSS-списки CSS-таблицы Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты CSS-тени Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

Введение в задний привод Окно просмотра RWD Представление сетки RWD Медиа-запросы RWD Изображения RWD Видео с задним приводом Рамки RWD Шаблоны RWD

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

Справочник по CSS Селекторы CSS CSS-функции Справочник по CSS Безопасные веб-шрифты CSS CSS анимация Единицы CSS Конвертер CSS PX-EM Цвета CSS Значения цвета CSS Значения CSS по умолчанию Поддержка CSS-браузера

CSS -счетчики


Пицца

Гамбургер

Хот-доги

Счетчики CSS — это «переменные», поддерживаемые CSS, значения которых могут увеличиваться с помощью правил CSS (чтобы отслеживать, сколько раз они используются). Счетчики позволяют настраивать внешний вид содержимого в зависимости от его размещения в документе.


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

Счетчики CSS похожи на «переменные». Значения переменных могут быть увеличены с помощью правил CSS (которые будут отслеживать, сколько раз они используются).

Для работы со счетчиками CSS мы будем использовать следующие свойства:

  • counter-reset- Создает или сбрасывает счетчик
  • counter-increment- Увеличивает значение счетчика
  • content- Вставляет сгенерированный контент
  • counter()или counters()функция - Добавляет значение счетчика к элементу

Чтобы использовать счетчик CSS, его необходимо сначала создать с помощью counter-reset.

В следующем примере создается счетчик для страницы (в селекторе body), затем увеличивается значение счетчика для каждого элемента <h2> и добавляется «Section < значение счетчика >:» в начало каждого элемента <h2>:

Пример

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}


Счетчики вложения

В следующем примере создается один счетчик для страницы (раздела) и один счетчик для каждого элемента <h1> (подраздела). Счетчик «раздел» будет подсчитываться для каждого элемента <h1> с «Раздел < значение счетчика раздела >.», а счетчик «подраздел» будет подсчитываться для каждого элемента <h2> с «< значение счетчика раздела >.< значение счетчика подразделов >":

Пример

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Счетчик также может быть полезен для составления структурированных списков, поскольку новый экземпляр счетчика автоматически создается в дочерних элементах. Здесь мы используем counters()функцию для вставки строки между разными уровнями вложенных счетчиков:

Пример

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

 Свойства счетчика CSS

Property Description
content Used with the ::before and ::after pseudo-elements, to insert generated content
counter-increment Increments one or more counter values
counter-reset Creates or resets one or more counters
counter() Returns the current value of the named counter