Les feuilles de style (CSS)

Introduction

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.

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-->

Avertissement : Erreurs sur le site de l'infobrol

Sommaire du document

La base de données est temporairement indisponible

Le site rencontre momentanément quelques problèmes...

La base de données est temporairement indisponible (), ce qui explique que de nombreuses fonctions ne soient temporairement pas accessibles (par exemple les liens de navigation, les sommaires, etc.) et que l'affichage des pages soit beaucoup plus lent.

Veuillez réessayer dans quelques minutes (les tests automatiques sont effectués toutes les 15 minutes).

Je vous présente mes excuses pour le désagrément que cela engendre.

Steph.

 

Réseaux sociaux

|Plus d'options...

Vous pouvez modifier vos préférences dans votre profil pour ne plus afficher les interactions avec les réseaux sociaux sur ces pages.

 

Structure du document

Astuce pour imprimer les couleurs des cellules de tableaux : http://www.gaudry.be/ast-rf-450.html
Aucun commentaire pour cette page

© Ce document issu de l′infobrol est enregistré sous le certificat Cyber PrInterDeposit Digital Numbertection. Enregistrement IDDN n° 5329-332
Document créé le 01/01/70 &am12Thu, 01 Jan 1970 00:00:00 +0000amvUTC; 00:00, dernière modification le Vendredi 17 Juin 2011, 10:11
Source du document imprimé : http://www.gaudry.be/ Document affiché 0 fois ce mois de Février.
St.Gaudry©07.01.02
Outils (masquer)
||
Recherche (afficher)
Recherche :

Utilisateur (afficher)

La gestion des membres est momentanement desactivee pour des raisons de maintenance.

Navigation (masquer)
    Apparence (afficher)
    Stats (afficher)
    867 documents
    astuces.
    niouzes.
    definitions.
    membres.
    2290 messages.

    Document genere en :
    0,27 seconde
    Citation (masquer)
     
    l'infobrol
    Nous sommes le Jeudi 09 Février 2012, 20:36, toutes les heures sont au format GMTs