No cache version.


Caching disabled. Default setting for this page:enabled (code LNG204)
If the display is too slow, you can disable the user mode to view the cached version.

Les feuilles de style (CSS)

Contents

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. <body>
  7. 	<h1><font color="#00FF00">Titre 1</font></h1>
  8. 	<p><font color="#FFCC00">paragraphe 1</font></p>
  9. 	<h1><font color="#00FF00">Titre 2</font></h1>
  10. 	<p><font color="#FFCC00">paragraphe 2</font></p>
  11. <!--
  12. /...
  13. fin du code
  14. -->

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. <body>
  13. 	<h1>Titre 1</h1>
  14. 	<p>paragraphe 1</p>
  15. 	<h1>Titre 2</h2>
  16. 	<p>paragraphe 2</p>
  17. <!--
  18. /...
  19. fin du code
  20. -->

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,p{font-family: sans-serif;}
  5. 	h1{color: #00FF00;}
  6. 	p{color: #FFCC00;} 
  7. 	-->
  8. </style>
  9. <!--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-->

Pour en savoir plus sur CSS…

Tip

Vous trouverez toutes les informations nécessaires sur la base des CSS dans le dossier relatif aux spécifications CSS

English translation

You have asked to visit this site in English. For now, only the interface is translated, but not all the content yet.

If you want to help me in translations, your contribution is welcome. All you need to do is register on the site, and send me a message asking me to add you to the group of translators, which will give you the opportunity to translate the pages you want. A link at the bottom of each translated page indicates that you are the translator, and has a link to your profile.

Thank you in advance.

Document created the 12/12/2003, last modified the 29/10/2019
Source of the printed document:https://www.gaudry.be/en/css-intro.html

The infobrol is a personal site whose content is my sole responsibility. The text is available under CreativeCommons license (BY-NC-SA). More info on the terms of use and the author.