Свойство counter-increment


Содержание

counter-increment

Браузер Internet Эксплорер Нетscape Опера Safari Файер фох
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Нет Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да

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

CSS (ЦСС) CSS (ЦСС)2
Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Аналог ШТМЛ Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/generate.ШТМЛ#propdef-counter-increment

Описание

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

Синтаксис

counter-increment: none | [идентификатор] | [целое число]

Аргументы

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

целое число Определяет значение приращения счетчика. По умолчанию оно равно 1. Допускается использовать отрицательные и нулевые значения.

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

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

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

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

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

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

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

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

Рис. 1. Применение параметра counter-increment

Примечание

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

Свойство counter-increment

Свойство counter-increment используется для определения элемента, который будет нумероваться, и для задания значения приращений счетчика (шага увеличения значения), установленного с помощью свойства counter-reset .

Это свойство применимо ко всем элементам.

Не поддерживается Internet Explorer до версии 8.0.

Свойство counter-increment используется совместно со свойствами counter-reset и content , а также с псевдоэлементами before и after для автоматизации процесса нумерации.

Значение

— идентификатор + целое число – указывается имя счетчика и значение его приращений, то есть число, на которое будет увеличиваться нумерация (по умолчанию значение счетчика увеличивается на 1).

— none — запрещает увеличение значения счетчика,

— inherit — принимает значение свойства родительского элемента.

Значение по умолчанию

Пример

Пример 1 — Свойства counter-increment и counter-reset

«-//W3C//DTD HTML 4.01 Transitional//EN»
«http://www.w3.org/TR/html4/loose.dtd» >

«Content-Type» content= «text/html; charset=windows-1251» >
Свойства counter-increment и counter-reset


  1. Первый пункт списка — под номером 2
  2. Второй пункт списка — под номером 2 + 2 = 4
  3. Третий пункт списка — под номером 6
  4. — номер четвертого пункта списка и т.д.

CSS counter-increment Свойство

Пример

Создайте счетчик («My-sec-счетчик») и увеличьте его по одному для каждого вхождения

селектора:

body <
/* Set «my-sec-counter» to 0 */
counter-reset: my-sec-counter;
>

h2::before <
/* Increment «my-sec-counter» by 1 */
counter-increment: my-sec-counter;
content: «Section » counter(my-sec-counter) «. «;
>

Подробнее примеры ниже.

Определение и использование

Свойство counter-increment увеличивает или уменьшает значение одного или нескольких счетчиков CSS.

counter-increment свойство обычно используется вместе с свойством Счетчик-Сброс и свойством Content.

Код Результат
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) «. «;
>
Значение по умолчанию: none
Inherited: no
Animatable: no. Читайте о animatable
Version: CSS2
Синтаксис JavaScript: object.style.counterIncrement = «subsection»;

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

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

Свойство
counter-increment 4.0 8.0 2.0 3.1 9.6

Синтаксис CSS

Значения свойств

Значение Описание
none Значение по умолчанию. Счетчики не будут увеличиваться
id number ID определяет, какой счетчик следует увеличивать. Значение Number задает, сколько счетчик будет увеличиваться при каждом вхождении селектора. По умолчанию приращение равно 1. Допустимы отрицательные значения. Если ID ссылается на счетчик, который не был инициализирован счетчиком сброса, начальное значение по умолчанию равно 0
initial Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit Наследует это свойство из родительского элемента. Читайте о inherit

Другие примеры

Пример

Создайте счетчик («My-sec-счетчик») и уменьшите его по одному для каждого вхождения

селектора:

body <
/* Set «my-sec-counter» to 0 */
counter-reset: my-sec-counter;
>

h2::before <
/* Decrement «my-sec-counter» by 1 */
counter-increment: my-sec-counter -1;
content: «Section » counter(my-sec-counter) «. «;
>

Пример

Нумерация секций и подразделов с «раздел 1:», «1,1», «1,2» и т.д.:

body <
/* Set «section» to 0 */
counter-reset: section;
>

h1 <
/* Set «subsection» to 0 */
counter-reset: subsection;
>

h1::before <
/* Increment «section» by 1 */
counter-increment: section;
content: «Section » counter(section) «: «;
>

h2::before <
/* Increment «subsection» by 1 */
counter-increment: subsection;
content: counter(section) «.» counter(subsection) » «;
>

Пример

Создайте счетчик и увеличьте его на один (с использованием римских цифр) для каждого вхождения

селектора:

body <
/* Set «my-sec-counter» to 0 */
counter-reset: my-sec-counter;
>

h2::before <
/* Increment «my-sec-counter» by 1 */
counter-increment: my-sec-counter;
content: counter(my-sec-counter, upper-roman) «. «;
>

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.

получит номер на 1 больше (это число можно изменить, как мы узнаем немного позже).

Подсчёт с помощью counter-increment

У CSS не так уж много (пока) вариантов или способов для хранения чисел, но есть небольшая лазейка: флажки (или ). У флажков есть глобальный атрибут checked , который можно изменять без JavaScript (а просто по клику). Это делает его уникальным и подходящим для динамического подсчёта.

