Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

quotes

Свойство CSS quotes используется для изменения внешнего вида (стиля, типа) кавычек элемента. По умолчанию браузеры устанавливают кавычки только для тега <Q>, причем их вид может отличаться в разных браузерах. Также вид кавычек может зависеть от языка, для которого предназначается страница (русский, английский и т.д.).

C помощью quotes можно указать конкретный стиль этих кавычек, а если использовать его в паре со свойством content, то и устанавливать сами кавычки для любых других HTML-элементов. Более того, применяя дополнительно псевдокласс :lang можно задавать стиль кавычек для разных языков.

Тип свойства

Назначение: контент.

Применяется: ко всем элементам.

Наследуется: да.

Значения

Значением свойства quotes указание вида кавычек для элемента одним из следующих способов.

  • ['левая кавычка' 'правая кавычка']+ — указание через пробел одной или нескольких пар кавычек в «готовом» виде или формате Юникода ISO 10646 (см. таблицу ниже). Каждая указанная кавычка сама берется в обязательные служебные одинарные (' ') или двойные (" ") кавычки. Причем, если указание кавычек происходит в их «готовом» виде, то они не могут быть такими же, как служебные. Когда указывается несколько пар кавычек, то первая пара будет применена к элементу, если у него нет ни одного аналогичного элемента-предка, вторая пара — к элементу, имеющему одного такого же предка, третья пара — к элементу, имеющему два таких же предка и т.д.
  • none — отменяет любые кавычки для элемента.
  • inherit — наследует значение quotes от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: зависит от браузера.

Виды кавычек и их описание.
ВидКод Юникод ISO 10646Описание
"\0022Двойная кавычка ASCII.
'\0027Апостроф, одиночная кавычка ASCII.
‹\2039Левая одиночная угловая кавычка.
›\203aПравая одиночная угловая кавычка.
«\00abЛевая двойная угловая кавычка.
»\00bbПравая двойная угловая кавычка.
‘\2018Левая одиночная кавычка [single high-6].
’\2019Правая одиночная кавычка [single high-9].
“\201cЛевая двойная кавычка [double high-6].
”\201dПравая двойная кавычка [double high-9].
„\201eНижняя двойная кавычка LOW-9 [double low-9].

Синтаксис

quotes: ['левая кавычка' 'правая кавычка']+ | none | inherit

Пример CSS: использование quotes

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство quotes</title>
  <style type="text/css">
   q {
    quotes: "'" "'" "«" "»" '"' '"'; /* типы кавычек */
   }
  </style>
 </head>
 <body>
  <p><q>Первый тип кавычек.</q></p>
  <p>
   <q>
    Первый тип открывающей
    <q>
     второй тип открывающей
     <q>
      третий тип открывающей и закрывающей кавычек
     </q>
     второй тип закрывающей
    </q>
    первый тип закрывающей.
   </q>
  </p>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS quotes.

Использование свойства CSS quotes

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:НетДаНетДаДаНет
CSS по алфавиту
CSS по назначению