« Le langage CSS/Structure et syntaxe » : différence entre les versions

Aller à la navigation Aller à la recherche
Aucun résumé des modifications
=== Syntaxe des règles de style ===
 
Une feuille de styles CSS fonctionne sous forme de ''déclarations''.
 
selecteur{propriété:valeur;}
<syntaxhighlight lang="css">
selecteur { propriété:valeur; }
</syntaxhighlight>
 
Une déclaration est composée au minimum de deux éléments : l'élément de la page auquel on souhaite appliquer un style (le '''sélecteur'''), et le groupe de règles définissant le style ('''propriété''' et '''valeur''').
Analysons cette déclaration :
<syntaxhighlight lang="css">
h1 { color: red }
</syntaxhighlight>
Ici, l'élément à mettre en forme est h1 (titre de niveau 1) et le groupe de règles, délimité par les accolades, contient la règle « mettre cet élément en rouge ». Une règle consiste en une propriété (ici ''color''), suivie par deux points (:), suivie enfin par la valeur associée à la propriété (ici ''rouge'').
 
Il est bien évidemment possible de spécifier plusieurs règles, pour un même élément, en les séparant par des point-virgules (;) de cette façon :
<syntaxhighlight lang="css">
h1 {
color: red;
font-weight: bold
}
</syntaxhighlight>
 
On peut aussi spécifier le même jeu de règles pour plusieurs identifiants en les séparant par des virgules (,) :
<syntaxhighlight lang="css">
h1, h2 {
color: red;
font-weight: bold
}
</syntaxhighlight>
 
Remarque : la dernière règle du groupe ne comporte pas obligatoirement de point-virgule terminal. Toutefois le mettre systématiquement évite de l'oublier. Il faut savoir que les erreurs de syntaxes CSS ont pour effet d'interrompre dans le navigateur web l'interprétation des styles et donc la mise en forme. Contrairement au moteur d'interprétation du code HTML des navigateurs, l'interprétation des CSS par les navigateurs ne corrige habituellement pas d'erreur de syntaxe.
* la scission des styles relatifs à la mise en page, c'est-à-dire le placement des éléments de la page, et des styles relatifs à la typographie (couleurs, bordures, polices, etc.).
* la cascade d'une feuille globale pour un groupe de pages et d'une feuille spécifique à la page concernée (voire une cascade plus complexe prenant en compte les styles par rubriques de pages)
 
 
Pour ce faire, on peut notamment utiliser la syntaxe suivante :
<syntaxhighlight lang="css">
 
@import "fichier.css";
</syntaxhighlight>
 
où ''fichier.css'' est le nom du fichier contenant les styles à importer. Cette mention doit être spécifiée ''au tout début'' de la feuille de style, avant d'éventuels styles de la feuille (''déclarations''). Elle doit aussi impérativement comporter un point-virgule (;) final. Elle peut également, si ce n'est pas déjà le cas de la feuille parente où elle se trouve, être complétée par la mention des médias cibles de ces importations.

Menu de navigation