Héritage
========

En CSS, **l'héritage** contrôle ce qui se produit lorsqu'aucune valeur n'est indiquée pour une propriété d'un élément.

Les propriétés CSS peuvent être rangées dans deux catégories :

* **Les propriétés héritées**, qui prennent par défaut la valeur calculée de leur élément parent.
* **Les propriétés non-héritées**, qui prennent par défaut la valeur initiale de la propriété.

Voyez sur les pages des différentes propriétés CSS dans la référence la définition qui indique si une propriété donnée hérite par défaut (« Héritée : oui ») ou non (« Héritée : non »).

Propriétés héritées
-------------------

Lorsqu'aucune valeur n'a été fournie pour une **propriété héritée** sur un élément, celle-ci utilise la valeur calculée de la propriété sur l'élément parent. Seul l'élément racine du document récupère la valeur initiale indiquée dans le résumé de la propriété.

Un exemple caractéristique de propriété héritée est la propriété `color`. Prenons la règle et le fragment de document suivants :


```css
p {
  color: green;
}
```



```html
<p>Ce paragraphe a <em>du texte en emphase</em> à l'intérieur.</p>
```


Les mots « du texte en emphase » apparaissent en vert, car l'élément `<em>` a hérité de la valeur de la propriété `color` de l'élément `<p>`. Il *n'utilise pas* la valeur initiale de la propriété (ici, il s'agirait de la couleur utilisée pour l'élément racine lorsque la page n'indique pas de couleur).

Propriétés non-héritées
-----------------------

Lorsqu'aucune valeur n'est fournie pour une **propriété non-héritée** sur un élément, celle-ci utilise la valeur initiale (indiquée dans le résumé de la propriété).

Un exemple caractéristique de propriété non-héritée est la propriété `border`. Prenons la règle et le fragment de document suivants :


```css
p {
  border: medium solid;
}
```



```html
<p>Ce paragraphe a <em>du texte en emphase</em> à l'intérieur.</p>
```


Les mots « du texte en emphase » n'ont pas de bordure *en plus* (car la valeur initiale de `border-style` est `none`).

Notes
-----

Le mot-clé `inherit` permet d'indiquer explicitement l'héritage et fonctionne sur les propriétés héritées comme sur les propriétés non-héritées.

Il est possible de contrôler l'héritage de l'ensemble des propriétés d'un coup en utilisant la propriété raccourcie `all`, qui applique sa valeur à toutes les propriétés. Par exemple :


```css
p {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}
```


Cela réinitialisera le style des paragraphes pour la propriété `font` avec la valeur par défaut de l'agent utilisateur (à moins qu'une feuille de style de l'utilisatrice ou de l'utilisateur existe et indique une police, qui sera alors utilisée). Ensuite, la taille de la police est doublée et on applique un niveau de graisse `font-weight` à `bold` pour mettre en gras.

### Surcharger l'héritage, un exemple

Si on reprend l'exemple précédent avec `border` et qu'on impose l'héritage explicitement avec `inherit`, voici ce qu'on obtient :


```css
p {
  border: medium solid;
}

em {
  border: inherit;
}
```



```html
<p>Ce paragraphe a <em>du texte en emphase</em> à l'intérieur.</p>
```


On voit ici la bordure supplémentaire autour du texte en emphase.

Voir aussi
----------

* Les valeurs CSS qui contrôlent l'héritage :
    + `inherit`
    + `initial`
    + `revert`
    + `revert-layer` (en-US)
    + `unset`
* Introduction à la cascade CSS
* La cascade et l'héritage
* Concepts clés de CSS :
    + Syntaxe CSS
    + Règles-at
    + Commentairess
    + Spécificité
    + Modèle de boîte (en-US)
    + Modes d'affichage
    + Modèles de formatage visuel
    + Fusion des marges
    + Valeurs
        - Initiales
        - Calculées
        - Utilisées
        - Effectives
    + Syntaxe de définition des valeurs
    + Propriétés raccourcies
    + Éléments remplacés