Можно установить counter-increment для каждого элемента input, у которого есть глобальный атрибут checked (показанный выше), чтобы посчитать количество отмеченных чекбоксов. С помощью простых кликов пользователь динамически добавляет и удаляет чекбоксы из этой группы, а counter-increment реагирует соответственно.

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

Для отображения счётчика можно использовать псевдоэлемент и свойство content ! Поскольку название нашего счётчика — переменная, которая хранит значение counter-increment , можно обратиться к значению инкремента в CSS вот так:

Примечание: элемент для вывода значения счётчика должен идти после считаемых элементов, в порядке DOM.

Вот пример игры, которую я создала при помощи counter-increment , чтобы посчитать сумму поражённых мишений. Каждая мишень — поле чекбокса со случайной длительностью анимации, которая применена к ней для изменения скорости её движения. Также я использовала CSS-анимацию с 10-и секундной задержкой, чтобы остановить игру, наложив по таймеру слой поверх страницы. Чтобы остаться в этом окне, рекомендую «перезапустить» пример на CodePen (нижний правый угол) вместо нажатия на «Играть снова».

Все эти анимации сделаны при помощи простых CSS-переходов и CSS-анимаций, но Web Animations API в ближайшем будущем обещает намного больше возможностей управления.

Пользовательские счётчики

Можно также установить пользовательские счётчики (множественное число не ошибка, поскольку можно использовать несколько счётчиков) и указать шаг счетчика (который по умолчанию равен 1 ). Синтаксис будет таким:

Поэтому, чтобы немного усложнить игру выше, можно взять уникальный счётчик для каждого кольца мишени:

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

И каждый из них ссылается на один счётчик (game), но применяет разные значения counter-increment :

Логика на флажках

Теперь можно делать по-настоящему сумашедшие вещи, написав «логику на флажках» — некоторый код для проверки определённых паттернов. Для этого возьмём код, основанный на порядке чекбоксов с помощью псевдоселекторов :checked и :not(:checked) .

Например, :checked + :checked выберет элемент с отмеченным чекбоксом, рядом с которым находится другой элемент с отмеченным чекбоксом. :checked + :not(:checked) + :checked выберет паттерн «отмечен, не отмечен, отмечен»

Я использовала этот подход в CSS-логике (вместе с некоторыми анимационными трюками, упомянутыми выше, на этот раз с z-index для очерёдности ходов), чтобы воссоздать игру «Крестики-нолики» на чистом CSS. Розовые и зеленые рамки показывают, когда чей ход, просто дожидайтесь своей очереди.

Вот как выглядит логика «Крестиков-ноликов» для каждого случая, где Х должен выиграть:

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

P.S. Это тоже может быть интересно:

Если вам понравилась статья, поделитесь ей!

counter-increment

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

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства counter-increment являются следующие величины:

  • Идентификатор(ы) — одно или несколько (через пробел) имен счетчиков, значения которых будут изменяться.
  • Число — целое число, указывающее шаг увеличения (приращение) счетчика. Пишется через пробел после каждого идентификатора, если не указано, то приращение равно единице (1). Допускаются отрицательные значения, тогда счетчик будет уменьшаться.
  • none — изменения значения счетчика или счетчиков для селектора, к которому применяется свойство counter-increment , не происходит.
  • inherit — наследует значение counter-increment от родительского элемента.

Процентная запись: не существует.


Значение по умолчанию: none.

Синтаксис

Пример CSS: использование counter-increment

В данном примере счетчик заголовков (zag2) был объявлен для тега . Это сделано для того, чтобы в пределах всей страницы счетчик не сбрасывался в начальное положение, а только увеличивался. По той же причине счетчик параграфов (parag) указан для тега

Результат. Использование свойства CSS counter-increment.

CSS Свойство counter-increment

Пример

Пронумеровать разделы и подразделы следующим образом «Раздел 1», «1.1», «1.2», и т.д.:

body
<
counter-reset:section;
>

h1:before
<
counter-increment:section;
content:»Раздел » counter(section) «. «;
>

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

Попробуйте сами »

Определение и Использование

Свойство counter-increment увеличивает одно или более значений счетчиков.

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

Значение по умолчанию: none
Наследуется: нет
Версия: CSS2
JavaScript синтаксис: объект.style.counterIncrement=»subsection»

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

Свойство counter-increment поддерживается всеми основными браузерами.

Замечание: IE8 поддерживает свойство counter-increment, только если указано объявление !DOCTYPE.

Свойство counter-increment

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

Все мы конечно же знакомы с нумерованными списками, пример:

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

Здесь мы реализовали нумерацию для элементов div в контейнере container. Обратите внимание на стили. C помощью свойства counter-reset мы установили в главном контейнере счетчик с названием iter. Названия можете придумывать любые. В дочерных элементах в контейнере, с помощью свойства counter-increment мы указали что счетчик с названием iter с каждым новым элементом div будет увеличиваться на одну единицу. Мы можем указывать на сколько единиц на каждой итерации будет увеличиваться счетчик, пример:

Здесь у нас счетчик на каждой новой итерации увеличивается на 10. Причем заметьте счет также начинается с 10.

