Articles
Introduction au CSS
Héritage en CSS

Héritage en CSS

Cet article explique l'héritage en CSS.

Vous pouvez vérifier les propriétés représentatives héritées et non héritées.

YouTube Video

HTML pour l'aperçu

css-inheritance.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Inheritance</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-inheritance.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Inheritance</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header><h2>CSS Inheritance</h2></header>
19        <article>
20            <h3>Example of Inheritance</h3>
21            <section>
22                <p>
23                    Example of P Element.<br>
24                    <span>Example of Span Element</span>
25                </p>
26            </section>
27            <div>
28                Example of Div Element
29            </div>
30            <ul>
31                <li>List Item 1</li>
32                <li>List Item 2</li>
33                <li>List Item 3</li>
34            </ul>
35        </article>
36        <article>
37            <h3>all</h3>
38            <section>
39                <h4>Initial</h4>
40                <div class="all-initial">This is an initial element</div>
41            </section>
42            <section>
43                <h4>Inherit</h4>
44                <div class="parent-inherit">
45                    <div class="all-inherit">This is an inherited element</div>
46                </div>
47            </section>
48            <section>
49                <h4>Unset All</h4>
50                <div class="parent-unset">
51                    <div class="all-unset">This is an unset element</div>
52                </div>
53            </section>
54            <section>
55                <h4>all and !important</h4>
56                <div class="important-style">
57                    <div class="all-with-important">
58                        This is an initial element with !important
59                    </div>
60                </div>
61            </section>
62        </article>
63    </main>
64</body>
65</html>

Héritage en CSS

En CSS, certaines propriétés sont automatiquement héritées des éléments parents aux éléments enfants. C'est un mécanisme utile parce qu'une fois que vous définissez une propriété spécifique, les éléments enfants auront également le même style, supprimant la nécessité de la définir à plusieurs reprises. Cependant, toutes les propriétés ne sont pas héritées ; certaines propriétés le sont alors que d'autres ne le sont pas. Par exemple, color et font-family sont hérités, mais les propriétés du modèle de boîte comme margin et padding ne le sont pas.

Propriétés héritées

Les propriétés héritables sont principalement celles liées au texte et aux polices.

Propriétés couramment héritées

  1. color: Couleur du texte
1body {
2    color: black;
3}
  • Dans ce cas, tous les éléments enfants au sein de body auront une couleur de texte noire.
  1. font-family: Famille de polices
1body {
2    font-family: "Times New Roman", cursive;
3}
  • Tous les éléments enfants utilisent la police Arial.
  1. font-size: Taille du texte
1body {
2    font-size: 16px;
3}
  • Tout le texte dans le body sera de 16px par défaut.
  1. line-height: Interligne
1p {
2    line-height: 1.5;
3}
  • Le texte dans un élément <p> sera affiché avec une hauteur de ligne 1,5 fois plus grande, affectant également ses éléments enfants.
  1. text-align: Alignement du texte
1div {
2    text-align: center;
3}
  • Le texte et les éléments en ligne dans un élément div sont affichés centrés.
  1. visibility: Visibilité des éléments
1div {
2    visibility: hidden;
3}
  • visibility est une propriété qui contrôle la visibilité d'un élément. Lorsqu'il est défini sur caché, l'élément devient invisible.
  • Dans ce cas, les éléments enfants à l'intérieur du div seront également cachés.
  1. list-style: Style de liste (marqueurs de liste pour <ul> et <ol>)
1ul {
2    list-style: square;
3}
  • Dans ce cas, les éléments de liste à l'intérieur de la balise ul seront affichés avec des marqueurs carrés.

Exemple :

Propriétés non héritées

Les propriétés liées à la mise en page et au modèle de boîte ne sont généralement pas héritées. Ces propriétés doivent être définies individuellement pour chaque élément.

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

  1. margin, padding: Marges extérieures et intérieures d'un élément
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • Même si vous définissez des marges externes ou internes pour un élément div, cela n'affecte pas ses éléments enfants.
  1. border: Bordure de l'élément
1div {
2    border: 1px solid black;
3}
  • Même si une bordure est définie sur un élément parent, cela n'affecte pas les éléments enfants.
  1. width, height: Largeur et hauteur de l'élément
1div {
2    width: 100px;
3    height: 50px;
4}
  • La largeur et la hauteur d'un élément parent n'affectent pas automatiquement les éléments enfants.
  1. background: Style de fond
1body {
2    background-color: lightblue;
3}
  • La couleur d'arrière-plan définie sur le body n'affecte pas directement les éléments enfants. Cependant, si un élément enfant a un arrière-plan transparent, la couleur d'arrière-plan de l'élément parent peut être visible à travers celui-ci.

Exemple :

Contrôle de l'héritage

L'héritage peut être contrôlé en utilisant les mots-clés inherit, initial, ou unset.

  • Si vous souhaitez activer l'héritage : Vous pouvez forcer explicitement l'héritage en utilisant le mot-clé inherit.
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • Si vous ne souhaitez pas d'héritage : Vous pouvez réinitialiser la propriété à sa valeur initiale en utilisant les mots-clés initial ou unset.
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

Exemple :

La propriété all

La propriété all est une propriété qui peut réinitialiser presque toutes les propriétés CSS, y compris celles qui sont héritables, pour un élément spécifié en une seule fois. Plus précisément, vous pouvez utiliser les trois mots-clés suivants pour définir les propriétés d'un élément :.

  • initial : Réinitialise toutes les propriétés à leurs valeurs initiales.
  • inherit : Hérite de toutes les propriétés de l'élément parent.
  • unset : Hérite de la propriété si elle est héréditaire, sinon la réinitialise à sa valeur initiale.

