Sur cette page :

  1. La syntaxe des CSS
    1. Les règles
    2. Les propriétés
    3. Les At-rules

13.1# Les règles

Une règle est définie avec un sélecteur et un bloc de propriétés. Le sélecteur permet de choisir les éléments auxquels les propriétés vont s’appliquer. Les propriétés suivent le sélecteur, et sont écrites entre crochets { et }.

Comme en HTML, le langage CSS possède son mécanisme de commentaires, qui sont écrits entre /* et */.

  1. sélecteur
  2. {
  3.   /* propriétés */
  4. }

Le nom d’une propriété est écrit à gauche du caractère :, sa valeur sera placé à droite, voici un premier exemple, qui permet d’appliquer un fond rouge à la page :

  1. body
  2. {
  3.   background-color: #FF0000;
  4. }

Il est possible de définir un même bloc de propriétés pour plusieurs sélecteurs en les séparant par une virgule. Dans l’exemple suivant, les abréviations et les acronymes seront écrits en gras : 

  1. abbr, acronym
  2. {
  3.   font-weight: bold;
  4. }

13.2# Les propriétés

Le langage CSS est composé de modules de propriétés. Il existe par exemple un module de propriétés pour la mise en forme du texte (couleur, police, etc), un autre pour gérer la mise en page (c’est à dire la position des éléments) ou encore un module permettant de gérer la manière dont se comportera un lecteur d’écran vocal.

Chaque version de CSS respecte la compatibilité ascendante et descendante, c’est à dire qu’il est possible d’utiliser des propriétés non supportées par un navigateur trop ancien sans risque, tandis qu’une nouvelle version de CSS permet toujours d’utiliser des propriétés définies dans une version précédente. D’une manière générale, quand un navigateur rencontre une propriété qu’il ne connait pas, il l’ignore. Cependant, en utilisant certaines propriétés inconnues d’Internet Explorer 6, ce dernier ignorera la fin d’un bloc, ces bugs ont été exploités par de nombreux intégrateurs pour rendre des informations invisibles à ce navigateur quand il ne les supportait pas correctement.

Certaines propriétés peuvent être découpées en “sous-propriétés”. Par exemple, margin, qui permet de définir la taille des marges extérieures d’un bloc possède quatre “sous-propriétés” margin-top, margin-bottom, margin-left et margin-right.

Vous pouvez spécifier, pour chaque propriété en CSS, la valeur inherit, qui signifie que la valeur de cette propriété sera héritée de l’élément parent. Nous aurons l’occasion de le revoir, la valeur de certaines propriétés (notamment celles liées à la typographie) sont naturellement héritées.

  • Icone Microsoft Internet Explorer la valeur inherit n’est supporté qu’à partir de la version 8

13.3# Les At-rules

Les règles at-rules sont des règles représentant des comportements particuliers. Encore une fois, les limites de l’implémentation de ces règles ne permettent pas de toutes les utiliser. Les at-rules doivent généralement être placées en tête pour ne pas être ignorées ; elles ne peuvent pas être placées dans un bloc.

La règle @import permet d’inclure une feuille de styles externe, directement dans les CSS. Cette règle doit généralement être placée en tête des feuilles de styles. Pour désigner la feuille liée, il faut utiliser la syntaxe url("styles.css"). Il est possible de préciser le type de média concerné par cette feuille de styles après l’adresse du fichier externe.

  • Icone Mozilla Firefox Firefox 3 supporte correctement @import.
  • Icone Microsoft Internet Explorer Jusqu’à la version 7 (incluse), si le type de média est précisé, la feuille de styles ne sera pas chargée.
  • Icone Safari Apple Safari 3 supporte correctement @import.
  • Icone Opera Toutes les versions supportent correctement @import. Cependant, le type de média n’est pas pris en compte si l’attribut  media est précisé dans les versions inférieures à Opera 8.
  • Icone Chrome Google Chrome supporte correctement @import.

La règle @charset permet d’indiquer quel jeu de caractères est utilisé dans la feuille de style. Cette règle n’a pas de sens si la feuille de style est contenue dans un document HTML, dans cas, le jeu de caractère est celui du document.

Voici un exemple d’utilisation :

  1. @charset "utf-8";
  2. @import url("autres-styles.css");
  3. @import url("styles-print.css") print;

La règle @media permet d’indiquer qu’une série de règles ne concerneront qu’un type de média de lecture. Par exemple certains styles peuvent être définis pour l’écran uniquement, d’autres pour l’impression :

  1. @media screen
  2. {
  3.   body { background: blue; }
  4. }
  5. @media print
  6. {
  7.   body { background: white; }
  8. }

Nous étudierons d’autres règles at-rules plus tard dans ce cours.