C помощью функции counter() аргументом которой также является название нашего счетчика, мы вывели номера всех наших итераций.

Вот так работают счетчики в css. В чем же может быть преимущество использования счетчиков css по сравнению с теми же списками. Давайте посмотрим.

Однако помните, функцию counter() мы можем использовать только в свойстве Content. Следовательно вывод номеров производится только через псевдоселекторы before и after. Подставляемый контент с помощью данных псевдоселекторов не может быть выделен пользователем. Помните про это.

На этом данная статья подошла к концу. Желаю вам успехов и удачи! Пока!

12 Генерируемое содержимое , автоматическая нумерация и списки

В некоторых случаях у авторов может возникнуть необходимость в том, чтобы агенты пользователей отображали на экране содержимое, которое не принадлежит дереву документа. Одним из хорошо известных примеров такой ситуации является нумерованный список, когда разработчик не желает вводить числа явным образом, а предпочитает, чтобы агент пользователя генерировал их автоматически. Подобным образом у разработчика может возникнуть желание, чтобы пользовательский агент вставлял слово «Рисунок» перед названием рисунка или строку «Глава 7» перед заголовком седьмой главы. В частности, агенты пользователей должны уметь вставлять эти строки для звуковых или эктипографических элементов.

В CSS2 содержимое может генерироваться несколькими способами:

  • С использованием свойства ‘content’ в сочетании с псевдоэлементами :before и :after.
  • С использованием звуковых свойств ‘cue-before’ , ‘cue-after’ (см. раздел о звуковых таблицах стилей). Если в сочетании с ними используется свойство ‘content’ , то отображение осуществляется в следующей последовательности: :before, ‘cue-before’ , ( ‘pause-before’ ), содержимое элемента, ( ‘pause-after’ ), ‘cue-after’ и :after.
  • С использованием элементов, свойство ‘display’ которых принимает значение ‘list-item’.

Ниже описываются способы генерации, использующие свойство ‘content’ .

12.1 Псевдоэлементы :before и :after

С помощью псевдоэлементов :before и :after разработчики задают стиль и местоположение генерируемого содержимого. Как следует из названия, псевдоэлементы :before и :after определяют его местоположение перед и после содержимого элемента, принадлежащего дереву документа соответственно. В сочетании с этими псевдоэлементами свойство ‘content’ определяет содержимое вставляемого объекта.

Например, следующее правило вставляет строку «Примечание: » перед содержимым каждого элемента P, значение атрибута «class» которого равно «note»:

Объекты форматирования (например, блоки), порождаемые элементом, заключают в себе генерируемое содержимое. Так, например, если в представленном выше примере изменить таблицу стилей следующим образом:


то в результате весь абзац, включая его начальную строку, будет заключен в сплошную зеленую рамку.

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

Например, следующие правила вставляют открывающие кавычки перед каждым элементом Q. Цвет кавычек будет красным, а шрифт будет таким же, как и шрифт остальной части элемента Q:

В объявлении псевдоэлементов :before или :after ненаследуемые свойства принимают свои начальные значения.

Т.к. начальное значение свойства ‘display’ равно ‘inline’, то кавычки в предыдущем примере вставляются как строковый блок (т.е. на той же строке, на которой находится исходное текстовое содержимое элемента). В следующем примере свойству ‘display’ явным образом присваивается значение ‘block’, так что вставляемый текст становится блоком:

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

Агенты пользователей должны игнорировать следующие свойства с псевдоэлементами :before и :after: ‘position’ , ‘float’ , свойства списков и свойства таблиц.

Псевдоэлементы :before и :after регулируют использование значений свойства ‘display’ следующим образом:

  • Если областью действия селектора является элемент уровня блока, то допустимыми значениями являются ‘none’, ‘inline’, ‘block’ и ‘marker’. Если свойству ‘display’ было присвоено другое значение, то псевдоэлемент будет действовать так, как если бы им было значение ‘block’.
  • Если областью действия селектора является элемент строкового уровня, то допустимыми значениями являются ‘none’ и ‘inline’. Если свойству ‘display’ было присвоено другое значение, то псевдоэлемент будет действовать так, как если бы им было значение ‘inline’.

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

12.2 Свойство ‘content’

‘content’

