Tutorial CSS

Introduction.

Syntaxe.

Association à HTML.

Héritage.

Médias.

Syntaxe.

Ce rsum suffit pour une premire approche. Si vous dsirez une information plus approfondie, lisez toute la page.

CSS permet de redfinir la mise en forme de chacune des balises HTML. Par exemple, pour modifier la mise en forme des titres de plus haut niveau (balise <H1>) on crira:

H1 {
    Font-Family: "Times New Roman";
    Font-Size: 18pt;
    Color: Red;
    }

Ce qui produira le rsultat suivant (titres en times New Roman de taille 18 et en couleur rouge):

Ceci est un titre H1

Composition d'une rgle.

Une feuille de styles CSS n'est rien d'autre qu'un ensemble de rgles dfinissant chacune une caractristique de la mise en forme. Par exemple, la rgle suivante signifie que les titres H1 sont en caractres de taille 24 points et de couleur rouge.

La rgle est compose de:

Syntaxe de base.

Les propits rsum.

Il est frquemment ncessaire de dfinir plusieurs proprits qui travaillent ensemble. Par exemple, pour encadrer un block, il faut dfinir les quatre cots:

Border-Top: Thin Solid Red;
Border-Right: Thin Solid Red;
Border-Bottom: Thin Solid Red;
Border-Left: Thin Solid Red;

Ou bien pour dfinir la police de caractres:

Font-Size: 10pt;
Font-Family: Arial;

De nombreuses proprits rsum existent. Elles permettent de dfinir en une seule fois les valeurs de plusieurs proprits individuelles. Par exemple, l'encadrement complet d'un bloc peut s'crire en une fois:

Border: Thin Solid Red;

Et la dfinition des paramtres caractres galement:

Font: 10pt Arial;

Attention : les proprits rsumes initialisent tous leurs paramtres avant de les redfinir. Bien que la syntaxe permettent de ne prciser que certains paramtres, vous avez donc tout intrt les reprciser tous.

Par exemple, si vous souhaitez changer le type d'une bordure dj cre par une rgle prcdente, vous ne pouvez pas crire simplement Border:Double; car cela initialise galement l'paisseur (qui se retrouve fixe Medium) et la couleur (par dfaut noir).

L'utilisation des proprits individuelles ne prsente pas cet inconvnient comme le montre l'exemple ci-dessous.

Border:Medium Solid Red;

Dfinition du cadre parent : bordure fine, en trait plein et rouge.

 

Border: Double;

Dfinition du cadre intrieur en utilisant la proprit rsume Border : on a perdu la couleur (et galement l'paisseur mais c'est moins visible).

Border:Medium Solid Red;

Dfinition du cadre parent identique : bordure fine, en trait plein et rouge.

 

Border-Style: Double;

Dfinition du cadre intrieur avec la propri&t individuelle Border-Style : la couleur et l'paisseur ont t conserves.

Les commentaires.

Les commentaires sont ignors par les programmes ; ils sont destins aux humains. Il peut s'agir d'astuces, d'aide-mmoire ou d'explications. On peut aussi utiliser les commentaires pour dsactiver provisoirement une ou quelques rgles, en gnral pour effectuer des tests.

Il est possible d'insrer des commentaires dans la dfinition des styles en les entourant de /* et */

/* Styles pour la table des matires */
 
P.Tdm {
    Font-Size:10pt;
    Color:DarkBlue; /* Le bleu standard ressort mal */
    Text-Align:Left }

Pour toute utilisation des informations de cette page, reportez vous au copyright