CSS счетчик с автоинкрементом для любых элементов HTML страницы


Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

В итоге.

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

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

CSS счетчик с автоинкрементом для любых элементов HTML страницы

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

В прошлой статье – “Регистрация HTML сайта на сервисе статистики” мы с Вами зарегистрировали HTML сайт с доменом moypervyi-site.narod.ru, на сервисе статистики LiveInternet и получили там счетчик, то есть, нам осталось добавить код счетчика на все станицы сайта, чем мы с Вами давайте и займемся.

Давайте вспомним, что сайт moypervyi-site.narod.ru, на который мы будем добавлять код счетчика, состоит из трех статических HTML страниц, которые созданы путем написания HTML кода в блокноте.

Чтобы добавить код счетчика на все страницы сайта, откроем их последовательно HTML редактором или блокнотом и добавим код счетчика перед тегом

CSS counters и случаи их использования

В CSS есть ряд возможностей, которые мы по тем или иным причинам используем не очень часто. Я думаю, что счетчики CSS (CSS counters) для большинства из нас попадают в эту категорию и, скорее всего, по двум причинам:

  • случаев для их использования не много.
  • их синтаксис немного сложнее.

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

Ускоренный курс по счетчикам в CSS

CSS-счетчики позволяют динамически нумеровать элементы в CSS подобно тому, как работает нумерованный список, однако они очень сильно отличаются от списков. Счетчики используют псевдо-элемент в сочетании с определенной функцией-счетчиком, чтобы добавить до или после элемента динамический «подсчет» для указанного набора элементов.

Вот пример кода, похожий на тот, что я буду с использовать в демо в конце этой статьи:

Первый блок определяет область видимости счетчика. Это означает, что счетчик будет увеличиваться только для элементов внутри контейнера с классом .container. Я назвал счетчик «issues», этот идентификатор необходим, чтобы связать контейнер с элементами, которые будут подсчитываться.


Во втором блоке используется псевдо-элемент :before (я мог бы также использовать псевдо-элемент :after), в свойстве content задается содержимое элемента.

Для определения содержимого псевдо-элемента я использую функцию content(), синтаксис которой похож на функции в JavaScript или другом языке программирования. Функция counter() принимает два аргумента: идентификатор счетчика, определенный ранее (в данном случае, «issues») и стиль счетчика, которые может принимать любое значение , принимаемое свойством list-style-type нумерованного списка. В примере я использую значение по умолчанию «decimal».

Если вы не до конца поняли, как работают счетчики, возможно, инфографика ниже вам поможет:

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

Последняя ссылка на черновик спецификации, которая вводит ряд новых особенностей, связанных со счетчиками, есть риск, что они не будут поддерживаться в будущих версиях спецификации. Возможности, которые я использую в статье, являются кроссбраузерными вплоть до IE8.

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

Когда впервые думаешь о реализации счетчика на CSS, сразу приходят в голову две основные проблемы:

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

Первая из этих проблем на самом деле и не проблема вовсе. Если вы хотите пронумеровать последовательный список элементов, целесообразно использовать нумерованный список (элемент

    с вложенными элементами
    ). Счетчики CSS предназначены для нумерации не последовательных объектов, которые могут располагаться где угодно в DOM-дереве, могут быть пересортированы, но при этом нумерации должна сохраниться.

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

Другая проблема, связанная с доступностью, уже не кажется столь серьезной, как это было раньше. Вывод, сделанный в статье Леони Уотсон (Leonie Watson) :

«Доступность сгенерированного содержимого поддерживается большинством браузеров, и, соответственно, распознается скрин ридерами.»

Однако, поддержка не 100%, поэтому, если вы используете псевдо-элементы для генерации содержимого, этот «контент» должет иметь больше декоративное значение, не критичное для понимания или функционирования сайта. Использование счетчиков в таких случаях, как описан ниже, вполне приемлемо.

Простой use case

Недавно я смотрел на спецификацию W3C’s Selectors Level 4 spec и обратил внимание, что «проблемы» и «примеры» вкраплены в содержание. Я видел такое и раньше, но на этот раз решил поисследовать немного. Эти элементы нумеруются, поэтому я подумал, как добавлять и удалять их без необходимости повторно перенумеровывать весь набор каждый раз. Я предположил, что это реализуется с помощью JavaScript или генерируется на стороне сервера.

Нет. Они используют счетчики CSS, как показано на скриншоте ниже:

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

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

