CSS
Héritage

Syntaxe

• propriété: hériter;

Héritage automatique

Héritage un mécanisme fondamental de CSS par lequel les valeurs calculées de certaines propriétés d'un élément sont appliquées à ses enfants. Ceci est particulièrement utile lorsque vous souhaitez définir un style global pour vos éléments plutôt que de définir ces propriétés sur chacun des éléments de votre balisage.

Les propriétés communes qui sont automatiquement héritées sont: font , color , text-align , line-height .

Supposons la feuille de style suivante:

#myContainer {
  color: red;
  padding: 5px;
}

Cela appliquera la color: red non seulement à l'élément <div> mais aussi aux éléments <h3> et <p> . Cependant, en raison de la nature du padding sa valeur ne sera pas héritée de ces éléments.

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>

Héritage forcé

Certaines propriétés ne sont pas automatiquement héritées d'un élément jusqu'à ses enfants. En effet, ces propriétés doivent généralement être uniques à l'élément (ou à la sélection d'éléments) auquel la propriété est appliquée. Les propriétés communes sont la margin , le padding , l’ background - background , l’ display , etc.

Cependant, l'héritage est parfois souhaité de toute façon. Pour ce faire , nous pouvons appliquer la inherit valeur à la propriété qui doit être héritée. La inherit valeur peut être appied à une propriété CSS et tout élément HTML.

Supposons la feuille de style suivante:

#myContainer {
  color: red;
  padding: 5px;
}
#myContainer p {
  padding: inherit;
}

Cela appliquera la color: red aux deux éléments <h3> et <p> raison de la nature d'héritage de la propriété color . Toutefois, l'élément <p> héritera également de la valeur de padding de son parent, car cela a été spécifié.

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>