—»     —»   Автоматическая нумерация посредством CSS Counter
  Раздел: CSS/Style Sheets   Нет комментариев  

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



До сегодняшнего дня мы успели рассказать вам о многих новых свойствах CSS3 – от цветных градиентов, переходов до анимации. На самом деле, есть еще множество других опций и функций (причем, некоторые из них доступны еще со времен CSS2), о которых следует рассказать. Сегодня мы хотим познакомить вас с CSS Counter.

Как вам всем уже наверное известно, когда мы добавляем списки при помощи элемента 'ol', нумерация проставляется автоматически. Используя CSS Counter, мы можем пронумеровать абсолютно любые элементы. Итак, давайте посмотрим, как это работает.

Базовое применение

CSS Counter состоит из двух основных свойств: counter-reset и counter-increment. counter-reset используется для сброса нумерации, а counter-increment – в компании псевдо-элемента – используется для повышения числа.

Следующий код представляет собой базовое применение функции.

body {
counter-reset: number;
}
h1:before {
counter-increment: number;
content: "counter(number) ";
}

Этот код даст нам следующий результат.

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

На случай, если вам нужно, чтобы числа начинались с определенной точки, вы можете указать reset number следующим образом:

body {
counter-reset: number 1;
}

Число, которое мы добавили в вышеприведенном коде, - это reset number. Если вы не укажите его точно, то оно будет выставлено на 0 по умолчанию, и начало отсчета будет с 1. Другими словами, сгенерированное число будет инициализироваться со следующей цифры после той, что указана в свойстве counter-reset. Итак, учитывая вышеприведенный пример, отсчет начнется с 2.

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

Более того, вы также можете изменить тип чисел, который указан внутри свойства content.

h2:before {
counter-increment: first;
content: counter(number, upper-roman) ". ";
}

Результат получится следующим:

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

В завершение

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

Демо | Скачать исходный код
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 3803   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930