CSS свойство quotes

CSS свойства

Определение и применение

CSS свойство quotes определяет тип кавычек для встраиваемых цитат.

Первые два значения определяют первый уровень встраивания цитаты, следующие два значения указывают на следующий уровень вложенности и так далее:

Правильное использование свойства quotes.

Используя псевдокласс :lang(код языка), вы можете указать определённый тип кавычек для определенного языка.

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
quotes11.01.54.05.18.0*12.0

CSS синтаксис:

quotes:"none | string | initial | inherit";

JavaScript синтаксис:

object.style.quotes = ""«" "»""

Значения свойства

ЗначениеОписание
noneУказывает, что значения "open-quote" (открывающаяся кавычка) и "close-quote"(закрывающаяся кавычка) свойства content не будет создавать никаких кавычек
string string +Указывает, какие кавычки использовать (допускается использование кавычек, как символов Юникод(hex), например: "\00AB"). Первые два значения определяют первый уровень встраивания цитаты, следующие два значения указывают на следующий уровень вложенности и т. д. Добавление типа кавычек происходит автоматически для тега <q> и для текста, к которому применяются значения "open-quote" (открывающаяся кавычка) и "close-quote"(закрывающаяся кавычка) свойства content.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства quotes в CSS</title>
<style> 
* {
quotes : "«" "»" "‹" "›"; /* используя универсальный селектор устанавливаем тип кавычек для первого и второго уровня вложенности (для всех элементов) */
}
p:before {content : open-quote;}  /* используя псевдоэлемент :before добавляем перед элементом <p> открывающиеся кавычки */
p:after {content : close-quote;}  /* используя псевдоэлемент :after добавляем после элемента <p> закрывающиеся кавычки */
</style>
</head>
	<body>
		<q>Обычная цитата<q><br>
		<q>Это <q>ЦИТАТА</q> внутри цитаты</q>
		<p>Параграф, к которому, используя псевдоклассы добавлены кавычки.</p>
	</body>
</html>
Пример добавления и изменения кавычек в тексте (свойство CSS quotes).
Пример добавления и изменения кавычек в тексте (свойство CSS quotes).
CSS свойства