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>

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>

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

Support de Navigateurs

11.0+ 12.0+ 1.5+ 9.0+ 4.0+


Trouvez-vous cela utile?

Articles Associées