all est très utile lorsque vous souhaitez réinitialiser ou définir plusieurs propriétés en bloc, plutôt que de définir uniquement des propriétés spécifiques individuellement.

Exemple de réinitialisation aux valeurs initiales 

1.all-initial {
2    all: initial;
3    background-color: lightskyblue;
4}

  • Lorsque vous souhaitez réinitialiser tous les styles précédemment définis pour un élément spécifique et le ramener à son état initial, utilisez all: initial comme ceci.

  • Dans cet exemple, toutes les propriétés de l'élément <div> avec la classe .all-initial sont réinitialisées aux valeurs initiales par défaut du navigateur.

Exemple d'héritage 

 1.parent-inherit {
 2    color: blue;
 3    font-size: 20px;
 4    border: 1px solid blue;
 5}
 6
 7.all-inherit {
 8    all: inherit;
 9    background-color: lightskyblue;
10}
  • Utiliser all: inherit fait que toutes les propriétés héritent de l'élément parent.
  • Dans cet exemple, les éléments avec la classe .all-inherit héritent de toutes les propriétés, telles que color et font-size, de l'élément parent.

Exemple de détermination de la valeur initiale ou de l'héritage basé sur des conditions 

 1.parent-unset {
 2    color: blue;
 3}
 4
 5.all-unset {
 6    font-weight: bold;
 7}
 8
 9.all-unset {
10    all: unset;
11}
  • Utiliser all: unset fait que les propriétés sont héritées si c'est possible ; sinon, elles sont réinitialisées à leurs valeurs initiales.
  • Dans ce cas, color est héritée, tandis que font-weight est réinitialisé à sa valeur initiale, généralement normal.

Relation avec la spécificité (priorité) 

1.all-with-important {
2    color: red !important;
3    background-color: lightskyblue;
4}
5
6.all-with-important {
7    all: initial;
8}

  • La propriété all est un puissant mécanisme de réinitialisation, mais elle est affectée par la spécificité CSS. Si un élément spécifique a des spécifications de style fortes, la propriété all peut ne pas être en mesure de remplacer ces styles. Par exemple, les propriétés spécifiées avec !important ne peuvent pas être affectées.

  • Dans cet exemple, même si vous essayez de réinitialiser le style avec all: initial, la propriété color ne sera pas réinitialisée en raison de la spécification color: red !important.

Éléments de niveau bloc et éléments en ligne

Éléments de niveau bloc

  • Exemple: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • Caractéristiques:
    • Ils apparaissent toujours sur une nouvelle ligne et s'étendent pour occuper toute la largeur de leur élément parent.
    • La largeur (width) et la hauteur (height) peuvent être librement définies.
    • Les marges (margin) et les espacements internes (padding) peuvent être définis dans toutes les directions et affecteront tous les côtés.
1div {
2    width: 80%;  /* Set the width to 80% of its parent element's width */
3    padding: 20px;  /* Add a padding of 20 pixels on all sides */
4    margin: 10px 0; /* Add a margin of 10 pixels top and bottom, 0 pixels left and right */
5}

Éléments en ligne

  • Exemple: <span>, <a>, <strong>, <em>, <img>, <label>
  • Caractéristiques:
    • Ils apparaissent à côté d'autres éléments en ligne sur la même ligne.
    • La largeur (width) et la hauteur (height) ne peuvent pas être directement définies (sauf si display: block est appliqué).
    • Définir des marges (margin) ou des espacements internes (padding) verticalement a un effet limité (les marges et espacements horizontaux sont efficaces).
1a {
2    padding: 5px;  /* Padding for inline elements */
3    margin-right: 10px;  /* Set margin to the right */
4    color: blue;
5}

Différences entre les éléments de type bloc et les éléments en ligne

  • Paramètres de largeur et de hauteur:

    • Éléments de niveau bloc : la largeur et la hauteur peuvent être définies.
    • Éléments en ligne : la largeur et la hauteur ne peuvent généralement pas être définies.

  • Marge et rembourrage:

    • Éléments de niveau bloc : les marges et les espacements internes sont appliqués à tous les côtés.
    • Éléments en ligne : les marges et espacements internes en haut et en bas sont inefficaces ou ont un effet limité.

  • Méthode de mise en page:

    • Éléments de niveau bloc : automatiquement placés sur une nouvelle ligne.
    • Éléments en ligne : alignés sur la même ligne avec d'autres éléments en ligne.

Comme vous pouvez le voir, il y a des différences dans la façon dont les styles CSS sont appliqués aux éléments de niveau bloc et aux éléments en ligne. Dans les éléments de niveau bloc, les propriétés CSS liées à la mise en page telles que la largeur, la hauteur, les marges et les espacements internes sont appliquées comme spécifié. En revanche, pour les éléments en ligne, la définition de propriétés CSS liées à la mise en page comme la largeur, la hauteur, les marges ou les espacements internes peut ne pas s'appliquer ou s'appliquer de manière limitée.

Gestion CSS des éléments de niveau bloc et des éléments en ligne 

1span {
2    display: block;  /* Display the span element as a block-level element */
3    width: 100px;
4    height: 50px;
5}

Cependant, en définissant la propriété display sur block ou inline-block, vous pouvez ajuster les styles tels que la largeur et la hauteur pour les éléments en ligne comme s'il s'agissait d'éléments de type bloc.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Bases du CSSDétails des sélecteurs d'attributs en CSS