Les feuilles de style (CSS)

Table des matières

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…

Astuce

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

Version en cache

20/11/2024 21:31:26 Cette version de la page est en cache (à la date du 20/11/2024 21:31:26) afin d'accélérer le traitement. Vous pouvez activer le mode utilisateur dans le menu en haut pour afficher la dernère version de la page.

Document créé le 12/12/2003, dernière modification le 29/10/2019
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.