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

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

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{color: #00FF00;}
  5. p{color: #FFCC00;}
  6. -->
  7. </style>
  8. <!--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-->

Réseaux sociaux

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

 

Nuage de mots clés

7 mots clés dont 0 définis manuellement (plus d'information...).

Avertissement

Cette page ne possède pas encore de mots clés manuels, ceci est donc un exemple automatique (les niveaux de pertinence sont fictifs, mais les liens sont valables). Pour tester le nuage avec une page qui contient des mots définis manuellement, vous pouvez cliquer ici.

Vous pouvez modifier vos préférences dans votre profil pour ne plus afficher le nuage de mots clés.

 

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 12/12/03 01:00, dernière modification le Vendredi 17 Juin 2011, 12:11
Source du document imprimé : http:///www.gaudry.be/css-intro.html
St.Gaudry©07.01.02
Outils (masquer)
||
Recherche (afficher)
Recherche :

Utilisateur (masquer)
Apparence (afficher)
Stats (afficher)
15838 documents
455 astuces.
550 niouzes.
3107 definitions.
447 membres.
8121 messages.

Document genere en :
0,24 seconde

Mises à jour :
Mises à jour du site
Citation (masquer)
Je vais à l'école, mais je n'apprends jamais ce que j'aimerai savoir.

Bill Watterson
 
l'infobrol
Nous sommes le Jeudi 25 Mai 2017, 03:09, toutes les heures sont au format GMT+1.00 Heure, heure d'été (+1)