Héritage CSS
Le principe de l'héritage en CSS
Héritage direct
- Certains éléments de la page HTML héritent des propriétés des styles définis. Supposons le style suivant où la couleur turquoise en arrière-plan est appliquée à la balise h1:
<style type="text/css">
<!--
h1 {background-color:#00ffff; }
//-->
</style>
Lorsque nous appliquons la balise h1 dans le corps de la page, il arrive fréquemment que nous y combinions d'autres balises comme ceci :
<h1> Le principe de <i> l'héritage </i> </h1>
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 affichera également la couleur de fond turquoise.
Le principe de l'héritage s'applique à beaucoup d'autres styles. Lorsque nous désirons des styles par défaut, nous pouvons les inscrire dans le Body de la façon suivante:
<style type="text/css">
<!--
body {
font-family:Arial;
font-size:12pt;
background-image:url(izi.gif);
background-color:#ffc800;
color:#ffffff; }
//-->
</style>
Feuilles de style en cascade
- Un ordre de préséance doit être déterminé entre plusieurs feuilles de style.
Par exemple, les styles intra-ligne ont préséance sur les styles imbriqués. À leur tour, ces derniers sont traités en priorité par rapport aux feuilles de styles importées.
Plusieurs règles légiférant le mécanisme de cascade existent. Cependant, la règle générale est :
Les styles spécifiques ont priorités sur les styles généraux