Propriété CSS quotes

La propriété quotes définit le type de guillemets pour le contenu.

Les pseudo-éléments ::before et ::after sont utilisés pour insérer les marques de contenu au début et à la fin d'un devis. Ces pseudo-éléments sont définis par la propriété content.

Il existe différents types de guillemets, les plus populaires sont les guillemets droits et bouclés.

Les guillemets dépendent de l'agent utilisateur.

Valeur initiale	Non spécifiée.
Appliquée à	Tous les éléments.
Héritée	Oui.
Animable	Non.
Version	CSS2
Syntaxe DOM	Object.style.quotes = "'\2018' '\2019'";

Syntaxe

quotes: none | string | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document </title>
    <style>
      .example {
      quotes: "\00AB" "\00BB";
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété quotes</h2>
    <p><q class="example">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</q></p>
  </body>
</html>

Essayez-vous-même!

Voyons un autre exemple de la propriété quotes:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .example {
      quotes:  "\0022" "\0022" "\00AB" "\00BB";
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété quotes</h2>
    <p><q class="example">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</q></p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
none	Les valeurs "open-quote" et "close-quote" de la propriété content ne produisent pas de guillemets.
[<string> <string>]+	Spécifie le guillemet. Le premier est la marque d'ouverture, le second est la marque de fermeture. La première paire représente le niveau externe de cotation, la seconde paire correspond au premier niveau imbriqué.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.

Caractères de Guillemets

Marques	Description	Numéro d'entrée
"	double citation	\0022
'	simple citation	\0027
‹	citation simple, angle gauche	\2039
›	citation simple, angle droit	\203A
«	double, citation d'angle gauche	\00AB
»	double, citation à angle droit	\00BB
`	citation de gauche (single high-6)	\2018
՛	citation de droite (single high-9)	\2019
“	citation de gauche (double high-6)	\201C
”	citation de droite (double high-9)	\201D
„	double citation (double low-9)	\201E