Свойство CSS quotes

Свойство quotes задаёт тип кавычек для содержимого.

Псевдоэлементы ::before и ::after используются для вставки знаков кавычек в начало и конец цитаты. Эти псевдоэлементы определяются свойством content.

Браузеры применяют стандартные кавычки к элементам <q> и <blockquote>, но свойство quotes позволяет настроить их по своему усмотрению. Вы можете применять пользовательские кавычки к любому элементу.

Существуют различные виды кавычек, наиболее распространёнными являются прямые и фигурные кавычки.

INFO

Кавычки зависят от пользовательского агента.

Начальное значение	none
Применяется к	Ко всем элементам.
Наследуется	Да.
Анимация	Нет.
Версия	CSS2
Синтаксис DOM	element.style.quotes = "'\2018' '\2019'";

Синтаксис

Синтаксис CSS quotes

css

quotes: none | string | initial | inherit;

Пример свойства quotes:

Пример кода CSS quotes

html

<!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>

Try it Yourself »

Результат

CSS quotes внутри кавычек

Пример свойства quotes с четырьмя значениями:

Пример CSS quotes внутри кавычек

html

<!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>

Try it Yourself »

Значения

Значение	Описание	Запустить
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

Практика

json

{
    "question": "Какие функции выполняет свойство 'quotes' в CSS?",
    "options": [
        {
            "statement": "Задаёт тип кавычек для вложенных цитат.",
            "correct": true
        },
        {
            "statement": "Определяет язык, используемый в коде CSS.",
            "correct": false
        },
        {
            "statement": "Используется для добавления кавычек к HTML-элементам.",
            "correct": true
        },
        {
            "statement": "Изменяет цвет кавычек.",
            "correct": false
        },
        {
            "statement": "Управляет отображением кавычек в элементах blockquote"
            "correct": true
        }
    ]
}

Свойство CSS quotes ​

Синтаксис ​

Пример свойства quotes: ​

Результат ​

Пример свойства quotes с четырьмя значениями: ​

Значения ​

Символы кавычек ​

Практика ​