Свойство CSS quotes
Use the quotes CSS property to set quotation marks to the content. See property values, quotation mark characters and examples.
Свойство quotes задаёт тип кавычек для содержимого.
Псевдоэлементы ::before и ::after используются для вставки знаков кавычек в начало и конец цитаты. Эти псевдоэлементы определяются свойством content.
Браузеры применяют стандартные кавычки к элементам <q> и <blockquote>, но свойство quotes позволяет настроить их по своему усмотрению. Вы можете применять пользовательские кавычки к любому элементу.
Существуют различные виды кавычек, наиболее распространёнными являются прямые и фигурные кавычки.
info
Кавычки зависят от пользовательского агента.
| Начальное значение | none |
|---|---|
| Применяется к | Ко всем элементам. |
| Наследуется | Да. |
| Анимация | Нет. |
| Версия | CSS2 |
| Синтаксис DOM | element.style.quotes = "'\2018' '\2019'"; |
Синтаксис
Синтаксис CSS quotes
quotes: none | string | initial | inherit;Пример свойства 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 quotes внутри кавычек
<!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>Значения
| Значение | Описание | Запустить |
|---|---|---|
| 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 |
Практика
Какие функции выполняет свойство 'quotes' в CSS?