oujood.com

Comment utiliser la propriété quotes en CSS pour des citations attrayantes

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é.

chercher |

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éfautNon 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é.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion1181.55.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 !



Voir aussi nos tutoriel :

fonction implode

Rassemble les éléments d'un tableau en une chaîne

font-variant

Spécifie si oui ou non un texte doit être affiché dans un small-caps police

Balise meta données meta

Définit les méta données d'un document HTML