Я воссоздал пример W3C, что бы вы могли разобраться с тем, как работают счетчики, и увидеть, как легко их можно использовать для создания динамических списков различных элементов с помощью HTML и CSS.


В этом демо я использовал jQuery UI Sortable, чтобы реализовать возможность перетаскивания и пересортировки любого параграфа на странице, включая блоки проблем и примеров. Обратите внимание, как нумерация изменяется по мере перетаскивания элементов (хотя в процессе перетаскивания нумерация ведет себя довольно странно). Я также добавил дублирование списка проблем внизу страницы так же, как это сделано на W3C.

Заключение

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

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

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

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

Счетчики на CSS

Все мы знаем про тег нумерованных списков OL. В этой статье я расскажу, как сделать нумерацию у любых блоков: без всякого JavaScript c помощью CSS можно подписать любые блоки цифрами от 1 до N. Наиболее часто это используется в заголовках, имеющих различные уровни, например 1, 1.1, 1.2 и т.д.

Первое, что нужно сделать, это придумать идентификатор для счетчика. Он может быть любым, например, назовем его blockNum. Затем, нужно установить счетчику начальное значение с помощью свойства CSS:

Таким образом, мы сбросили счетчик blockNum (установили его в ноль) для класса blocks, который объединяет наши нумерованные блоки.

Затем, для каждого элемента из серии блоков нужно установить инкремент счетчика. Допустим, что в качестве блоков мы используем теги LI, обрамленные OL. Тогда код CSS пополнится следующей записью:

Теперь, после того, как счетчик настроен, надо вывести его значения. Это можно сделать с помощью псевдокласса:

Всё, счетчик настроен и будет выводиться. Можно убедиться в этом на работающем примере:

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

Привожу еще несколько примеров с расширенными параметрами при использовании указанных свойств:

Как сделать элемент формы “счетчик” с кнопками больше меньше?

Как сделать кнопку такого вида? Есть ли такой стандартный элемент формы для выбора?

4 ответа 4


Тот элемент, что вы продемонстрировали не есть счётчик. Это Select-бокс. Именно счётчика нет, а вот указанный, товарищем @эмиль, элемент — будет работать только в Chrome. Вы можете воспользоваться ряшечками JQuery-UI. Если не изменяет память там есть такой элемент. Или используйте Он хотя бы поддерживается 3 из 4 мажорных. Если хотите конечно, вы можете написать ручками на JS. Допустим так:

CSS Счетчики

Использование CSS счетчики

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

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

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

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

Следующий пример создает счетчик для страницы (в селекторе тела), а затем увеличивает значение счетчика для каждого

элемента и добавляет «Section :» в начале каждого

элемента:

пример

h2::before <
counter-increment: section;
content: «Section » counter(section) «: «;
>

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

Следующий пример создает один счетчик (раздел) страницы и один счетчик для каждого

элемента (п). «section» счетчик будет учитываться для каждого

элемента с «Section .» , А «subsection» счетчик будет учитываться для каждого

элемент с » . » :

пример

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,».») » «;
>

counter-increment

Стилевое свойство counter-increment предназначено для увеличения значения счётчика приращений, который задается свойством counter-reset. Такой счётчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов ::after и ::before . Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили.

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Анимируется Нет

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Значения

Возможные сочетания значений свойств counter-reset и counter-increment показаны в табл. 1.

Табл. 1. Изменение нумерации списка

Список начинается с нуля.

Выводятся все чётные числа.


Выводятся все нечётные числа.

Список начинается с 10.

Пример

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

Рис. 1. Применение свойства counter-increment

Объектная модель

Примечание

Для элементов, у которых установлено display: none , значение счётчика не меняется.

Спецификация ?

Код Результат
LI < list-style-type: none; >
OL < counter-reset: list -1 ; >
LI:before <
counter-increment: list ;
content: counter(list) «. «;
>
LI < list-style-type: none; >
OL < counter-reset: list ; >
LI:before <
counter-increment: list 2 ;
content: counter(list) «. «;
>
LI < list-style-type: none; >
OL < counter-reset: list -1 ; >
LI:before <
counter-increment: list list ;
content: counter(list) «. «;
>
LI < list-style-type: none; >
OL < counter-reset: list 9 ; >
LI:before <
counter-increment: list ;
content: counter(list) «. «;
>
Спецификация Статус
CSS Lists and Counters Module Level 3 Рабочий проект
CSS Level 2 (Revision 1) Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

