quotes

CSS quotes Property

The quotes property sets the type of quotation marks for the content.

The pseudo-elements ::before and ::after are used to insert the content marks at the beginning and at the end of a quote. These pseudo-elements are defined by the content property.

There are different types of quotation marks, the popular ones are the straight and the curly quotation marks.

Initial Value	Not specified.
Applies to	All elements.
Inherited	Yes.
Animatable	No.
Version	CSS2
DOM Syntax	Object.style.quotes = «‘\2018’ ‘\2019′»;

Syntax

quotes: none | string | initial | inherit;

Example of the quotes property:

html> html> head> title>Title of the document title> style> .example < quotes: "\00AB" "\00BB"; > 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>

Result

Example of the quotes property with four values:

html> html> head> title>Title of the document title> style> .example < quotes: "\0022" "\0022" "\00AB" "\00BB"; > 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>

Values

Value	Description	Play it
none	The «open-quote» and «close-quote» values of the content property do not produce quotation marks.	Play it »
[ ]+	Specifies the quotation mark. The first is the opening mark the second is the closing mark. The first pair represents the outer level of quotation, the second pair is for the first nested level.	Play it »
initial	Makes the property use its default value.	Play it »
inherit	Inherits the property from its parents element.

Quotation Mark Characters

Marks	Description	Entry Number
«	double quote	\0022
‘	single quote	\0027
‹	single, left angle quote	\2039
›	single, right angle quote	\203A
«	double, left angle quote	\00AB
»	double, right angle quote	\00BB
`	left quote (single high-6)	\2018
՛	right quote (single high-9)	\2019
“	left quote (double high-6)	\201C
”	right quote (double high-9)	\201D
„	double quote (double low-9)	\201E

Browser support

Practice Your Knowledge

___ is (are) used to insert the content marks at the beginning and at the end of a quote.

The pseudo elements first-letter The pseudo-elements ::before and ::after The pseudo elements first-line

Источник

quotes

Устанавливает тип кавычек, который применяется в тексте документа. В каждом языке существуют свои традиции для обозначения кавычек, свойство quotes позволяет задать вид их отображения по всему тексту и установить, таким образом, его единообразное оформление. Добавление кавычек происходит автоматически для содержимого контейнера , а также для текста, к которому применяется стилевое свойство content со значением open-quote (открывающая кавычка) или close-quote (закрывающая кавычка).

Синтаксис

quotes: «левая кавычка» «правая кавычка» | none | inherit

Значения

В качестве значения используется символ текста (например, quotes: ««» «»» ) или символ юникода. Некоторые из них перечислены в табл. 1.

Табл. 1. Виды кавычек

Вид	Спецкод HTML	Юникод	Описание
«	"	\0022	Двойная кавычка, применяется обычно в моноширинных шрифтах, для обозначения символа дюйма, а также угловых секунд.
‘	'	\0027	Апостроф. Символ угловых минут, в латинице применяется для обозначения мягкого знака (popalas’ lisa).
«	« или «	\00ab	Открывающая двойная угловая кавычка.
»	» или »	\00bb	Закрывающая двойная угловая кавычка.
‘	‘	\2018	Открывающая одинарная кавычка.
’	’	\2019	Закрывающая одинарная кавычка.
“	“	\201c	Открывающая двойная кавычка в англоязычных текстах или закрывающая для русского языка.
”	”	\201d	Закрывающая двойная кавычка в англоязычных текстах.
„	„	\201e	Открывающая двойная кавычка. Применяется в русском языке.

none Кавычки не добавляются. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa 5.1 Fx

       
Станислав Лец утверждал: Чаще всего выход там, где был вход.
  

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства quotes

Источник

quotes

Устанавливает тип кавычек, который применяется в тексте документа. В каждом языке существуют свои традиции для обозначения кавычек, свойство quotes позволяет задать вид их отображения по всему тексту и установить, таким образом, его единообразное оформление. Добавление кавычек происходит автоматически для содержимого контейнера , а также для текста, к которому применяется стилевое свойство content со значением open-quote (открывающая кавычка) или close-quote (закрывающая кавычка).

Синтаксис

quotes: «левая кавычка» «правая кавычка» | none | inherit

Значения

В качестве значения используется символ текста (например, quotes: ««» «»» ) или символ юникода. Некоторые из них перечислены в табл. 1.

Табл. 1. Виды кавычек

Вид	Спецкод HTML	Юникод	Описание
«	"	\0022	Двойная кавычка, применяется обычно в моноширинных шрифтах, для обозначения символа дюйма, а также угловых секунд.
‘	'	\0027	Апостроф. Символ угловых минут, в латинице применяется для обозначения мягкого знака (popalas’ lisa).
«	« или «	\00ab	Открывающая двойная угловая кавычка.
»	» или »	\00bb	Закрывающая двойная угловая кавычка.
‘	‘	\2018	Открывающая одинарная кавычка.
’	’	\2019	Закрывающая одинарная кавычка.
“	“	\201c	Открывающая двойная кавычка в англоязычных текстах или закрывающая для русского языка.
”	”	\201d	Закрывающая двойная кавычка в англоязычных текстах.
„	„	\201e	Открывающая двойная кавычка. Применяется в русском языке.

none Кавычки не добавляются. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa 5.1 Fx

       
Станислав Лец утверждал: Чаще всего выход там, где был вход.
  

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства quotes

Источник

quotes

CSS-свойство, позволяющее задать вид кавычек на сайте или в отдельном блоке. В каждом языке принято использовать определённый вид кавычек. Например, в русском используются кавычки-ёлочки «», а в английском кавычки-лапки “”.

Указанный в значении вид кавычек будет автоматически выставляться вокруг текста, обёрнутого в тег , или при указании у свойства content псевдоэлементов : : before и : : after значений open — quote или close — quote .

Пример

Скопировать ссылку «Пример» Скопировано

Этому свойству можно указать сразу несколько значений: 1 открывающая кавычка, 2 закрывающая кавычка, 3 открывающая кавычка вложенной цитаты, 4 закрывающая кавычка вложенной цитаты:

 body  quotes: "«" "»" "„" "“";> span::before  content: open-quote;> span::after  content: close-quote;> body  quotes: "«" "»" "„" "“"; > span::before  content: open-quote; > span::after  content: close-quote; >    Скопировать Скопировано Не удалось скопировать   

   Скажи церемония по слогам, — попросила она.  p> q>Скажи span>церемонияspan> по слогамq>, — попросила она. p>    Скопировать Скопировано Не удалось скопировать   

В итоге текст будет выглядеть так:

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 div  quotes: none; quotes: auto;> div  quotes: none; quotes: auto; >    Скопировать Скопировано Не удалось скопировать   

 div  quotes: "«" "»"; quotes: "«" "»" "‹" "›";> div  quotes: "«" "»"; quotes: "«" "»" "‹" "›"; >    Скопировать Скопировано Не удалось скопировать   

none — ключевое слово, сбрасывает любые настройки, кавычки не будут отображаться.

auto — кавычки будут соответствовать языку документа.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Попробуйте скопировать текст из интерактивного примера выше и вставить куда-нибудь, например, в блокнот. Во вставленном тексте не будет кавычек. Всё потому что их не существует физически в тексте, они расставлены при помощи стилей. Об этой особенности стоит помнить.

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Это свойство может быть очень полезно когда вы разрабатываете большой сайт, который будут наполнять контентом другие люди. Чтобы созданный дизайн соблюдался во всех мелочах вы можете принудительно прописать тот вид кавычек, который будет расставляться в текстах. Но при других обстоятельствах это свойство редко пригождается 🤷‍♀️

Источник