Heritages et cascades

Comment les styles CSS se combinent entre eux
et se transmettent de balises en balises

Comme l'explique notre page d'introduction, il existe plusieurs façon possibles de définir des styles CSS. Ces styles peuvent se combiner entre eux pour définir l'apparence finale de vos pages.

Fort heureusement, ces règles de combinaison sont assez simples à comprendre et à mettre en pratique. Vous devrez les maitriser avant de passer à la création de votre site Web.

Sélection de liens concernant l'héritage de propriétés et les cascades.

Ces liens pointent vers des pages dont les contenus complètent notre article.

L'héritage en CSS
Pour ceux qui auraient eu du mal à suivra nos explications, voici un cours trés simple sur l'héritage des propriétés CSS.

Comprendre l'héritage et la parenté des styles CSS
Cette page comporte des explications sur Le modèle "Parent-Enfant(s)", sur le Cas de la balise de lien <a>, sur L'Héritage par imbrication des Classes ou des Id ainsi qu'un exemple d'utilisation de ces notions à travers un menu sous forme de liste.

L'assignation des valeurs des propriétés, la cascade et l'héritage
Cette page est une traduction d'un document du W3C. Cette traduction est précise, mais les termes employés sont parfois un peu complexes.

Cette page aborde en tout cas des points trés approfondis de l'héritage et des cascades.

Cascade CSS
et priorité des sélecteurs
C'est surtout pour ses précisions sur les sélecteurs que cette page est intéressante.

Elle explique le rôle et l'utilité du sélecteur nommé "!important" et évoque l'existence des sélecteurs de medias tels que screen, print, handheld, projection et voice-family.

Pour en savoir plus sur les sélecteurs de medias, lisez :
tous les types de sélecteurs.

Comprendre la cascade
Cette page analyse à fond les priorités des définitions en cascades. C'est l'occasion de constater que les choses sont bien moins simples qu'il n'y paraît !

Les pseudo-classes
Yoyodesign fait le point sur les mystérieuses pseudo-classes que notre article ne fait qu'évoquer.

GouBlog met en évidence un bug d'Internet Explorer 6 qui ne supporte que 4 niveaux d'héritage lors de l'utilisation de la règle @import.

Toutes les règles ci-contre sont à maîtriser si vous compter créer votre site Web en langage HTML tout en utilisant des styles CSS.

Résumé des règles

Le style d'un élément HTLM peut être hérité d'un élément "parent".
Les styles définis en dernier remplacent les styles définis auparavant.
Les styles se combinent entre eux, quelle que soit la façon dont on les a définis.
Une définition de style peut préciser la façon dont le style s'applique : à quels éléments, à quelles classes, à quels ID, dans quel contexte.
On peut attribuer un style à un emboîtement particulier d'éléments HTML

1- Le style d'un élément HTLM peut être hérité d'un élément "parent".

Certains styles, tels que le type de caractère, sa couleur, l'alignement du texte, etc., se transmettent automatiquement des blocs HTML "parents" vers leurs "enfants". D'autres styles tels que la bordure, et les marges (margin et padding) ne se transmettent pas.

Example :

Cette première phrase sera écrit en Times.

<p>
Ce paragraphe sera également écrit en Times car sa propriété "font-family" sera héritée de son parent <div>. Par contre, ce paragraphe ne sera pas décalé sur la droite par rapport à la première phrase, car la propriété padding ne se transmet pas par héritage.
</p>

</div>

Dans cet exemple, le bloc <div> est parent, du paragraphe <p> (il le contient). On pourra également dire que <p> est enfant de <div> (il est contenu par <div>)

En théorie, il est possible de "forcer" l'héritage d'une propriété non-héritable en précisant, par exemple : <p style="padding:inherit" >. Malheureusement, Internet Explorer ne supporte pas l'attribut inherit, même dans sa version 7. Nous devrons donc nous passer de cette possibilité et re-préciser explicitement les propriétés non-héritables que nous souhaitons appliquer aux éléments enfants :

Example :

Cette première phrase sera écrit en Times.

<p style="padding-left:30px" >
Ce paragraphe sera également écrit en Times car sa propriété "font-family" sera héritée de son parent <div>. Ce paragraphe sera également décalé sur la droite par rapport à la première phrase, car nous avons répété le "padding" qui ne se transmet pas par héritage. </p>

</div>

2- Les styles définis en dernier remplacent les styles définis auparavant.

Si vous définissez une proprité de style et que vous re-définissez plus tard la même propriété pour le même type d'objet, c'est la dernière définition qui sera prise en compte par les navigateurs.

Example :

CSS

Cette définition de style est à placer dans la section <head> de votre page ou dans une feuille de styles séparée.

p { color:green; }

HTML
<p>Ce texte sera en vert.</p>

<p style="color:blue" >Ce texte sera en bleu parce que la propriété "color:blue" est la dernière à avoir été définie pour ce paragraphe.</p>

Cette règle du "dernier-gagnant" s'applique aussi dans le cas ou vous avez une combinaison de feuilles de styles séparées + définitions de style dans l'en-tête de la page (<head>).

3- Les styles se combinent entre eux, quelle que soit la façon dont on les a définis.

Les styles qui s'appliquent à un élément peuvent être une combinaison de n'importe quelles listes de définitions :

Une ou plusieurs feuilles de styles externes,
Les définitions placées dans l'en-tête de la page,
Les définitions placées directement dans la balise de l'élément HTML,
Les définitions héritées des blocs-parents.

Voici un exemple complexe combinant ces possibilités :

Document "mes-styles.css"

 .ma-classe {

  border:2px dashed red; 

}

#mon-ID {

  font-size:large;

  color:white;

} 

body {

  font-weight:bold; 

}

Document "ma-page.html"

<head> <link href="mes-styles.css" media="screen" rel="stylesheet" type="text/css" /> <style type="text/css"> .ma-classe { background-color:orange; } </style> </head>

<body> <div class="ma-classe" id="mon-ID" style="font-style:italic;">

Exemple de texte.

</div> </body>

Dans cette exemple, la classe "ma-classe" s'est vu attribuer un cadre rouge dans la feuille de style séparée et un fond orange dans l'en-tête de la page. Le bloc <div> comportant le texte d'exemple récupère tous les styles de la classe "ma-classe", plus les styles définis dans "mon-ID" auxquels on ajoute le style "italic" défini directement dans la balise.

De plus, ce paragraphe hérite du style font-weight:bold qui a été attribué à son parent <body>.

4- Une définition de style peut préciser la façon dont le style s'applique : à quels éléments, à quelles classes, à quels ID, dans quel contexte.

Pour préciser les conditions dans lesquelles un style va s'appliquer, vous avez plusieurs possibilités :

Préciser le type d'élément HTML
Préciser la classe
Préciser l'ID
Préciser le "type modifier" (ou pseudo-classe)

Dans Premiers pas avec les CSS, nous citons plusieurs exemples qui démontrent comment définir un style pour un type d'élément (tel que <p>, par exemple), pour une classe ou pour un ID.

Il nous reste donc à aborder la notion de "type modifier".

Le principe du "type modifier" et de préciser dans quel contexte un style va s'appliquer ou non à un élément HTML. Les "type modifiers" sont très peu nombreux. Nous nous contenterons d'examiner ceux qui sont reconnus par tous les navigateurs. Ils s'appliquent tous les quatre à la balise <a> qui sert à créer un lien :

a:hover : permet de préciser l'apparence d'un lien lorsque l'utilisateur survol le lien avec sa souris.
a:active : permet de préciser l'apparence d'un lien lorsque l'utilisateur clique sur ce lien.
a:visited : permet de préciser l'apparence d'un lien lorsque l'utilisateur a déjà cliqué sur ce lien.
a:link permet de restreindre la définition de styles aux "vrais" liens, car la balise <a> peut également être utilisée pour positionner des ancres à l'intérieur d'une page.

Exemple :

CSS

Cette définition de style est à placer dans la section <head> de votre page ou dans une feuille de styles séparée.

a {color:brown;font-weight:bold;} a:hover {color:red;} a:active {color:blue;} a:visited {color:purple;}

HTML
<a href="recherche.php"> Exemple de lien </a>

NOTE : les "type modifiers" sont également appelés "pseudo-classes".

5- On peut attribuer un style à un emboîtement particulier d'éléments HTML

Cette dernière règle offre une trés grande souplesse dans la définition des styles.

Vous pouvez par exemple souhaiter afficher les liens situés à gauche de votre page en vert et ceux de droite en rouge. Voici comment vous pouvez procéder :

CSS

Propriétés communes aux deux classes.

.bloc-gauche, .bloc-droite{ position:absolute; top:0px; width:60px; border:1px solid orange; }

Propriétés propres à chaque classe.

.bloc-gauche {left:0px;} .bloc-droite (right:0px;}

Couleur des liens pour chaque classe.

.bloc-gauche a {color:green; left:0px;} .bloc-droite a (color:red; right:0px;}

HTML

Utilisation des classes dans votre code HTML.

Résultat :

Lien 1
Lien 2
Lien 3

Notez la formulation

.bloc-gauche, .bloc-droite{}

qui permet d'attribuer aux deux classes des propriétés de styles identiques, sans avoir à les déclarer deux fois.

On peut aussi définir un style particulier pour un emboîtement précis d'éléments HTML.

Exemple 1 - emboîtement de <p> dans <div> :

CSS div p{font-weight:bold};

HTML
<p>Ce paragraphe n'est pas en gras</p>

<div>
<p>Ce paragraphe est en gras car il est à l'intérieur d'un bloc div</p>
</div>

Exemple 2 - emboîtement de <p> dans 2 <div> successifs :

CSS div div p{font-weight:bold};

HTML
<div>
  <div>
        Ce texte n'est pas en gras car il n'est pas dans un paragraphe.
<p>Ce paragraphe est en gras car il est à l'intérieur de deux blocs div emboîtés, ce qui correspond bien à notre définition de style</p>
  </div>
</div>

Exemple 3 - emboîtement d'une classe dans un div:

CSS .mon_style{font-weight:bold};

<-- Emboîtement

div .mon_style{font-style:italic};

HTML
<p class="mon_style">Ce paragraphe est en gras</p>

<div>
<p class="mon_style">Ce paragraphe est en gras et en italique</p>
</div>

<p>Ce paragraphe est écriture normale</p>

<div>Ce paragraphe est écriture normale</div>

Attention : Ne confondez pas la déclaration suivante :

div .mon_style{font-style:italic}; (avec un espace)

Avec celle-ci :

div.mon_style{font-style:italic}; (sans espace)

Ou avec celle là :

div, .mon_style{font-style:italic}; (avec une virgule)

Dans le premier cas, tout élément ayant les particularités suivantes :

- l'élément à la classe "mon_style"
- l'élément est emboîté dans un élément <div>

sera en italique (dans notre exemple, on constate que cela fonctionne avec l'élément <p>).

Dans le deuxième cas, seuls les éléments <div> ayant pour classe "mon_style" seront en italique (il ne sagit donc pas d'emboîtement mais de la définition du contexte dans lequel "mon_style" doit s'appliquer ).

Dans le troisième cas, tous les éléments <div> et tous les éléments ayant pour classe "mon_style" seront en italique. Il s'agit d'une déclaration commune de propriété .

Le copyright de cette page appartient à css-faciles.

Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Heritages et cascades

Comment les styles CSS se combinent entre eux et se transmettent de balises en balises

Comme l'explique notre page d'introduction, il existe plusieurs façon possibles de définir des styles CSS. Ces styles peuvent se combiner entre eux pour définir l'apparence finale de vos pages.

Fort heureusement, ces règles de combinaison sont assez simples à comprendre et à mettre en pratique. Vous devrez les maitriser avant de passer à la création de votre site Web.

Sélection de liens concernant l'héritage de propriétés et les cascades.

Résumé des règles

1- Le style d'un élément HTLM peut être hérité d'un élément "parent".

2- Les styles définis en dernier remplacent les styles définis auparavant.

3- Les styles se combinent entre eux, quelle que soit la façon dont on les a définis.

4- Une définition de style peut préciser la façon dont le style s'applique : à quels éléments, à quelles classes, à quels ID, dans quel contexte.

5- On peut attribuer un style à un emboîtement particulier d'éléments HTML

Comment les styles CSS se combinent entre eux
et se transmettent de balises en balises