Les feuilles de style (CSS)

Les feuilles de style en cascade (Cascading Style Sheet) permettent de séparer les données pures et la manière de les afficher.

  1. <!--début du code
  2. .../
  3. -->
  4.   <title>Exemple</title>
  5. </head>
  6.   <h1><font color="#00FF00">Titre 1</font></h1>
  7.   <p><font color="#FFCC00">paragraphe 1</font></p>
  8.   <h1><font color="#00FF00">Titre 2</font></h1>
  9.   <p><font color="#FFCC00">paragraphe 2</font></p>
  10. <!--
  11. /...
  12. fin du code
  13. -->

Déclaration des css

Nous voyons de suite que les différents éléments des balises h1 sont soumis à la même balise de coloration du texte. Le même code est donc à chaque fois réécrit; c'est une source d'erreur et devient difficile quand il faut modifier un même style pour toutes les balises h1.

Nous allons voir dans les exemples qui suivent comment définir une fois pour toutes le style.

Sélecteur de type

Un sélecteur de type permet de modifier tous les éléments qui correspondent à ce type. Par exemple, le fait de définir les propriétés graphiques de la balise <h1> permet de modifier tous les titres de rang 1 du document.

  1. <!--début du code
  2. .../
  3. -->
  4.   <title>Exemple</title>
  5.   <style type="text/css">
  6.   <!--
  7.     h1 {color: #00FF00;font-family: sans-serif;}
  8.     p {color: #FFCC00;font-family: sans-serif;}
  9.   -->
  10.   </style>
  11. </head>
  12.   <h1>Titre 1</h1>
  13.   <p>paragraphe 1</p>
  14.   <h1>Titre 2</h2>
  15.   <p>paragraphe 2</p>
  16. <!--
  17. /...
  18. fin du code
  19. -->

Dans notre exemple, les balises <h1> et <p> possèdent des caractéristiques communes, il est donc inutile de déclarer deux fois les mêmes attributs. Nous pouvons donc grouper les déclarations d'éléments communs dans les sélecteurs de type.

  1. <!--début du code-->
  2. <style type="text/css">
  3.   <!--
  4.   h1{color: #00FF00;}
  5.   p{color: #FFCC00;}
  6.   -->
  7. </style>
  8. <!--fin du code-->

Feuilles de style externes

Si les informations sont communes à de nombreuses pages, il est alors préférable de les renseigner dans un fichier externe. Les modifications apportées aux styles déclarés dans ce fichier porteront alors sur toutes les pages liées à ce dernier.

  1. <!--début du code-->
  2.   <title>Exemple</title>
  3.   <link href="monstyle.css" rel="stylesheet" type="text/css">
  4. </head>
  5. <!--fin du code-->

 

Document créé le 12/12/03 01:00, dernière modification le 23/03/18 19:00
Source du document imprimé : https://www.gaudry.be/css-intro.html

L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.