L’héritage en CSS

apcpedagogie > Les cours de programmation > CSS > L’héritage en CSS

L’héritage en CSS

  • 25 novembre 2018
  • Posté par: Riadh HAJJI
  • Catégorie: CSS
871 vues

L’héritage en CSS

  1. Objectif

    • Apprendre le fonctionnement de l’héritage dans les CSS.



    d-client=”ca-pub-2041146479004630″
    data-ad-slot=”1219671700″
    data-ad-format=”auto”>

  2. Définitions

    • L’héritage en CSS est le fait qu’un élément enfant possède les mêmes styles que l’élément qui le contient
    • La notion d’héritage signifie que tout élément HTML enfant va hériter, « en cascades », des styles de ses parents.
    • L’héritage correspond à la possibilité pour une balise de se voir appliquer les styles d’une balise ancêtre.
    • L’héritage des CSS est fondé sur le modèle Parent-Enfant(s) : chaque élément Enfant reçoit en héritage tous les styles de son élément Parent.

  3. L’héritage

    • Un Enfant reçoit tous les héritages de ses Parents, à partir du moment où la propriété peut être héritée (ce qui n’est pas le cas des propriétés de blocs).
    • L’héritage simplifie énormément le travail d’écriture de la feuille de style, puisque nous n’avons qu’à écrire les caractéristiques des Parents pour donner les mêmes aux Enfants.

      • Exemple:

    • La balise <html> est parent de <body>, et <table> est parent de <tr> qui lui-même est parent de <td>.

      • L’héritage en CSS repose sur des parents et des enfants. Chaque élément ou balise a au moins un parent, à l’exception de la balise qui n’a que des enfants.

  4. Valeurs de propriétés

    • Les CSS disposent de quatre valeurs de propriétés universelles spéciales pour contrôler l’héritage :
      1. inherit
        • indique que la valeur de propriété appliquée à l’élément sélectionné est la même que celle de l’élément parent.
      2. initial
        • initial indique que la valeur de propriété appliquée à l’élément sélectionné est la même que celle définie pour cet élément dans la feuille de style par défaut du navigateur.
        • Si aucune valeur n’est définie par la feuille de style par défaut du navigateur et que la propriété est naturellement héritée, alors la valeur de la propriété est fixée à inherit à la place.
      3. unset
        • réinitialise la propriété à sa valeur naturelle, ce qui signifie que si la propriété est naturellement héritée, elle se comporte comme inherit, autrement elle agit comme initial.
      4. revert
        • rétablit la propriété à la valeur qu’elle aurait eue si aucun style ne lui avait été appliqué. En d’autres termes, la valeur de la propriété est fixée à celle de la feuille de style de l’utilisateur (si elle est définie), sinon la valeur de la propriété est prise dans celle de la feuille de style par défaut de l’agent utilisateur.

  5. Cas de la balise de lien <a>

    • L’héritage s’applique aussi à la balise de liens <a>. Ses enfants sont les pseudo-classes suivantes :
      • :link (lien par défaut)
      • :visited (lien déjà visité)
      • :hover (lien au survol)
      • :active (lien actif)

  6. L’Héritage par imbrication des Classes ou des Id

    • CSS permet d’appliquer l’héritage à des classes personnalisées ou à vos id.
    • Exemple 1 :

    • <li> sera enfant de la classe .menu. Cela va affecter tous les éléments <li> contenus dans la classe .menu et uniquement ceux-là.
    • Cela évite d’écrire <li class="menu"> pour chaque élément de la liste.

Sommaire du cours CSS