Свойство CSS quotes
Используйте свойство CSS quotes для установки кавычек в содержимом. Значения, символы кавычек и примеры.
Свойство CSS quotes определяет, какие символы кавычек браузер вставляет, когда свойство content запрашивает open-quote или close-quote. Проще говоря, оно позволяет заменить кавычки по умолчанию любыми символами — и даже управлять тем, какие кавычки используются на каждом уровне вложенной цитаты.
На этой странице рассматривается назначение свойства, его синтаксис и значения, наиболее полезные символы кавычек (с их юникодными экранированиями), а также запускаемые примеры для одноуровневых и вложенных кавычек.
Как работает quotes
Свойство quotes само по себе не добавляет кавычки на страницу. Оно только объявляет какие символы следует использовать. Кавычки фактически отрисовываются псевдоэлементами ::before и ::after, для которых свойство content задаётся ключевыми словами open-quote и close-quote:
q {
quotes: "«" "»"; /* which marks to use */
}
q::before {
content: open-quote; /* draw the opening mark */
}
q::after {
content: close-quote; /* draw the closing mark */
}Таким образом, три составляющих всегда работают вместе: quotes задаёт символы, а два псевдоэлемента их размещают. Без ключевых слов content ничего не отобразится, что бы ни было указано в quotes.
Символы можно задавать буквально ("«" "»") или с помощью CSS-юникодного экранирования кодовой точки ("\00AB" "\00BB"). Форма с экранированием удобна, когда кодировка таблицы стилей неизвестна или символ сложно ввести.
Когда использовать
- Оформление кавычек в
<q>или<blockquote>в соответствии с языковыми соглашениями (немецкие„…", французские« … »и т.д.). - Применение кавычек к любому элементу — не только к
<q>— путём сочетанияquotesс содержимымopen-quote/close-quote. - Задание отдельных кавычек для вложенных цитат (см. пример с четырьмя значениями ниже).
Кавычки по умолчанию, используемые <q> и <blockquote>, зависят от пользовательского агента и атрибута lang документа. Задавайте quotes явно, если нужны одинаковые кавычки во всех браузерах.
| Начальное значение | none |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Да. |
| Анимируемо | Нет. |
| Версия | CSS2 |
| DOM Синтаксис | element.style.quotes = "'\2018' '\2019'"; |
Синтаксис
Синтаксис CSS quotes
quotes: none | [<string> <string>]+ | auto | initial | inherit;Значение — это либо ключевое слово none (или auto), либо одна или несколько пар строк. Каждая пара — открывающая и закрывающая кавычка; первая пара соответствует самому внешнему уровню цитирования, вторая — первому вложенному уровню, и т.д.
Пример свойства quotes:
Пример кода CSS quotes
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
.example {
quotes: "\00AB" "\00BB";
}
.example::before {
content: open-quote;
}
.example::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Quotes property example</h2>
<p>
<q class="example">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</q>
</p>
</body>
</html>Результат
Пример свойства quotes с четырьмя значениями:
Пример вложенных кавычек CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
quotes: "\0022" "\0022" "\00AB" "\00BB";
}
.example::before {
content: open-quote;
}
.example::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Quotes property example</h2>
<p>
<q class="example">
Lorem Ipsum is simply <q>dummy</q> text of the printing and typesetting industry.
</q>
</p>
</body>
</html>Здесь внешний <q> использует прямые двойные кавычки (\0022), а внутренний — угловые («»), поскольку вторая пара строк применяется к первому вложенному уровню.
Значения
| Значение | Описание | Попробуйте |
|---|---|---|
| none | Значения "open-quote" и "close-quote" свойства content не создают кавычек. | Попробуйте » |
[<string> <string>]+ | Задаёт символы кавычек. Первый — открывающая кавычка, второй — закрывающая. Первая пара представляет внешний уровень цитирования, вторая пара — для первого вложенного уровня. | Попробуйте » |
| initial | Устанавливает значение свойства по умолчанию. | Попробуйте » |
| inherit | Наследует значение свойства от родительского элемента. |
Символы кавычек
| Символ | Описание | Номер для ввода |
|---|---|---|
| " | двойная кавычка | \0022 |
| ' | одинарная кавычка | \0027 |
| ‹ | одиночная левая угловая кавычка | \2039 |
| › | одиночная правая угловая кавычка | \203A |
| « | двойная левая угловая кавычка | \00AB |
| » | двойная правая угловая кавычка | \00BB |
| ` | левая кавычка (одинарная высокая-6) | \2018 |
| ՛ | правая кавычка (одинарная высокая-9) | \2019 |
| " | левая кавычка (двойная высокая-6) | \201C |
| " | правая кавычка (двойная высокая-9) | \201D |
| „ | двойная кавычка (двойная низкая-9) | \201E |
Связанные свойства
- content — устанавливает
open-quote/close-quote(и любое генерируемое содержимое) на псевдоэлементах. - ::before — вставляет открывающую кавычку перед содержимым элемента.
- ::after — вставляет закрывающую кавычку после содержимого элемента.