mozilla
Vos résultats de recherche

    Syntaxe

    L'objectif de base du langage Cascading Stylesheet (CSS) est de permettre au moteur du navigateur d'afficher les éléments d'une page avec certaines particularités, comme des couleurs, un positionnement, ou des décorations. La syntaxe CSS reflète cet objectif et les blocs qui la constitue sont :

    • La propriété qui est un identifiant, un nom lisible par un humain, qui défini quelle particularité est considérée.
    • La valeur qui décrit comment la particularité doit être manipulée par le moteur d'affichage. Chaque propriété a un ensemble de valeurs valides, définies par une grammaire formelle, ainsi que par une signification sémantique, implémentées par le moteur du navigateur.

    Déclarations CSS

    Mettre des propriétés CSS à une valeur spécifique est la fonction principale du langage CSS. Une paire formée d'une propriété et de ses valeurs est appelée une déclaration, et n'importe quel moteur de rendu CSS calcule quelle déclaration s'applique à chaque éléments individuels d'une page pour la mettre en page, et la décorer.

    Les propriétés et les valeurs sont sensibles à la casse dans CSS. La paire est séparée par un caractère deux-points, ':' (U+003A COLON). Les espaces blancs avant, entre et après les propriétés et les valeurs sont ignorés, ce qui n'est pas forcément le cas de ceux à l'intérieur d'une valeur ou d'une propriété.

    Il existe plus de 100 propriétés différentes dans CSS et un nombre presque infini de valeurs différentes. Toutes les paires de propriétés et de valeurs ne sont pas acceptées et chaque propriété définit quelles sont les valeurs valides. Lorsqu'une valeur n'est pas valide pour une certaine propriété, la déclaration est considérée invalide et est ignorée dans son ensemble par le moteur de rendu CSS.

    Blocs de déclaration CSS

    Les déclarations sont regroupées par blocs, c'est-à-dire dans une structure délimitée par une accolade ouvrante, '{' (U+007B LEFT CURLY BRACKET), et une fermante, '}' (U+007D RIGHT CURLY BRACKET). Les blocs peuvent parfois êtres imbriqués, donc les accolades ouvrantes doivent être complémentées par une fermante.

    De tels blocs sont naturellement appelés des blocs 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 contenant une déclaration vide. Les espaces sont ignorés. La dernière déclaration du bloc n'a pas besoin d'être terminée par un point-virgule. Il est toutefois considéré comme une bonne pratique de le faire puisque cela évite l'oubli lorsque le bloc est étendu par une déclaration supplémentaire.

    Le contenu d'un bloc de déclaration CSS, c'est-à-dire des déclarations séparées par des points-virgules, sans les accolades ouvrantes et fermantes, peuvent être insérées dans un attribut HTML style.

    Ensembles de règles CSS

    Si les feuilles de style ne pouvaient appliquer qu'une déclaration à tous les éléments d'une page Web, elles seraient presque inutiles. L'objectif réel est d'appliquer différentes règles à différentes parties du document.

    CSS permet cela en associant des conditions avec les blocs de déclaration. Chacun des blocs de déclarations (valides) est précédé d'un sélecteur qui est une condition permettant de sélectionner certains éléments d'une page. La paire sélecteur - bloc de déclaration est appelé un ensemble de règles, ou plus simplement une règle.

    Puisqu'un élément d'une page peut être ciblé par plusieurs sélecteurs, et donc plusieurs règles contenant potentiellement plusieurs fois la même propriété, avec des valeurs différentes, le standard CSS défini lesquelles ont la priorité sur les autres et doivent être appliquées : ceci est appelé l'algorithme de cascade.

    Il est important de noter que bien que les règles soient caractérisées par un groupe de sélecteurs est une sorte de raccourci pour remplacer plusieurs règles avec un sélecteur chacune, ceci ne s'applique pas à la validité de la règle elle-même.

    Ceci mène à une conséquence importante : si un simple sélecteur de base est invalide, comme l'utilisation d'un pseudo-élément ou une pseudo-classe invalide par exemple, le sélecteur complet est invalide et donc la règle est ignorée (et aussi considérée invalide).

    Expressions CSS

    Les règles sont les briques principales d'une feuille de style, qui consiste souvent en une longue liste de ces règles. Mais il y a d'autres informations qu'un auteur Web peut vouloir communiquer dans la feuille de style, comme un jeu de caractères, d'autres feuilles de styles externes à importer, des polices ou une liste de descripteurs d'un compteur et bien d'autres. Cela nécessitera d'autres sortes d'expressions.

    Une expression est un bloc qui débute par n'importe quel caractère qui n'est pas un espace et termine à la première accolade fermante ou point-virgule (en dehors d'une chaîne, non-échappée et non incluse dans un autre paire {}, () ou []).

    Il existe trois sortes d'expressions :

    • Les ensembles de règles (ou règles) qui, comme vu plus haut, associe une collection de déclarations CSS à une condition décrite dans un sélecteur.
    • Les règles @ qui commencent par un signe arobase, '@' (U+0040 COMMERCIAL AT), suivi d'un identifiant et continue jusqu'à la fin de l'expression, c'est-à-dire jusqu'au prochain point-virgule (;) en dehors d'un bloc, ou à la fin du prochain bloc. Chaque type de règle @, défini par un identifiant, peut avoir sa propre syntaxe interne, ainsi que sa propre sémantique. Elles sont utilisée pour communiquer des méta-informations (comme @charset ou @import), des informations conditionnelles (comme @media ou @document), ou des informations descriptives (comme @font-face).

    Toutes les expressions qui ne sont pas des règles ou des règles @-* sont considérés invalides et ignorées.

    Il y a un autre groupe d'expressions, les expressions imbriquées, ces expressions peuvent être utilisées dans un sous-ensemble particulier des règles @, les groupe des règles conditionnelles. Ces expressions ne s'appliquent seulement que si une condition spécifique est remplie : le contenu de la règle @media n'est appliqué que si l'appareil sur laquelle elle est appliquée est ciblé par la condition. Le contenu de la règle @document est appliqué seulement si la page actuelle remplie certaines conditions, et ainsi de suite. Dans CSS1 et CSS2.1, seuls les ensembles de règles pouvaient être utilisés dans un groupe de règles conditionnelle. Ceci était très restrictif, et cette limite à été enlevée avec CSS Conditionals Level 3. Désormais, bien que cela soit toujours à un état expérimental et pas supporté par tous les navigateurs, un groupe de règles conditionnelles peut accepter un ensemble plus large de contenu, de règles et aussi certaines des règles @.

    Voir également

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: teoli, tregagnon, FredB, Dexter_Deter
    Dernière mise à jour par : Dexter_Deter,