Понятие генерации содержимого Генерация содержимого Автоматическая нумерация Маркеры Списки Понятие генерации содержимого В некоторых случаях CSS позволяет отображать содержание, которого нет в дерева документа. Типичным примером является нумерованный список: автор документа не нумерует его пункты, а требует от обозревателя, чтобы тот генерировал номера пунктов автоматически. В этой главе собраны все возможности CSS по генерации содержимого, а именно: генерация содержимого с помощью псевдоэлементов :before и :after; автоматическая нумерация с использованием счетчиков; создание маркеров и отображение списков. Генерация содержимого Задание содержимого: свойство content Синтаксис: content: [<строка> | <uri> | <счетчик> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote]+ | inherit Начально: пустая строка Применимо: к псевдоэлементам :before и :after Наследуемо: нет Проценты: не используются Устройства: все Поддержка : Не поддерживается Не поддерживается Свойство content используется совместно с псевдоэлементами :before и :after для генерации содержимого. Оно задает текст содержимого для вставки и может принимать следующие значения: <строка> Вставляется данный текст. Вставляется содержимое ресурса с данным URI. <счетчик> Вставляется значение указанного счетчика или счетчиков. attr(X) Вставляется значение атрибута X субъекта селектора. open-quote Вставляется открывающая кавычка (см. свойство quotes). close-quote Вставляется закрывающая кавычка (см. свойство quotes). no-open-quote Не вставляется ничего, но счетчик вложения кавычек увеличивается на 1. no-close-quote Не вставляется ничего, но счетчик вложения кавычек уменьшается на 1. Место вставки текста определяется псевдоэлементом в селекторе данного элемента - :before означает вставку перед элементом, а :after после него. Способ вставки (текстовый, блочный или маркер) задается значением свойства display. Например, следующая декларация задает вывод текста "Конец документа" в центре последней строки экрана. BODY:after { content: "Конец документа"; display: block; margin-top: 2em; text-align: center; } Кавычки: свойство quotes Синтаксис: quotes: [<строка> <строка>]+ | none | inherit Начально: зависит от обозревателя Применимо: ко всем элементам Наследуемо: да Проценты: не используются Устройства: визуальные Поддержка : Не поддерживается Не поддерживается Свойство quotes задает символы кавычек и может принимать следующие значения: none Значения open-quote и close-quote свойства content не генерируют символов кавычек. [<строка> <строка>]+ Задает пары символов кавычек для значений open-quote и close-quote свойства content. Каждая пара соответствует очередному уровню вложения кавычек. В качестве кавычек обычно используются следующие символы Unicode: Код (16-ный) Вид Описание 0022 " двойная кавычка 0027 , одинарная кавычка (апостроф) 2039 ‹ открывающая одинарная угловая кавычка 203A › закрывающая одинарная угловая кавычка 00AB « открывающая двойная угловая кавычка 00BB » закрывающая двойная угловая кавычка 2018 ‘ открывающая одинарная кавычка 2019 ’ закрывающая одинарная кавычка 201A ‚ закрывающая нижняя одинарная кавычка 201C “ открывающая двойная кавычка 201D ” закрывающая двойная кавычка 201E „ закрывающая нижняя двойная кавычка В следующем примере задан внешний вид кавычек и указано, что они должны вставляться в начале и конце элемента Q. Q { quotes: "\201C" "\201D" "\2018" "\2019" } Q:before ( content: open-quote } Q:after ( content: close-quote } Автоматическая нумерация Счетчики Для автоматической нумерации в CSS используются счетчики. Счетчик - это идентификатор, которому присваиваются целые значения с помощью свойств counter-reset и counter-increment. Текущее значение счетчика может использоваться при генерации содержимого свойством content. По умолчанию, счетчик обозначается как counter(name) и его значением являются десятичные числа. Вместе с тем мы можем задавать стиль отображения значений счетчика в формате counter(name,style), где style может принимать любые значения свойства list-style-type. Отметим, что стиль none допустим: counter(name,none) генерирует пустую строку. Примеры: H1:before { content: counter(chapter, upper-latin) ". " } H2:before { content: counter(section, upper-roman) " - " } BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" } DIV.note:before { content: counter(notecnt, disc) " " } P:before { content: counter(pcount, none) } Элементы со значением none свойства display не изменяют значения счетчиков. С другой стороны, элементы со значением hidden свойства visibility изменяют их значения, как обычные элементы. Поддержка : Не поддерживается Не поддерживается Начальное значение счетчика: свойство counter-reset Синтаксис: counter-reset: [<идентификатор> <целое> ?]+ | none | inherit Начально: none Применимо: ко всем элементам Наследуемо: нет Проценты: не используются Устройства: все Поддержка : Не поддерживается Не поддерживается Свойство counter-reset задает начальные значения счетчиков. Его значением является список имен счетчиков, за каждым из которых может следовать необязательное целое число; если такое число указано, то оно становится значением счетчика, если нет, то счетчику присваивается значение 0. Если элемент и задает начальное значение счетчика, и использует его значение в свойстве content, то значение используется после присваивания. Данное свойство следует правилам каскадности. Поэтому следующие декларации H1 { counter-reset: chapter 1 } H1 { counter-reset: section -1 } зададут только значение счетчика section. Для задания начальных значений обоих счетчиков их нужно указать в одном правиле: H1 { counter-reset: chapter 1 section -1 } Изменение значения счетчика: свойство counter-increment Синтаксис: counter-increment: [<идентификатор> <целое> ?]+ | none | inherit Начально: none Применимо: ко всем элементам Наследуемо: нет Проценты: не используются Устройства: все Поддержка : Не поддерживается Не поддерживается Свойство counter-increment изменяет значения счетчиков.Его значением является список имен счетчиков, за каждым из которых может следовать необязательное целое число; если такое число указано, то оно добавляется к текущему значению счетчика, если нет, то значение счетчика увеличивается на 1. Целое число может быть и нулем, и отрицательным. Если использован счетчик, которому не присвоено начальное значение, то оно принимается равным нулю. Если элемент и сбрасывает, и изменяет значение счетчика, то оно сначала сбрасывается, а затем изменяется. Если элемент и изменяет значение счетчика, и использует его значение в свойстве content, то значение используется после изменения значения. Следующий пример показывает, как нумеровать главы текстом вида "Глава 1. ", а разделы - текстом вида "1.1 " и т. д. H1:before { counter-increment: chapter; /* Увеличить chapter на 1 */ counter-reset: section; /* Обнулить section */ content: "Глава " counter(chapter) ". "; } H2:before { counter-increment: section; /* Увеличить section на 1 */ content: counter(chapter) "." counter(section) " "; } Вперед  >>>  1  2  3   8  Комментарии к статье  8 8  Обсудить в чате

8  В тему Введение в таблицы стилей Селекторы, псевдоклассы и псевдоэлементы Значения свойств, каскадность и наследование Границы, заполнители и рамки Позиционирование элементов Визуализация элементов Цвет и фон Шрифты Текст Таблицы Страничные устройства вывода Звуковые таблицы стилей