8 12 2 9.2 3 1

Браузеры


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

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

counter-increment

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

12.0+ 8.0+ 2.0+ 4.0+ 9.6+ 3.1+

Описание

CSS свойство counter-increment используется для установки и увеличения значения счётчика или для увеличения значения счётчика, который задан свойством counter-reset. Счётчик увеличивается каждый раз, когда HTML-элемент, для которого применялось свойство, повторно появляется на странице.

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

Свойство counter-increment обычно используется совместно со свойствами counter-reset и content.

CSS Counters

Pizza

Hamburger

Hotdogs

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

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

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

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

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


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

В следующем примере создается счетчик для страницы (в селекторе тела), затем увеличивается значение счетчика для каждого элемента

и добавляется «раздел :» в начало каждого элемента

Пример

h2::before <
counter-increment: section;
content: «Section » counter(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 генераторы кнопок, шаблонов, рамок и других элементов сайта


При оформлении сайтов принято использовать CSS (CascadingStyleSheets), то есть каскадные таблицы стили. Это набор тегов, задающих основные параметры оформления страницы (отступы, шрифты, цвета), позволяющие создавать ключевые элементы веб-сайта, выдерживая их в определенном стиле. Для каждого элемента HTML можно определять свой стиль, это удобно, CSS обеспечивает экономию времени и усилий.

Существует ряд интернет-ресурсов, являющихся своего рода CSS конструкторами и облегчающих работу вебмастера. Мы уже как-то публиковали отличную подборку генераторов CSS3 и HTML5, кроме того можете поискать в блоге статьи по метке CSS. Некоторые подобные сервисы предназначены для генерирования шаблонов каркасов сайта в целом, другие имеют более узкую специализацию и могут использоваться для оформления отдельных элементов. Данный обзор посвящен нескольким полезным ресурсам.

CSStemplater.com

Русскоязычный ресурс CSStemplater — генератор шаблонов HTML и CSS на основе блочной верстки. Будет полезен начинающим пользователям, испытывающим трудности на этапе создания базовой разметки веб-страницы. Шаблоны, которые можно генерировать с помощью данного ресурса, корректно отображаются в наиболее популярных на нынешний день браузерах.

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

CSS Arrow PLEASE

Англоязычный ресурс CSS Arrow PLEASE предназначенный для генерации таких элементов сайта, как блоки со стрелками (уголками-указателями). Очень прост в работе, интерфейс понятен даже человеку, едва владеющему английским языком и имеющему весьма поверхностное представление о CSS-верстке.

В левой колонке настроек выбирается положение указателя относительно блока: сверху, справа, снизу или слева. В правой можно задать параметры самого блока и обрамляющей его рамки: размеры и цвета. Размеры в пикселях вписываются вручную, а цвет и оттенок выбирается в открывающейся при нажатии на соответствующее окошко палитре. Блок-образец тут же изменяет свою конфигурацию в соответствии с заданными параметрами, а справа прописывается CSS код, который можно использовать в дальнейшей работе.

CSS3 ButtonGenerator

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

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

На сайте есть обширная галерея готовых шаблонов, созданных с помощью CSS генератора, можно воспользоваться кодом любой из них.

Да, подобные кнопки также легко с помощью градиентов фотошопа но тогда они будут картинками, в то время как CSS дает элементу гибкость и масштабируемость.

CSSBoxMachine

Один из разделов сайта ThemeShock под названием CSSBoxMachine содержит подборку шаблонов для создания Box-моделей, одного из ключевых элементов CSS. Любой сайт представляет собой комбинацию множества прямоугольников, в которые заключены блочные и строчные элементы, изображения, текст. При оформлении этих прямоугольников («коробок») используются разнообразные эффекты, их можно создать, применяя CSS коды.

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

CSS-tricks.com

CSS-tricks.com — еще один ресурс для создания кнопок и не только, это целая энциклопедия для вебмастера, правда, англоязычная. Здесь есть и словарь терминов, и подборка фрагментов HTML кодов, и блог, и форум.

А раздел ButtonMaker посвящен именно генерированию кнопок. Передвигая ползунки, можно менять размеры кнопки, текста на ней, кривизну углов; набор палитр позволяет подобрать цвет каждого элемента. Готовый код открывается при нажатии на кнопку-образец в левой части страницы.

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

Цукерберг рекомендует:  Формулы и функции Excel, которые упростят вам жизнь
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих