Team-Masters.com
Que du Gratuit pour Webmasters
L’héritage / la cascade
Ah bon, je vais gagner quelque chose ? Non, non, pas d’argent en tous cas...
Une grande partie des éléments HTML qu’on peut trouver dans un document sont emboîtés les uns dans les autres, l’ensemble étant lui-même placé dans la balise <body> de votre page web. La question se pose de savoir comment il pourra y avoir transmission (héritage) de certaines propriétés d’un élément extérieur (parent ou ascendant) vers les éléments les plus intérieurs (enfants ou descendants).
Par exemple, on donnait une couleur bleue aux éléments de « h1 ». Supposons qu’il y ait un élément en italique parmi ceux compris dans l’élément « h1 » :
<h1>Le titre <i>est</i>important !</h1>
Si aucune couleur n’a été définie pour l’élément « i », le "est" italique hérite de la couleur de l’élément parent « h1 », il apparaît donc en bleu. En effet, nous nous retrouvons avec la balise italique à "l’intérieur" de la balise h1. En conséquence, la balise italique héritera des propriétés du style h1 et s’affichera également en bleu. Le même principe s’applique à beaucoup d’autres styles, par exemple « font-family » et « font-size ».
Dans un document HTML, la filiation peut se représenter sous la forme d’un emboîtage successif. Souvent, la valeur d’une propriété est un pourcentage de celle d’une autre propriété :
p { font-size: 10pt }
p { line-height : 120% } /* relatif à 'font-size', c-à-d 12pt */Pour toute propriété qui admet des valeurs en pourcentage, on détermine la propriété à laquelle elle se réfère. Les éléments enfants de ’p’ hériteront de la valeur calculée de « line-height » (c.à.d 12pt), et non du pourcentage.
Voici un exemple d’héritage pour mieux comprendre :
<head>
<title>L'Héritage en CSS</title>
<style type="text/css">
body {font-size: 24pt; font-family: arial}
p {text-align: center}
h1 {font-size: 125%}
div {font-size: 70%}
li {font-size: 150%}
</style>
</head>
<body>
<p>Exemple de l'héritage</p>
<h1>Divisions <i>imbriquées</i></h1>
Trois divisions :
<div>Première division
<div>Deuxième division
<div>Troisième division
<ul>Maintenant voici une liste
<li>Montre</li>
<li>Téléphone</li>
<li>Ordinateur</li>
</ul>
</div>
</div>
</div>
</body>
Ici, la première règle de style nous impose un affichage de 24pt pour le corps du document. La première ligne « Exemple de l ’héritage » qui est affichée dans une balise <p> sera donc en 24pt. Ensuite le texte entre les balises <h1> s’affichera dans un corps de police de 120% par rapport au corps du document, c’est à dire en 30pt. Le mot en italique « imbriquées » héritant lui aussi des propriétés de <h1>. On trouve ensuite trois balises <div> imbriquées dont la règle de style impose un corps de police de 70%. Puisque la balise <h1> a été refermée, la première division sera affichée en 24x0,7 ; la deuxième héritera des propriétés de la première et s’affichera en 24x0,7x0,7 et la troisième division s’affichera avec un corps de police de 24x0,7x0,7x0,7 puisque qu’elle héritera des propriétés de « sa mère », en l’occurrence la deuxième balise
<ul>, le texte « maintenant voici une liste » s’affichera avec les propriétés de son ascendant (la troisième balise <div>) soit en 24x0,7x0,7x0,7 pt. En revanche, les éléments de la liste elle-même s’afficheront dans une police de 150% par rapport à </ul>, soit : 24x0,7x0,7x0,7x1,5. Le type de police sera le même pour tout le texte, soit en Arial puisque défini pour le <body>.
Plusieurs feuilles de style
Si plusieurs propriétés ont été définies pour un seul élément dans différentes feuilles de style (externe, interne ou en intraligne), la valeur héritée sera celle de la feuille la plus spécifique. Par exemple, supposons que vous ayez une feuille de style externe qui définit les propriétés du sélecteur h4 :
h4
{
color: red;
text-align: left;
font-size: 14pt
}Vous avez une page qui fait référence à la feuille externe, mais qui en plus possède un style interne (entre <head> et </head>) pour le même sélecteur h4, soit :
h4
{
text-align: right;
font-size: 20pt
}Que va-t-il se passer ? Comment va s’afficher le texte de votre page compris entre les balises h4 ? Il sera rendu ainsi :
Couleur : rouge
Alignement du texte : droit
Taille de police : 20pt
On voit donc que le sélecteur h4 a hérité de la couleur définie dans la feuille de style externe, et que l’alignement et la taille du texte ont hérité des propriétés définies dans la feuille interne. Lorsqu’un élément possède plusieurs style définis quel sera celui qui sera utilisé ? D’une façon générale, on peut dire que l’ordre de cascade se fait de la manière suivante, le nombre 4 ayant la priorité sur les autres :
1.Style par défaut du navigateur
2.Style de la feuille de style externe (appelée par <link>)
3.Style de la feuille interne (déclarée par <style> dans le <head>)
4.Style intraligne définit directement dans le sélecteur HTML
Donc, le style intraligne aura priorité sur les autres, ce qui veut dire qu’il va l’emporter sur un style interne (déclaré dans le head de la page), sur une feuille de style externe (appelée par <link>) et sur le style par défaut de votre navigateur (eh oui il en a un). L’exemple du sélecteur h4 précédent correspond bien à l’ordre de cascade. On peut donc dire qu’en règle générale les styles plus spécifiques ont priorité sur les styles plus généraux.
Suite...
22 décembre 2004
Très Bon Plan A NE PAS MANQUER ! Cliquez!!
Des Secrets pour 7€: Un rapport, un script pour réussir à vendre sur Internet. Cliquez!
Mise en page : Le positionnement flottant avec les CSS
CSS : Une mise en page sur 2 colonnes avec la propriété float
Construire un menu avec les CSS
Le recouvrement de blocs
Positionner des blocs en absolu en CSS
Le positionnement relatif en CSS
Le positionnement des blocs en CSS : Le flux normal
Mise en page en CSS : les types de boîtes
CSS : Les bordures
Mise en page avec les CSS : Comprendre le modèle de boîte
