Rassemble les éléments d'un tableau en une chaîne
Découvrez comment utiliser la propriété CSS quotes pour styliser les guillemets des citations dans votre document HTML( syntaxe générale, valeurs possibles, exemples pratiques d'utilisation et astuces et conseils pour optimiser l'utilisation de cette propriété.
La propriété CSS quotes permet de spécifier les styles des guillemets utilisés pour les citations dans un document HTML.
quotes: inner-opening-quote inner-closing-quote outer-opening-quote outer-closing-quote;
Valeurs par défaut | Non spécifié |
---|---|
Inherited: | oui |
Animable : | non En savoir plus sur l'animable |
Version: | CSS2 |
Syntaxe JavaScript: | object.style.quotes="'\253' '\273'" |
La propriété quotes est appliquée à l'élément blockquote
, qui est généralement utilisé pour représenter une citation dans un document HTML.
Les valeurs de la propriété quotes sont spécifiées entre guillemets et sont séparées par des espaces. Les guillemets intérieurs (inner-opening-quote et inner-closing-quote) définissent les styles des guillemets utilisés pour les citations dans les blocs de citation imbriqués. Les guillemets extérieurs (outer-opening-quote et outer-closing-quote) définissent les styles des guillemets utilisés pour les citations dans les blocs de citation principaux.
Les valeurs possibles pour la propriété quotes sont des paires de chaînes de caractères entourées de guillemets doubles ou simples. Vous pouvez utiliser les valeurs par défaut (guillemets droits) ou spécifier des guillemets typographiques ou des guillemets personnalisés.
blockquote { quotes: "«" "»" "‘" "’"; }
Dans cet exemple, nous utilisons des guillemets typographiques pour les citations, avec les guillemets français « et » pour les guillemets intérieurs et les guillemets anglais ‘ et ’ pour les guillemets extérieurs.
Voici quelques exemples d'utilisation de la propriété quotes css:
blockquote { quotes: "«" "»" "‘" "’"; }
Dans cet exemple, la citation est stylisée avec des guillemets typographiques.
Voici quelques astuces et conseils pour utiliser efficacement la propriété quotes :
En utilisant judicieusement la propriété quotes, vous pouvez ajouter une touche visuelle distinctive à vos citations et améliorer la lisibilité de votre contenu.
J'espère que ce tutoriel vous a été utile pour comprendre la propriété CSS quotes et comment l'utiliser efficacement dans vos projets. Profitez de l'opportunité pour expérimenter avec différentes valeurs et styles de guillemets afin de trouver celui qui correspond le mieux à votre esthétique.
Exemple : Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>La Propriété quotes css</title> <style> #a { quotes: "'" "'"; } #b { quotes: """ "'" "'" """; } #c { quotes: "\00AB" "\2018" "\2019" """; } </style> </head> <body> <h1>Les Propriété citations css</h1> <p><q id="a">Ceci est une citation.</q></p> <p><q id="b">Il s'agit d'une <q>citation</q> à l'intérieur d'une citation.</q></p> <p><q id="c">Ceci est une <q>citation</q> à l'intérieur d'une citation.</q></p> </body> </html>
Explorateur | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
Verssion | 11 | 8 | 1.5 | 5.1 | 4 |
Résultat | Description | Numéro de l'entité |
---|---|---|
" | guillemet double | \0022 |
' | guillemet simple | \0027 |
‹ | guillemet simple, angle gauche | \2039 |
› | guillemet simple, angle droit | \203A |
« | devis double, angle gauche | \00AB |
» | guillemet double, angle droit | \00BB |
‘ | guillemet gauche (simple haut-6) | \2018 |
’ | guillemet droit (simple haut-9) | \2019 |
“ | guillemet gauche (double haut-6) | \201C |
” | guillemet droit (double haut-9) | \201D |
„ | guillemet double (double bas-9) | \201E |
Maintenant, à vous de jouer et d'embellir vos citations avec des guillemets élégants et appropriés !