Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Syntaxe
L'objectif fondamental du langageCascading Style Sheets (CSS) est de permettre à un moteur de navigation d'associer des fonctionnalités spécifiques, comme les couleurs, le positionnement ou les décorations à des éléments de la page. Lasyntaxe CSS reflète cet objectif et ses éléments de base sont :
- Lapropriété est un identifiant, c'est-à-dire unnom compréhensible par un être humain, qui définit quelle fonctionnalité est ciblée.
- Lavaleur décrit comment la fonctionnalité doit être gérée par le moteur. Chaque propriété a un ensemble de valeurs valides, définies par une grammaire formelle, ainsi qu'une signification sémantique, implémentées par le moteur du navigateur.
Déclarations CSS
La définition des propriétés CSS sur des valeurs spécifiques est la fonction principale du langage CSS. Une paire de propriété et de valeur s'appelle unedéclaration, et tout moteur CSS calcule quelles déclarations s'appliquent à chaque élément d'une page afin de la mettre en page de manière appropriée et de la styliser.
Les propriétés et les valeurs sont insensibles à la casse par défaut dans CSS. La paire est séparée par deux-points, ':' (U+003A COLON), et les espaces blancs avant, entre et après les propriétés et les valeurs, mais pas nécessairement à l'intérieur, sont ignorés.
Il existe plus de100 propriétés différentes en CSS et un nombre quasi infini de valeurs différentes. Toutes les paires de propriétés et de valeurs ne sont pas autorisées et chaque propriété définit les valeurs valides. Lorsqu'une valeur n'est pas valide pour une propriété donnée, la déclaration est considérée commeinvalide et est totalement ignorée par le moteur CSS.
Blocs de déclaration CSS
Les déclarations sont regroupées enblocs, c'est-à-dire dans une structure délimitée par une accolade d'ouverture, '{' (U+007B LEFT CURLY BRACKET), et de fermeture, '}' (U +007D CROCHET DROITE). Les blocs peuvent parfois être imbriqués, les accolades ouvrantes et fermantes doivent donc correspondre.
Ces blocs sont naturellement appelésblocs de déclaration et les déclarations à l'intérieur sont séparées par un point-virgule, ';' (U+003B SEMICOLON). Un bloc de déclaration peut être vide, c'est-à-dire contenir une déclaration nulle. Les espaces blancs autour des déclarations sont ignorés. La dernière déclaration d'un bloc n'a pas besoin d'être terminée par un point-virgule, bien que faire ainsi soit considéré comme une bonne pratique (cela évite d'oublier de l'ajouter lors de l'extension du bloc avec une autre déclaration).
Un bloc de déclaration CSS est visualisé dans le schéma ci-dessous.
Note :Le contenu d'un bloc de déclaration CSS, c'est-à-dire une liste de déclarations séparées par des points-virgules, sans les accolades d'ouverture et de fermeture, peut être placé dans un attribut HTMLstyle.
Ensembles de règles CSS
Si les feuilles de style ne pouvaient appliquer qu'une déclaration à chaque élément d'une page Web, elles seraient plutôt inutiles. Le véritable objectif est d'appliquer différentes déclarations à différentes parties du document.
Le CSS permet cela en associant des conditions à des blocs de déclarations. Chaque bloc de déclaration (valide) est précédé d'un ou plusieurssélecteurs séparés par des virgules, qui sont des conditions sélectionnant certains éléments de la page. Ungroupe de sélecteurs et un bloc de déclarations associé, ensemble, forment ce qu'on appelle unerègle (en anglais, le terme formel estruleset, maisrule est également usité).
Une règle CSS est visualisé dans le diagramme ci-dessous.
Comme un élément de la page peut correspondre à plusieurs sélecteurs, et donc par plusieurs règles contenant potentiellement plusieurs fois une même propriété, avec des valeurs différentes, la norme CSS définit laquelle a priorité sur l'autre et doit être appliquée : c'est ce qu'on appelle lacascade.
Note :Même si on peut utiliser une règle utilisant un groupe de sélecteurs afin d'éviter de dupliquer une même règle pour chaque sélecteur distinct de ce groupe, cela n'a pas exactement le même effet. En effet, si on utilise un groupe de sélecteurs contenant un sélecteur invalide, c'est tout le groupe qui sera invalide et la règle sera ignoré. Si on utilise plusieurs règles pour chacun des sélecteurs individuels, seule celle du sélecteur invalide ne sera pas appliquée.
Instructions CSS
Les ensembles de règles sont les principaux éléments constitutifs d'une feuille de style, qui se compose souvent d'une longue liste de ceux-ci. Mais il y a d'autres informations qu'on peut transmettre dans la feuille de style, comme le jeu de caractères, d'autres feuilles de style externes à importer, les descriptions des polices de caractères ou des compteurs de liste et bien d'autres. On utilisera alors d'autres types d'instructions spécifiques.
Uneinstruction est un bloc de construction qui commence par n'importe quel caractère autre qu'un espace et se termine à la première accolade ou point-virgule fermant (en dehors d'une chaîne, sans échappement et qui ne soit pas inclus dans une autre paire d'accolades ({}), de parenthèses (()), ou de crochets ([])).
Il existe deux types de déclarations :
- Lesrègles qui associent une collection de déclarations CSS à une condition décrite par unsélecteur.
- Lesrègles @ qui commencent par une arobase, '
@' (U+0040 COMMERCIAL AT), suivie d'un identifiant et se poursuivant jusqu'à la fin de l'instruction, c'est-à-dire jusqu'à au prochain point-virgule (;) en dehors d'un bloc, ou à la fin du bloc suivant. Chaque type derègles @, défini par l'identifiant, peut avoir sa propre syntaxe interne, et bien sûr sa sémantique. Ils sont utilisés pour transmettre des informations de métadonnées (comme@charsetou@import), des informations conditionnelles (comme@mediaou@document), ou des informations descriptives (comme@font-face).
Toute instruction qui n'est pas une règle ou une règle @ est invalide et ignorée.
Instructions imbriquées
Il existe un autre groupe d'instructions : lesinstructions imbriquées. Ce sont des instructions qui peuvent être utilisées dans un sous-ensemble spécifique de règles @ : lesrègles de groupe conditionnelles. Ces déclarations ne s'appliquent que si une condition spécifique est satisfaite. Par exemple, le contenu d'une règle @@media est appliqué uniquement si l'appareil sur lequel le navigateur s'exécute correspond à la condition exprimée.