Le langage CSS/Héritage

Le langage CSS

1. Introduction
   • Premier exemple
   • Structure et syntaxe
   • Les sélecteurs
   • Valeurs et unités utilisées
2. Mise en forme
   • Texte
   • Fonds, bordures, marges et espacements
   • Listes
   • Tableaux
   • Héritage
3. Mise en page
   • Le positionnement des éléments
   • Le modèle de boîte
   • Transformation géométrique
4. Pour aller plus loin
   • Techniques avancées
   • Navigateurs et débogage
   • CSS 3
   • Bootstrap
5. Annexes
   • Glossaire
   • Mots réservés
   • Notions de design et de colorimétrie
   • Interface HTML

Héritage par défaut

La plupart des propriétés appliquées à un élément s'appliquent également aux éléments qu'il contient : police de caractère, couleur de texte et de fond, ... D'autres ne sont pas héritées ; par exemple les propriétés sur la bordure ne s'appliquent qu'à l'élément ciblé.

Héritage explicite

La valeur spéciale inherit permet d'écraser la valeur d'une propriété pour utiliser la même valeur que celle de l'élément parent.

Exemple 1 : L'élément <div> interne hérite de la bordure de l'élément externe.

<div style="border: solid 1px; padding: 1em;"> EXTERNE <div style="border: inherit; padding: 1em;"> INTERNE </div> </div>

EXTERNE INTERNE

Exemple 2 : L'élément <div> interne hérite de l'absence de bordure de l'élément intermédiaire car celui-ci n'hérite pas de la bordure de l'élément externe.

<div style="border: solid 1px; padding: 1em;"> EXTERNE <div> <div style="border: inherit; padding: 1em;"> INTERNE </div> </div> </div>

EXTERNE INTERNE