Cette page met en évidence la façon dont les feuilles de style interagissent dans une cascade et comment les éléments héritent leur style de leurs parents.
Vous améliorerez votre feuille de style d'exemple en utilisant l'héritage pour changer le style de nombreuses parties de votre document à la fois.
Information : cascade et héritage
Le style final d'un élément peut être spécifié à de nombreux endroits, qui peuvent interagir de manière complexe. C'est ce qui rend CSS puissant, mais peut aussi le rendre déroutant et difficile à déboguer.
Trois sources principales d'information de style forment une cascade.
Celles-ci sont :
- Le style par défaut du navigateur pour le langage de balisage
- Le style spécifié par l'utilisateur lisant le document
- Le style lié au document par son auteur
Le style de l'utilisateur modifie le style par défaut du navigateur. Le style de l'auteur du document modifie ensuite le style plus avant. Dans ce tutoriel, vous êtes l'auteur de votre document, et vous travaillez uniquement avec des feuilles de style d'auteur.
| Lorsque vous lisez ce document dans votre navigateur, une partie du style visible vient des réglages par défaut de votre navigateur pour HTML.
Une partie du style peut venir de vos paramètres utilisateur dans les Options, ou d'un fichier Enfin, une partie du style provient de feuilles de style liées au document par le serveur wiki. |
Lorsque vous ouvrez votre document d'exemple dans le navigateur, les éléments STRONG sont en gras par rapport au reste du texte. Cela provient du style par défaut du navigateur pour HTML.
Les éléments STRONG sont rouges. Cela provient de votre propre feuille de style.
Les éléments STRONG héritent aussi en grande partie du style de l'élément P, étant ses enfants. De même, l'élément P hérite en grande partie du style de l'élément BODY.
Pour les styles dans la cascade, les feuilles de style de l'auteur ont priorité, ensuite ceux de l'utilisateur et enfin les réglages par défaut du navigateur.
Pour les styles hérités, le style propre d'un nœud enfant a priorité sur le style hérité de son parent.
Ce ne sont pas les seules priorités qui s'appliquent. Une prochaine page du tutoriel expliquera cela plus en détail.
CSS fournit également une manière pour l'utilisateur de passer outre le style de l'auteur du document, en utilisant le mot-clé !important.
Cela signifie qu'en tant qu'auteur du document, vous ne pouvez pas toujours prédire exactement ce que vos lecteurs verront. Si vous voulez connaître tous les détails de la cascade et de l'héritage, consultez Assigning property values, Cascading, and Inheritance note : ce lien existe(ra) peut-être quelque part en français dans la spécification CSS. |
Action : utilisation de l'héritage
Éditez votre exemple de fichier CSS.
Ajoutez cette ligne à l'aide d'un copier-coller. Que vous la mettiez au dessus ou en dessous de la ligne déjà existante n'a pas grande importance. Cependant, l'ajouter en haut est plus logique étant donné que dans votre document l'élément P est le parent de l'élément STRONG :
p {color: blue; text-decoration: underline;}
Maintenant, actualisez dans votre navigateur pour voir l'effet sur votre document. Le soulignement affecte tout le texte du paragraphe, y compris les lettres initiales. Les éléments STRONG ont hérité du style souligné depuis leur élément parent P.
Mais les éléments STRONG sont toujours rouges. La couleur rouge est leur propre style, il a donc priorité sur la couleur bleue de leur élément parent P.
|
|
Modifiez votre feuille de style afin que seules les lettres rouges soient soulignées :
|
Pour continuer
Si vous avez eu des difficultés à comprendre cette page, ou avez des commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.
Votre feuille de style d'exemple spécifie des styles pour les balises P et STRONG, qui changent le style des éléments correspondants au sein de votre document. La page suivante explique comment spécifier des styles de manière plus sélective : Les sélecteurs.