Значение: [ | | | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | наследуемое
Начальное значение: пустая строка
Область применения: псевдоэлементы :before и :after
Наследование: нет
Процентное задание: нет
Устройства: все

Это свойство используется вместе с псевдоэлементами :before и :after для генерации содержимого в документе. Принимаемые им значения имеют следующий смысл:

«> Текстовое содержимое (см. раздел о строках). «> Значением является URI, обозначающий внешний ресурс. Если поддерживаемые агентом пользователя типы устройств не позволяют ему представлять этот ресурс, это значение следует игнорировать. Примечание. В CSS2 не предусмотрен механизм изменения размера встраиваемого объекта или предоставления текстового описания, как это позволяют делать атрибуты «alt» или «longdesc» при работе с изображениями в HTML. Возможно, что в CSS следующих уровней ситуация изменится. «> Счетчики могут задаваться с помощью двух различных функций ‘counter()’ или ‘counters()’. Первая имеет два формата: ‘counter( имя )’ и ‘counter( имя , стиль )’. Генерируемый текст является значением счетчика в структуре форматирования. Он форматируется в заданном стиле (по умолчанию используется стиль ‘decimal’). Вторая функция также имеет два формата: ‘counter( имя , строка )’ и ‘counter( имя , строка , стиль )’. Генерируемый текст представляет собой значения всех счетчиков с таким именем в структуре форматирования, разделенные заданной строкой. Счетчики отображаются в указанном стиле (по умолчанию используется стиль ‘decimal’). Дополнительную информацию можно получить в разделе, посвященном автоматической нумерации и счетчикам. open-quote и close-quote Эти значения заменяются соответствующей строкой из свойства ‘quotes’ . no-open-quote и no-close-quote Ничего не вставляет (вставляет пустую строку), но увеличивает (уменьшает) уровень вложенности кавычек. attr(X) Эта функция возвращает строку, которая является значением атрибута X предметной области селектора. Процессор CSS не обрабатывает эту строку. Если предметная область селектора не имеет атрибута X, возвращается пустая строка. Зависимость имен атрибутов от регистра определяется языком документа. Примечание. В CSS2 невозможно обращаться к значениям атрибутов других элементов селектора.

Свойство ‘display’ управляет тем, что содержимое помещается либо в блоке структурного или строкового уровня, либо в блоке, порожденном маркером.

В случае аппаратно-зависимого содержимого свойства ‘content’ его объявление следует помещать в правило @media . Например, текст, состоящий только из букв, может использоваться для любой группы устройств, изображения — только для группы визуальных и растровых устройств, а звуковые файлы — только для группы звуковых устройств.

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

Следующее правило позволяет перед изображением вставлять текст атрибута «alt» языка HTML. Если это изображение не выводится, то читатель, тем не менее, увидит текст атрибута «alt».

Разработчики могут вставлять в генерируемое содержимое переходы на новую строку с помощью последовательности «\A» в одной из строк после свойства ‘content’ . Это приводит к , аналогичному тому, который порождается элементом BR в языке HTML. Дополнительную информацию о последовательности «\A» можно получить в разделах «Строки» и «Символы и регистр».

Генерируемое содержимое не изменяет дерева документа. В частности, оно не поступает обратно в языковой процессор документа (например, для повторного синтаксического анализа).

Примечание. В CSS последующих уровней свойство ‘content’ сможет принимать дополнительные значения, что позволит настраивать стиль отдельных частей генерируемого содержимого. В CSS2 пока все содержимое псевдоэлементов :before или :after имеет одинаковый стиль.

12.3 Взаимодействие псевдоэлементов :before и :after с элементами ‘compact’ и ‘run-in’

Вполне возможно возникновение следующих ситуаций:

  1. Элемент ‘run-in’ или ‘compact’ имеет псевдоэлемент :before типа ‘inline’: псевдоэлемент принимается во внимание при вычислении размера блока, порожденного элементом (для ‘compact’), и отображается внутри того же структурного блока, что и элемент.
  2. Элемент ‘run-in’ или ‘compact’ имеет псевдоэлемент :after типа ‘inline’: применяются правила предыдущего пункта.
  3. Элемент ‘run-in’ или ‘compact’ имеет псевдоэлемент :before типа ‘block’: псевдоэлемент форматируется как блок, расположенный над элементом, и не принимается во внимание при вычислении размера этого элемента (для ‘compact’).
  4. Элемент ‘run-in’ или ‘compact’ имеет псевдоэлемент :after типа ‘block’: как элемент, так и его псевдоэлемент :after форматируются как блоки структурного уровня. Элемент не форматируется как строковый блок в своем собственном псевдоэлементе :after.
  5. Элемент, следующий за элементом ‘run-in’ или ‘compact’, имеет псевдоэлемент :before типа ‘block’: решение о том, как следует форматировать элемент ‘run-in’/’compact’, принимается, исходя из типа структурного блока, порожденного псевдоэлементом :before.
  6. Элемент, следующий за элементом ‘run-in’ или ‘compact’, имеет псевдоэлемент :before типа ‘inline’: решение о том, как следует форматировать элемент ‘run-in’/’compact’, зависит от значения свойства ‘display’ элемента, к которому прикреплен псевдоэлемент :before.

Ниже приведен пример заголовка ‘run-in’ с псевдоэлементом :after, после которого следует абзац с псевдоэлементом :before. В этом примере все псевдоэлементы являются строковыми (по умолчанию). Если таблица стиля:

применяется к исходному документу:

то после визуального форматирования получится:

12.4 Кавычки

В CSS2 авторы могут определять, каким образом агенты пользователей будут отображать кавычки в зависимости от стиля и контекста. Свойство ‘quotes’ задает пару кавычек для каждого уровня вложенности цитат. Свойство ‘content’ предоставляет доступ к этим кавычкам и вставляет их до и после цитаты.

12.4.1 Определение кавычек с помощью свойства ‘quotes’


‘quotes’

Значение: [ ]+ | none | наследуемое
Начальное значение: зависит от пользовательского агента
Область применения: все элементы
Наследование: да
Процентное задание: нет
Устройства: визуального форматирования

Это свойство задает кавычки для любого числа вложенных цитат. Значения данного свойства имеют следующий смысл:

none Значения ‘open-quote’ и ‘close-quote’ свойства ‘content’ не создают кавычек. [ «> «> ]+ Значения ‘open-quote’ и ‘close-quote’ свойства ‘content’ извлекаются из списка пар (открывающих и закрывающих) кавычек. Первая (крайняя слева) пара представляет самый внешний уровень вложенности, вторая пара — первый уровень вложенности и т.д. Агент пользователя должен применять необходимую пару кавычек в соответствии с уровнем вложенности.

Например, применяя следующую таблицу стиля:

к следующему фрагменту HTML:

позволит агенту пользователя создавать следующее представление:


тогда как в результате этого фрагмента HTML:

Примечание. Несмотря на то, что кавычки, определяемые свойством ‘quotes’ в предыдущем примере, имеются на клавиатурах компьютеров, для высокого качества текста могут потребоваться другие символы кодировки ISO 10646. В следующей таблице представлены некоторые символы кавычек из набора ISO 10646:

Приблизительный вид Код ISO 10646 (шестнадцатеричный) Описание
» 0022 КАВЫЧКА [двойная кавычка в ASCII]
0027 АПОСТРОФ [одинарная кавычка в ASCII]
203A ПРАВАЯ ОДИНАРНАЯ УГЛОВАЯ КАВЫЧКА
« 00AB ЛЕВАЯ ДВОЙНАЯ УГЛОВАЯ КАВЫЧКА
» 00BB ПРАВАЯ ДВОЙНАЯ УГЛОВАЯ КАВЫЧКА
2020 ЛЕВАЯ ОДИНАРНАЯ КАВЫЧКА [single high-6]
2020 ПРАВАЯ ОДИНАРНАЯ КАВЫЧКА [single high-9]
201C ЛЕВАЯ ДВОЙНАЯ КАВЫЧКА [double high-6]
201D ПРАВАЯ ДВОЙНАЯ КАВЫЧКА [double high-9]
,, 201E ДВОЙНАЯ НИЖНЯЯ 9-ОБРАЗНАЯ КАВЫЧКА [double low-9]

12.4.2 Вставка кавычек с помощью свойства ‘content’

Кавычки вставляются в соответствующие места документа с помощью значений ‘open-quote’ и ‘close-quote’ , принимаемых свойством ‘content’ . Каждое вхождение ‘open-quote’ или ‘close-quote’ в зависимости от глубины вложения заменяется одной из строк, принадлежащей значению свойства ‘quotes’ .

‘Open-quote’ указывает на первую из двух кавычек, а ‘close-quote’ — на вторую. Тип используемых кавычек зависит от уровня их вложенности, определяемого как разность числа вхождений ‘open-quote’, предшествующих текущему вхождению во всем сгенерированном тексте, и числа вхождений ‘close-quote’. Если глубина вложенности равна 0, то используется первая пара кавычек; если глубина вложенности равна 1, то используется вторая пара кавычек и т. д. Если глубина вложенности превышает число пар, то осуществляется повторное использование последней пары.

Обратите внимание, что глубина вложенности цитат не зависит от вложенности исходного документа или структуры форматирования.

Некоторые типографские стили требуют, чтобы открывающие кавычки повторялись перед каждым абзацем цитаты, состоящей из нескольких абзацев, и чтобы только после последнего абзаца ставилась закрывающая кавычка. В CSS это может быть достигнуто путем вставки «фантомных» закрывающих кавычек. Ключевое слово ‘no-close-quote’ уменьшает уровень вложенности, но не приводит к вставке кавычек.

Следующая таблица стилей помещает открывающие кавычки в каждый абзац в BLOCKQUOTE и вставляет в конце одну закрывающую кавычку:

Последнее выполняется в заключительном абзаце, отмеченном классом «last», ввиду отсутствия селекторов, сопоставляемых последнему дочернему элементу.

Для симметрии существует также ключевое слово ‘no-open-quote’ , которое увеличивает глубину вложения на единицу и также не приводит к вставке кавычек.

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

Например, можно цитировать французский текст внутри английского:

The device of the order of the garter is “Honi soit qui mal y pense.”

Il disait: » Il faut mettre l’action en ‹ fast forward ›.»

В приведенной ниже таблице стилей свойство ‘quotes’ устанавливается так, ‘open-quote’ и ‘close-quote’ будут работать корректно во всех элементах. Эти правила предназначены для документов, содержащих текст только на французском, только на английском или на обоих языках одновременно. Для каждого дополнительного языка необходимо доопределить ровно по одному правилу. Обратите внимание, что использование комбинатора дочерних элементов («>») для установки кавычек в элементах зависит от языка окружающего текста:

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

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

Управление автоматической нумерацией в CSS2 осуществляется двумя свойствами: ‘counter-increment’ и ‘counter-reset’ . Определяемые этими свойствами счетчики используются функциями counter() и counters() свойства ‘content’ .

‘counter-reset’

Значение: [ ? ]+ | none | наследуемое
Начальное значение: none
Область применения: все элементы
Наследование: нет
Процентное задание: нет
Устройства: все

‘counter-increment’

Значение: [ ? ]+ | none | наследуемое
Начальное значение: none
Область применения: все элементы
Наследование: нет
Процентное задание значений: нет
Ассоциированные устройства: все

Свойство ‘counter-increment’ допускает использование одного или нескольких имен счетчиков (идентификаторов), после каждого из которых может быть указано целое число. Оно определяет величину, на которую увеличивается содержимое счетчика при каждом новом вхождении элемента. По умолчанию приращение равно 1. Допускается использование отрицательных целых чисел.

Свойство ‘counter-reset’ также содержит список из одного или нескольких имен счетчиков, после каждого из которых может быть указано целое число. Оно задает значение, которое присваивается счетчику при каждом новом вхождении элемента. По умолчанию оно равно 0.

Если свойство ‘counter-increment’ относится к счетчику, который не принадлежит области действия (см. ниже) ни одного свойства ‘counter-reset’ , то предполагается, что он обнуляется корневым элементом.

В этом примере представлен способ нумерации глав и разделов с использованием элементов «Глава 1», «1.1», «1.2», и т.д.

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

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

Свойство ‘counter-reset’ поддерживает правила каскада. Таким образом, по правилам каскада в следующей таблице стилей:

сбрасывается только счетчик ‘imagenum’. Чтобы выполнить сброс обоих счетчиков, их необходимо задать вместе:

12.5.1 Вложенные счетчики и область действия

Счетчики являются «самовложенными» в том смысле, что при повторном использовании счетчика в дочернем элементе автоматически создается новый образ этого счетчика. Это оказывается важным в ситуациях, аналогичных спискам в языке HTML, где элементы могут быть вложены сами в себя на произвольную глубину. Было бы невозможно определить для каждого уровня счетчик с уникальным именем.

Таким образом, для нумерации вложенных элементов списка достаточно использовать следующий пример. Результат аналогичен тому, когда ‘display:list-item’ и ‘list-style: inside’ задаются в элементе LI:

Самовложенность основывается на следующем принципе. Каждый элемент, у которого определено свойство ‘counter-reset’ для счетчика X, создает новый счетчик X, которого являются этот элемент и предшествующие ему сестринские элементы, а также все их потомки.

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

Если n-ое вхождение счетчика «item» обозначить как item[n], а начало и конец области действия обозначить как «(» и «)», то в следующем фрагменте HTML-документа будут использоваться заданные счетчики. (Предполагается, что при этом используется таблица стилей, заданная в приведенном выше примере).

Функция ‘counters()’ генерирует последовательность разделенных заданной строкой значений всех счетчиков, имена которых совпадают.

Следующая таблица стилей нумерует вложенные элементы списка с использованием символов «1», «1.1», «1.1.1», и т. д.


12.5.2 Стили счетчиков

По умолчанию содержимое счетчиков отображается в десятичном формате, но наряду с ним счетчикам доступны все другие стили отображения, используемые в свойстве ‘list-style-type’ . Для стиля, используемого по умолчанию, применяется следующая запись:

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

Допускается применение всех стилей, включая ‘disc’, ‘circle’, ‘square’ и ‘none’.

12.5.3 Счетчики в элементах со свойством ‘display: none’

Неотображаемый элемент (для свойства ‘display’ которого установлено значение ‘none’) не может увеличивать или уменьшать значение счетчика.

Например, в следующей таблице стиля элементы H2, класс которых равен «secret», не увеличивают значение счетчика ‘count2’.

С другой стороны, элементы, свойство ‘visibility’ которых принимает значение ‘hidden’, увеличивают значения счетчиков.

12.6 Маркеры и списки

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

Наиболее общим из этих двух способов является нововведение, используемое в CSS2 и названное . Более ограниченный в своих возможностях способ использует свойства списков, заимствованные из CSS1. Эти свойства предоставляют разработчикам возможность получения быстрых результатов для многих распространенных сценариев упорядоченного и неупорядоченного отображения списков. Однако маркеры позволяют разработчикам точно управлять их позицией и содержимым. Маркеры могут использоваться вместе со счетчиками для создания новых стилей списков, для нумерации заметок на полях и множества других вещей.

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

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

12.6.1 Маркеры: свойство ‘marker-offset’

Маркеры создаются путем присвоения свойству ‘display’ , фигурирующему в псевдоэлементе :before или :after, значения ‘marker’. Если содержимое псевдоэлемента :before или :after, относящееся к типу ‘block’ или ‘inline’, является частью главного блока, генерируемого элементом, то содержимое типа ‘marker’ форматируется в отдельный блок маркера, находящийся вне главного блока. Блоки маркеров форматируются в виде отдельной строки (т.е. в виде одного линейного блока), в силу чего они утрачивают гибкость в сравнении с перемещаемыми объектами. Блок маркера создается только тогда, когда свойство ‘content’ псевдоэлемента в действительности генерирует некоторое содержимое.

Блоки маркера имеют границы и отступы, но не имеют полей.

В псевдоэлементе :before вертикальное выравнивание базовой линии текста, содержащегося в блоке маркера, осуществляется относительно базовой линии текста первой строки содержимого главного блока. Если главный блок не содержит текста, то осуществляется выравнивание верхних сегментов внешних краевых линий блока маркера и главного блока. В псевдоэлементе :after вертикальное выравнивание базовой линии текста, содержащегося в блоке маркера, осуществляется относительно базовой линии текста последней строки содержимого главного блока. Если главный блок не содержит текста, то осуществляется выравнивание нижних сегментов внешних краевых линий блока маркера и главного блока.

Высота блока маркера задается свойством ‘line-height’ . Блок маркера, связанный с псевдоэлементом :before (:after), принимается во внимание при вычислении высоты первого (последнего) линейного блока, содержащегося в главном блоке. Таким образом, маркеры выравниваются по первой или последней строке содержимого элемента, даже если блоки маркеров располагаются в отдельных линейных боках. Если в главном блоке нет ни первого, ни последнего линейного блока, то блок маркера сам создает свой линейный блок.

Вертикальное выравнивание блока маркера внутри его линейного блока определяется свойством ‘vertical-align’ .

Если для свойства ‘width’ устанавливается значение ‘auto’, то ширина содержимого блока маркера равна ширине содержимого. В противном случае она равна значению свойства ‘width’ . Если значение свойства ‘width’ не превосходит значения ширины содержимого, то образ действий при переполнении определяется свойством ‘overflow’ . Блоки маркеров могут располагаться поверх главных блоков. Если значение свойства ‘width’ превосходит значение ширины содержимого, то горизонтальное выравнивание содержимого блока маркера определяется свойством ‘text-align’ .

Свойство ‘marker-offset’ задает величину горизонтального интервала между блоком маркера и связанным с ним главным блоком. Расстояние измеряется между их ближайшими краями границ. Примечание. Если маркер помещается справа от перемещаемого объекта в тексте, который выводится слева направо, то главный блок будет выводиться вдоль правой стороны перемещаемого элемента, в то время как блок маркера будет отображен слева от него. Т.к. край левой границы главного блока находится слева от перемещаемого объекта (см. описание перемещаемых объектов), а блоки маркеров находятся за пределами краевой линии границы главного блока, то этот маркер также будет находиться слева от перемещаемого элемента. То же происходит и когда маркер помещается слева от перемещаемого элемента в тексте, который выводится справа налево.

Если для свойства ‘display’ содержимого элемента с ‘display: list-item’ устанавливается значение ‘marker’, то блок маркера, генерируемый для псевдоэлемента ‘:before’, заменяет обычный маркер элемента списка.

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

В следующем примере маркеры создаются перед и после элементов списка.

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

получим (вместо картинок с изображением смеющихся рожиц здесь используется псевдографика):

В следующем примере маркеры используются для нумерации заметок (абзацев).

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

‘marker-offset’

Значение: | auto | наследуемое
Начальное значение: auto
Область применения: элементы с ‘display: marker’
Наследование: нет
Процентное задание: нет
Устройства: визуального форматирования

Это свойство задает расстояние между ближайшими краями границ блока маркера и связанного с ним главного блока. Это расстояние может либо задаваться пользователем ( «> ), либо назначаться агентом (‘auto’) пользователя. Значения длины могут быть отрицательными, но это зависит от реализации.

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

12.6.2 Списки: свойства ‘list-style-type’ , ‘list-style-image’ , ‘list-style-position’ и ‘list-style’

позволяют осуществлять визуальное форматирование списков. Как и в случае наиболее общих маркеров, элемент со свойством ‘display: list-item’ порождает главный блок для своего содержимого и необязательный блок для маркера. Использование других свойств списков позволяет разработчикам определять тип (графический объект, глиф или число) и позицию маркера относительно главного блока (за его пределами или внутри него перед содержимым). Их использование уже не позволяет разработчикам осуществлять более тонкую настройку стиля (цвета, шрифтов, выравнивания и т.д.) и местоположения маркера относительно главного блока.

Кроме того, если маркер M (заданный с помощью ‘display: marker’) используется с элементом списка, созданным с помощью свойств списка, то M заменяет стандартный маркер элемента списка.

Вместе со свойствами списка свойства фона применяются только к главному блоку. ‘Внешний’ блок маркера является прозрачным. Маркеры предоставляют больше возможностей для управления стилем отображения блоков маркеров.

‘list-style-type’

Значение: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk- >наследуемое
Начальное значение: disc
Область применения: элементы с ‘display: list-item’
Наследование: да
Процентное задание: нет
Устройства: визуального форматирования

Это свойство задает вид маркера элемента списка, если для свойства ‘list-style-image’ устанавливается значение ‘none’ или изображение, на которое указывает URI, недоступно. Значение ‘none’ говорит о том, что маркер не используется. В противном случае можно использовать три типа маркеров: глифы, нумерованные и алфавитные. Примечание. Нумерованные списки улучшают доступность документа, упрощая просмотр списков.


Глифы определяются с помощью значений disk , circle и square . Конкретное их представление зависит от агента пользователя.

Системы нумерации определяются с помощью:

decimal Десятичных чисел, начиная с 1. decimal-leading-zero Десятичных чисел, вначале дополненных нулями (например, 01, 02, 03, . 98, 99). lower-roman Римских цифр, представленных строчными буквами (i, ii, iii, iv, v и т.д.). upper-roman Римских цифр, представленных прописными буквами (I, II, III, IV, V и т.д.). hebrew Традиционной еврейской нумерации. georgian Традиционной грузинской нумерации (an, ban, gan, . he, tan, in, in-an, . ). armenian Традиционной армянской нумерации. cjk-ideographic Простых идеографических чисел. hiragana a, i, u, e, o, ka, ki, . katakana A, I, U, E, O, KA, KI, . hiragana-iroha i, ro, ha, ni, ho, he, to, . katakana-iroha I, RO, HA, NI, HO, HE, TO, .

Агент пользователя, который не смог определить систему нумерации, должен использовать систему ‘decimal’.

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

Алфавитные системы задаются с помощью:

lower-latin или lower-alpha Строчных букв в коде ascii (a, b, c, . z). upper-latin или upper-alpha Заглавных букв в коде ascii (A, B, C, . Z). lower-greek Классических строчных греческих букв: альфа, бета гамма, . (έ, ή, ί, . )

В этой спецификации не определено поведение алфавитных систем, когда в процессе нумерации исчерпываются все символы алфавита. Например, после 26 элементов списков представление ‘lower-latin’ не определено. Поэтому для больших списков рекомендуется использовать числа.

Например, в результате ывполнения следующего кода HTML

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

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

‘list-style-image’

Значение: | none | наследуемое
Начальное значение: none
Область применения: элементы с ‘display: list-item’
Наследование: да
Процентное задание: нет
Устройства: визуального форматирования

Это свойство определяет графический объект, используемый в качестве маркера элемента списка. Если графический объект доступен, то он заменяет маркер, устанавливаемый свойством ‘list-style-type’ .

В следующем примере перед каждым элементом списка в качестве маркера используется графический объект «ellipse.png».

‘list-style-position’

Значение: ins >наследуемое
Начальное значение: outs > Область применения: элементы с ‘display: list-item’
Наследование: да
Процентное задание: нет
Устройства: визуального форматирования

Это свойство определяет положение блока маркера в главном структурном блоке. Его значения имеют следующий смысл:

outside Блок маркера находится за пределами главного структурного блока. Примечание. В CSS1 точное местоположение блока маркера не уточнялось, поэтому из соображений совместимости в CSS2 оно сохранило ту же степень неопределенности. Для более точного управления положением блоков маркеров желательно использовать маркеры. inside Блок маркера находится в первом строковом блоке главного структурного блока, следом за которым выводится содержимое элемента.

Приведенный выше пример может быть отформатирован следующим образом:

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

‘list-style’

Значение: [ || || ] | наследуемое
Начальное значение: не определено для свойств стенографического типа
Область применения: элементы с ‘display: list-item’
Наследование: да
Процентное задание: нет
Устройства: визуального форматирования

Свойство ‘list-style’ является сокращенной формой задания трех свойств ‘list-style-type’ , ‘list-style-image’ и ‘list-style-position’ в одном месте таблицы стилей.

Хотя разработчики и могут задать информацию ‘list-style’ о стиле списка непосредственно в элементах списка (например, в элементе LI языка HTML), тем не менее, следует пользоваться таким способом с определенной осторожностью. Следующие два правила выглядят похожими, хотя первое определяет селектор потомков, а второе (более специфичное) — селектор дочерних элементов.

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

Отображение элементов списка первого и второго уровней, помеченных маркерами типа ‘lower-alpha’ и ‘disc’ соответственно будет осуществлено надлежащим образом. Однако каскад приведет к тому, что первое правило стиля (включающее специфичную информацию о классе) будет перекрывать второе. Следующие правила позволят решить эту проблему с помощью селектора дочерних элементов:

Другим способом решения может стать задание информации ‘list-style’ о стиле списка исключительно в элементах списка:

Благодаря наследованию значения свойства ‘list-style’ элементов OL и UL будут передаваться соответствующим свойствам элементов LI. Именно этот способ рекомендуется использовать для определения информации о стиле списка.

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

Если не удается получить доступ к графическому объекту, то вместо него здесь будет использоваться маркер типа ‘disc’.

Если для свойства ‘list-style’ устанавливается значение ‘none’, то свойствам ‘list-style-type’ и ‘list-style-image’ также присваивается значение ‘none’:

В результате маркер элемента списка не отображается.

CSS “counter-increment” not incrementing

Following this tutorial, I am trying to style my list item counters in an

    . However, my counters are not incrementing.

It seems like these two lines should pretty much take care of it:

Why aren’t my counters incrementing?

1 Answer 1

You are defining your counter on .prog-ol ol which are the

    descendants of the element that is a member of the prog-ol class.

Remove the ol from the selector.

(For that matter, you should probably remove the ol from the class name too. Tying class names to specific elements doesn’t make a lot of sense. You can combine them with type selectors if desired).

Илон Маск рекомендует:  Руководство пользователя Adobe Flash cs4
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL