Analyse de « test3.css »

Les fichiers CSS

Un fichier CSS est un fichier texte (normalement encodé en ASCII) contenant des règles de la forme :

sélecteur 1, sélecteur 2, …
{
propriété 1: valeur 1;
propriété 2: valeur 2;
propriété 3: valeur 3;
⋯
}

associant une (ou des) déclaration(s) à un (ou des) sélecteur(s). Chaque déclaration assigne une valeur à une propriété du (ou des) sélecteur(s) et s'écrit¹ :

propriété: valeur;

Les déclarations forment un bloc de déclarations encadré par des accolades (obligatoires, même s'il n'y a qu'une déclaration) ; les sélecteurs, s'il y en a plusieurs, sont séparés par des virgules.

Prenons par exemple le fragment de code :

h1
{
font-family: Verdana, Arial, sans-serif;
color: #9E9670;
}

Le sélecteur est h1, ce qui signifie que les déclarations qui suivent s'appliqueront à tous les éléments h1² des fichiers HTML auxquels ce fichier CSS sera lié. Les règles s'énoncent : tous les titres de niveau 1 seront affichés dans la police Verdana (ou à défaut Arial, ou encore à défaut une police de type sans-sérif) de couleur #9E9670 (voir plus loin pour la spécification des couleurs) :

Ceci est un titre de page

Le formatage du fichier CSS n'a aucune incidence sur le résultat. On aurait pu écrire notre bout de code :

h1 { font-family: Verdana, Arial, sans-serif; color: #9E9670; }

Le code :

body
{
background-color: cornflowerblue;
background-image: url(blue_background.jpg);
}

indique que l'écran³ doit avoir la couleur uniforme « cornflowerblue » :

 
 

et qu'il doit être décoré avec le papier peint « blue_background.jpg » :

 
 

Normalement, la couleur sera cachée par le papier peint, mais si le fichier blue_background.jpg n'est pas trouvé là où il devrait être, la deuxième déclaration devient ineffective et l'écran sera bleu uni.

Le reste du code spécifie essentiellement que la division de classe « page » aura un arrière-fond de couleur rgb(248,248,230), qu'elle sera encadrée par une bordure aux coins arrondis de type « double », d'épaisseur 6 pixels et de couleur rgb(12,12,12) et que le contenu (sauf pour le titre) sera affiché dans la police Lucida Bright (ou à défaut Times New Roman, ou encore à défaut une police de type sérif) :

Ceci est un titre de page

Ceci est un paragraphe

Ceci est un autre paragraphe

Les autres règles sont relatives au dimensionnement et au positionnement et seront étudiées plus tard.

Il est à noter qu'un fichier CSS peut aussi contenir des commentaires ; ils sont du même style qu'en langage C, c'est-à-dire qu'ils sont délimités par /* et */ :

/* Ceci est un commentaire. */

______________________________________________________________________________

¹ Les points-virgules servent à séparer les différentes déclarations d'un même bloc. Le point-virgule qui suit la dernière déclaration d'un bloc est facultatif.

² Il y a des exceptions. On les verra plus tard.

³ Lorsqu'on utilise le sélecteur body, certaines propriétés s'appliquent à l'écran alors que d'autres s'appliquent au contenu de la page web.

Accueil