HTML, XHTML и CSS на 100%
Шрифт:
content: "Рисунок " counter(imagenum) ". " attr(alt)
В документ может быть вставлена обычная текстовая строка, которая обязательно должна быть заключена в кавычки. Для примера добавим перед всеми абзацами надпись Абзац::
p:before { content "Абзац: " }
Вы также можете вставлять в генерируемое содержимое переходы на новую строку с помощью последовательности \A. Вставка данной последовательности приводит
Скорректируем наш пример:
p:before {
content: "Абзац:\A"
}
Теперь перед каждым абзацем будет добавлена строка Абзац:, а сам абзац будет начинаться со следующей строки.
Рассмотрим вставку строки, которая является значением параметра элемента. На первый взгляд может показаться непонятным, где это можно использовать. Такая функция применяется, например, для вставки значения атрибута alt элемента IMG:
img:before { content: attr(alt) }
Если изображение не будет выведено, то читатель, по крайней мере, увидит текст атрибута alt, то есть название или описание рисунка.
Хорошо разобраться с данным свойством помогут только эксперименты. Не пожалейте на них времени, и при разработке и обслуживании страниц оно вам с лихвой окупится.
Кавычки
Может понадобиться, чтобы в документе или в какой-то его части кавычки отображались не так, как обычно, а в зависимости от стиля и содержимого. С помощью CSS вы можете определять, каким образом браузер будет отображать кавычки. Свойство quotes задает пару «» для каждого уровня вложенности цитат, а свойство content предоставляет доступ к этим кавычкам и вставляет их до и после цитаты.
Рассмотрим определения кавычек с помощью свойства quotes. Лучше всего это можно понять из примера. Попробуйте применить следующую таблицу стиля:
/* Определение пар кавычек для двух уровней в двух языках */
Q:lang(ru) { quotes: ‘"’ ‘"’ "’" "’" }
Q:lang(no) { quotes: "«" "»" "<" ">" }
/* Вставка кавычек до и после содержимого элемента Q */
Q:before { content: open-quote }
Q:after { content: close-quote }
к HTML-документу, представленному в листинге 9.2.
<html>
<head>
<title>Глава 9</title>
</head>
<body>
<q>Этот текст выделен кавычками.</q>
</body>
</html>
В результате его обработки браузером вы получите такой текст:
«Этот текст выделен кавычками.»
Если ту же таблицу стилей применить
«Trondere grater nar <Vinsjan pa kaia> blir deklamert.»
<html>
<head>
<title>Глава 9</title>
</head>
<body>
<q>Trondere grater nar <q>Vinsjan pa kaia</q> blir deklamert.</q>
</body>
</html>
Как вы, наверное, заметили из примера, кавычки вставляются в соответствующие места документа благодаря значениям open-quote и close-quote, принимаемым свойством content. Каждое вхождение open-quote или close-quote в зависимости от глубины вложения заменяется одной из строк, принадлежащих значению свойства quotes.
Open-quote указывает на первую из двух кавычек, а close-quote – на вторую. Тип используемых кавычек зависит от уровня их вложенности.
Вы также можете задавать кавычки, используя один из шестнадцатеричных кодов, приведенных в табл. 9.1, предварительно поставив знак \.
Например:
quotes: """ """ «\2039» «\203A»
9.3. Автоматическая нумерация и списки
В CSS существует два свойства для управления нумерацией: counter-increment и counter-reset. Счетчики, которые определены данными свойствами, используются функциями counter и counters свойства content. Рассмотрим подробно свойства для управления нумерацией.
• counter-increment – с помощью этого свойства вы можете задать одно или несколько имен счетчиков, после каждого из которых может быть указано целое число. Оно определяет величину, на которую увеличивается содержимое счетчика при каждом его использовании. По умолчанию значение счетчика увеличивается на единицу. Вы также можете использовать отрицательные целые числа.
• counter-reset – также содержит список из одного или нескольких имен счетчиков, после каждого из которых может быть указано целое число. Оно задает значение, которое сначала присваивается счетчику. По умолчанию значение равно 0.
Для примера рассмотрим таблицу стилей, которая нумерует главы и разделы таким образом:
• Глава 1:
1.1;
1.2.
• Глава 2:
2.1;
2.2 и т. д.
Код таблицы следующий:
h1:before {
content: "Глава " counter(chapter) ". ";
counter-increment: chapter; /* Добавление 1 к номеру главы */
counter-reset: section; /* Установка значения 0 для раздела */
}
h2:before {