Exercice HTML : Feuilles de styles CSS  

Thème

Première approche du mécanisme des feuilles de styles CSS (Cascading Style Sheets) en HTML.

Remarques sur les feuilles de styles

Les feuilles de styles CSS1 (Level 1) sont partiellement supportées (de façon inconsistante) depuis Netscape 4 et Internet Explorer 3, et entièrement supportées depuis Netscape 6 et IE 5.

Balises

1) Définition et référenciation à une feuille de style CSS (à placer dans le bloc <HEAD>...</HEAD>) 2) La feuille de style contient un ensemble de "règles" (rules) dont la forme est la suivante :
(attention : les caractères "{" et "}" doivent être entrés tels quels (ne désignent pas des parties optionelles) ) 3) Une description exhaustive de toutes les possibilités de règles est impossible ici (voir norme CSS).
On se contentera donc de donner ci-dessous quelques exemples classiques : 4) Usage de "classes" et référence à des "id"

  Usage de "classes" définies dans la feuille de style avec .classe. Exemple :

  Se référer à un "id" dans une feuille de style avec #id. Exemple : 5) Usage de "pseudo-éléments" (ou pseudo-classes) prédéfinis par le standard CSS (dès IE5 et N6). Exemples : 6) Usage de styles CSS à l'intérieur des balises ("inline" styles) par recours au nouvel attribut "STYLE=", principalement utilisé dans les balises <DIV> et <SPAN>. Exemples : ATTENTION : pour qu'un document basé sur une feuille de style s'affiche proprement, il est fortement conseillé de ne pas négliger les balises de fermeture (telles que </P>, </LI>, </TR>, </TD>, </TH>, etc...).

Références

Exercice

Réalisez la page Web représentée par l'image ci-dessous : Cliquez ici pour voir le corrigé dans votre browser.

Vous trouvez l'image "fond_spirale.gif" à placer en arrière-plan sous R:\Si-dgr\Internet.

Corrigé

Page Web avec "embedded" style sheet :
(voyez comme le code HTML est pur, et ceci malgré une typographie et mise en page relativement sophistiquée)

	<HTML>
	<HEAD>
	  <TITLE>Corrigé Exercice CSS</TITLE>
	  <STYLE TYPE="text/css">
	    <!--
	    BODY { margin-left: 50px ; color: navy ; background: white URL(fond_spirale.gif) ;
	           font-family: Arial, Helvetica, sans-serif }
	    A:link    { color: red }
	    A:active  { color: maroon }
	    A:visited { color: maroon }
	    H1,H2,H3,H4 { text-align: center ; font-family: "Comic Sans MS", sans-serif ;
	                  font-size: large }
	    H1          { text-align: center ; color: white ; background: navy }
	    H2,H3,H4    { text-align: left ; color: navy ; background: white }
	    TH     { background: silver }
	    TH,TD  { font-family: Arial, Helvetica, sans-serif }
	    PRE,TT { font-family: monospace ; color: blue ; font-weight: bold }
	    -->
	  </STYLE>
	</HEAD>
	<BODY>
	
	<H1> Titre de niveau 1 </H1>
	
	<H2>Titre de niveau 2</H2>
	
	<UL>
	<LI>La couleur par défaut du texte...
	<LI>Les titres sont en police...
	<LI>Le texte est en police...
	<LI>La page contient l'image "fond_spirale.gif"...
	<LI>Pour ménager de la place à gauche...
	<LI>Les liens...
	<LI><TT>Le texte en ...</TT>
	</UL>
	
	<P>
	<TABLE ALIGN=center WIDTH=60% BORDER=1>
	<TR>
	<TH COLSPAN="2">Couleur de fond "silver"</TH>
	</TR>
	<TR>
	<TD>Texte en police sans empattement</TD>
	<TD>Texte en police sans empattement</TD>
	</TR>
	</TABLE>
	
	</BODY>
	</HTML>

"External" style sheet :


Exercices HTML © J.-D. Bonjour / ENAC-IT1, EPFL / Révision 21.12.2003