Кавычки

Кавычки

Может понадобиться, чтобы в документе или в какой-то его части кавычки отображались не так, как обычно, а в зависимости от стиля и содержимого. С помощью 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.

Листинг 9.2. Кавычки

<html>

<head>

<title>Глава 9</title>

</head>

<body>

<p><q>Этот текст выделен кавычками.</q>

</body>

</html>

В результате его обработки браузером вы получите такой текст:

«Этот текст выделен кавычками.»

Если ту же таблицу стилей применить к HTML-документу, приведенному в листинге 9.3, то получим такую строку:

«Trondere gra?ter na?r <Vinsjan pa? kaia> blir deklamert.»

Листинг 9.3. Кавычки

<html>

<head>

<title>Глава 9</title>

</head>

<body>

<p><q>Trondere gra?ter na?r <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, предварительно поставив знак .

Таблица 9.1. Кавычки

Например:

quotes: """ """ «2039» «203A»

Данный текст является ознакомительным фрагментом.