Previous Up Next
Université Lille 3-Charles de GaulleUFR de Mathématiques Sciences Économiques et Sociales

Chapitre 9  HTML, les feuilles de style

Très fortement « inspiré » de Notes de cours sur les feuilles de style de Fabien Torre
(
/~torre/Enseignement/Cours/css.php )

9.1  Motivations

Il semble maintenant acquis que les balises de mise en page (comme FONT par exemple) seront bientôt exclues du langage HTML et les navigateurs futurs pourront ne pas supporter ces balises.

Il s'agit d'un paradigme général consistant à dissocier le contenu d'un document de sa forme. Ici, il semblerait donc que le langage HTML soit destiné à décrire le contenu, les feuilles de style dont nous allons discuter dans la suite servant elles à décrire la forme du document.

Les intérêts de cette séparation sont nombreux : Enfin, précisons immédiatement que le couple HTML/CSS ne constitue pas la seule réponse à la motivation contenu séparé de la forme, citons :

9.2  Généralités

La solution retenue pour décrire des mises en forme se nomme donc feuilles de style ou, en anglais, Cascading Style Sheets (CSS). (Ici en cascade signifie prise en compte des feuilles du navigateur, de l'utilisateur, puis de l'auteur). On peut remarquer un lien très fort avec les modèles de document des traitements de texte (quand ils sont correctement utilisés).

La spécification CSS level 1 ( http://www.w3.org/TR/REC-CSS1 ) date de 1996. Elle est maintenant supportée par les navigateurs suivants : (La notation Mozilla 1.1 signifiant : Mozilla depuis la version 1.1. Mozilla, au moment où j'écris ces lignes, en est à la version 1.3 qui, bien entendu, supporte aussi les feuilles de style. La même remarque est valable pour les autres navigateurs cités.)

Cependant, ces navigateurs gèrent souvent une même feuille de style de manière différente... Après avoir écrit une feuille de style, il conviendra donc de vérifier l'apparence du document avec un maximum de navigateurs.

Enfin, et surtout, il faut s'assurer impérativement que le document reste lisible même sans la feuille de style.

9.3  Inclusion dans une page HTML

9.3.1  Dans une balise, avec l'attribut STYLE

Par exemple : <B STYLE="color:silver;">

9.3.2  Dans l'en-tête, après la balise TITLE

Entre <HEAD> et </HEAD> on peut écrire par exemple :
  <STYLE TYPE="text/css">
    bla bla feuilles de style
  </STYLE>

9.3.3  Fichier externe

Dans un fichier texte *.css (pas de balise STYLE). On ajoutera alors dans l'en-tête du fichier HTML (entre <HEAD> et </HEAD>) :
  <LINK REL="stylesheet" TYPE="text/css" HREF="bla.css">

9.4  Mise en oeuvre

9.4.1  Sélecteurs de types

C'est la syntaxe de base : une balise HTML (ou une liste de balises) (sans < ni >), suivie d'accolades dans lesquelles on trouve liste de propriétés suivies de valeurs.

Par exemple :
  H1 {
     font-family: Wide Latin;
  }
  H1,H2,H3 {
     font-family: Wide Latin, Arial Black, Helvetica, sans-serif;
     color: red;
  }
  P {
     color: blue;
  }
La présentation (saut de lignes, espaces, etc.) n'a aucune importance.

9.4.2  Sélecteurs d'attributs (CLASS ou ID)

On peut définir une classe pour une balise donnée, le style ne s'appliquant alors qu'à cette classe. Pour définir la classe ecolo dans les paragraphes (<P>) on écrira par exemple :
  P.ecolo {
      color: green;
  }
On l'utilisera alors ainsi :
  <P CLASS="ecolo">
  un paragraphe...
  </P>
Plus généralement, on peut spécifier l'apparence d'une classe sans préciser de balise :
  .ecolo {
      color: green;
  }
et écrire ensuite :
  <H1 CLASS="ecolo">Titre militant</H1 CLASS="ecolo">
  <P CLASS="ecolo">
  un paragraphe...
  </P>
Ou encore (identifiant d'une unique occurrence de la balise) :
  #p1 { color: blue; }
qu'on utilisera ainsi :
  <P ID="p1">

9.4.3  Par contexte

Par exemple, pour définir une présentation différente des éléments de liste suivant leur profondeur :
  UL LI { font-size: small}
  UL LI LI { font-size: x_small}
Ou par héritage d'un ascendant quelconque :
  .Prof H1 { color: red; }
Ou par héritage de l'ascendant direct :
  Body ~P { color: red; }

9.4.4  Par pseudo-classes

On peut définir aussi des pseudo-classes :
A:link
A:hover (passage de souris)
A:active
A:visited prioritaire sur les précédents... ne pas utiliser mais préférer le VLINK de la balise BODY
P:first-line
P:first-letter
p.ecolo:link {color: lime}
p.ecolo:visited {color: olive}

9.4.5  Mise en page des listes, changement de la puce

  list-style-type
  list-style-image
  list-style-position
  list-style

9.4.6  Noms génériques de familles de polices


serif (Times, etc.)
sans-serif (Arial, Helvetica, etc.)
cursive
monospace (machine à écrire comme Courrier)
fantasy

9.4.7  DIV et SPAN

Permet de délimiter une zone de texte : DIV pour les blocs de texte (à la manière d'un paragraphe), SPAN pour une suite de mots dans un texte.

On indiquera une classe pour ces zones, classe dont l'apparence sera spécifiée dans la feuille de style.

9.5  Liste exhaustive

Vous pourrez trouver une liste exhaustive des propriétés existantes sur ces pages :
http://www.grappa.univ-lille3.fr/~gonzalez/enseignement/commun/css/style.php
/~torre/Enseignement/Cours/css.php

9.6  S'amuser avec les feuilles de style

9.6.1  Appliquer des styles aux textes

http://www.grappa.univ-lille3.fr/~gonzalez/enseignement/commun/css/texte.php

9.6.2  Appliquer des styles aux listes

http://www.grappa.univ-lille3.fr/~gonzalez/enseignement/commun/css/listes.php

9.6.3  Appliquer des styles aux tableaux

http://www.grappa.univ-lille3.fr/~gonzalez/enseignement/commun/css/tables.php

9.6.4  Des exemples pratiques

Vous trouverez sur cette page des exemples pratiques pour vous convaincre de l'utilité (et de la nécessité) d'utiliser des feuilles de style :

/~torre/Enseignement/TPs/CSS/



D.Gonzalez (gonzalez@univ-lille3.fr) en date du th , 

Previous Up Next