OUJOOD.COM
Définoion de la propriété Quotes css
La propriété CSS quotes permet de spécifier les styles des guillemets utilisés pour les citations dans un document HTML.
Syntaxe générale de la propriété css Quotes
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.
Valeurs possibles de la propriété css Quotes
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.
Exemples pratiques d'utilisation de la propriété css Quotes
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.
Astuces et conseils d'utilisation de la propriété Quotes css
Voici quelques astuces et conseils pour utiliser efficacement la propriété quotes :
- Assurez-vous de choisir les guillemets appropriés en fonction de la langue et du style de votre contenu. Utiliser les guillemets typographiques pertinents peut améliorer la lisibilité et l'esthétique de vos citations.
- Vous pouvez personnaliser les guillemets en utilisant des caractères spéciaux ou des icônes pour créer des styles uniques. Veillez toutefois à ce que les caractères utilisés soient correctement encodés et pris en charge par les navigateurs.
- Utilisez les règles CSS spécifiques pour cibler les citations à différents niveaux d'imbrication. Vous pouvez appliquer des styles différents aux citations de premier niveau et aux citations imbriquées pour améliorer la hiérarchie visuelle.
- La propriété quotes est souvent utilisée en combinaison avec d'autres propriétés CSS pour styliser les citations, telles que la marge, le retrait, la police et la couleur du texte. Expérimentez avec ces propriétés pour obtenir le rendu souhaité.
- Vérifiez la compatibilité des guillemets utilisés avec les différentes polices de caractères. Certains caractères peuvent être affichés différemment selon les polices, ce qui peut affecter l'apparence de vos citations.
- Testez votre mise en page et vos styles sur différents navigateurs et appareils pour vous assurer d'une expérience cohérente pour les utilisateurs.
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
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>
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 11 | 8 | 1.5 | 5.1 | 4 |
Caractères de guillemets
| 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 !