Les feuilles de style (CSS)

Inhoudsopgave

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

Nederlandse vertaling

U hebt gevraagd om deze site in het Nederlands te bezoeken. Voor nu wordt alleen de interface vertaald, maar nog niet alle inhoud.

Als je me wilt helpen met vertalingen, is je bijdrage welkom. Het enige dat u hoeft te doen, is u op de site registreren en mij een bericht sturen waarin u wordt gevraagd om u toe te voegen aan de groep vertalers, zodat u de gewenste pagina's kunt vertalen. Een link onderaan elke vertaalde pagina geeft aan dat u de vertaler bent en heeft een link naar uw profiel.

Bij voorbaat dank.

Document heeft de 12/12/2003 gemaakt, de laatste keer de 29/10/2019 gewijzigd
Bron van het afgedrukte document:https://www.gaudry.be/nl/css-intro.html

De infobrol is een persoonlijke site waarvan de inhoud uitsluitend mijn verantwoordelijkheid is. De tekst is beschikbaar onder CreativeCommons-licentie (BY-NC-SA). Meer info op de gebruiksvoorwaarden en de auteur.