Les feuilles de style (CSS)

Inhaltsverzeichnis

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…

Spitze

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

Deutsche Übersetzung

Sie haben gebeten, diese Seite auf Deutsch zu besuchen. Momentan ist nur die Oberfläche übersetzt, aber noch nicht der gesamte Inhalt.

Wenn Sie mir bei Übersetzungen helfen wollen, ist Ihr Beitrag willkommen. Alles, was Sie tun müssen, ist, sich auf der Website zu registrieren und mir eine Nachricht zu schicken, in der Sie gebeten werden, Sie der Gruppe der Übersetzer hinzuzufügen, die Ihnen die Möglichkeit gibt, die gewünschten Seiten zu übersetzen. Ein Link am Ende jeder übersetzten Seite zeigt an, dass Sie der Übersetzer sind und einen Link zu Ihrem Profil haben.

Vielen Dank im Voraus.

Dokument erstellt 12/12/2003, zuletzt geändert 29/10/2019
Quelle des gedruckten Dokuments:https://www.gaudry.be/de/css-intro.html

Die Infobro ist eine persönliche Seite, deren Inhalt in meiner alleinigen Verantwortung liegt. Der Text ist unter der CreativeCommons-Lizenz (BY-NC-SA) verfügbar. Weitere Informationen auf die Nutzungsbedingungen und dem Autor.