PDF (adobe.com)

A propos des styles en cascade

Le terme en cascade fait référence à la façon dont un navigateur affiche finalement les styles pour des éléments spécifiques d'une page Web. Trois sources sont responsables des styles visibles sur une page Web : la feuille de style créée par l'auteur de la page, les éventuelles sélections de style personnalisées de l'utilisateur, et les styles par défaut du navigateur. Les sections précédentes expliquent la création de styles pour une page Web par l'auteur de la page Web et de la feuille de style qui y est associée. Toutefois, les navigateurs possèdent eux aussi des feuilles de style par défaut, qui déterminent la restitution des pages Web. En outre, les utilisateurs peuvent personnaliser leurs navigateurs en effectuant des sélections qui déterminent l'affichage des pages Web. L'apparence finale d'une page Web est le résultat de la combinaison (cascadre) des règles de ces trois sources, qui permet de restituer la page Web de manière optimale.

Ce concept va être illustré par une balise courante, la balise de paragraphe (<p>). Par défaut, les navigateurs comportent des feuilles de style qui définissent la police et la taille de police du texte des paragraphes, c'est-à-dire le texte placé entre balises <p> dans le code HTML. Ainsi, dans Internet Explorer, tout le texte du corps, y compris celui des paragraphes, s'affiche par défaut dans la police Times New Roman de taille moyenne.

Toutefois, si vous êtes l'auteur d'une page Web, vous pouvez créer une feuille de style qui remplace le style par défaut du navigateur pour ce qui est de la police et de la taille de police. Par exemple, vous pouvez créer la règle suivante dans votre feuille de style :

p { 
font-family: Arial; 
font-size: small; 
}

Lorsqu'un utilisateur charge la page, les paramètres de police du paragraphe et de taille de police que vous, auteur, avez définis, remplacent les paramètres par défaut du navigateur en la matière.

Les utilisateurs peuvent effectuer des sélections pour personnaliser l'affichage du navigateur selon leurs attentes. Par exemple, dans Internet Explorer, l'utilisateur peut choisir Affichage > Taille du texte > La plus grande, de manière à agrandir la police et la rendre plus lisible. En fin de compte (du moins, dans ce cas), la sélection de l'utilisateur remplace à la fois les styles par défaut du navigateur pour la taille de police par défaut dans les paragraphes, et les styles de pargraphe créés par l'auteur de la page Web.

L'héritage est un autre élément important de la cascade. Les propriétés de la plupart des éléments d'une page Web sont héritées. Par exemple, les balises de paragraphe héritent de certaines propriétés des balises body, les balises de listes à puces de certaines propriétés des balises de paragraphe, et ainsi de suite. Ainsi, vous pouvez créer la règle suivante dans votre feuille de style :

body { 
font-family: Arial; 
font-style: italic; 
}

Tout le texte des paragraphes de votre page Web (ainsi que le texte qui hérite des propriétés de la balise de paragraphe) sera en Arial italique, car la balise de paragraphe hérite de ces propriétés à partir de la balise body. Vous pouvez toutefois vous montrer plus spécifique avec vos règles et créer des styles qui supplantent la formule d'héritage standard. Par exemple, vous pouvez créer les règles suivantes dans votre feuille de style :

body { 
font-family: Arial; 
font-style: italic; 
} 
p { 
font-family: Courier; 
font-style: normal; 
}

Tout le texte du corps est en Arial italique, sauf le texte des paragraphes (et celui des balises héritières), qui s'affiche en Courier normal (non italique). D'un point de vue technique, la balise de paragraphe hérite tout d'abord des proiriétés définies pour la balise body, puis elle ignore celles-ci, car des propriétés ont été définies spécifiquement pour elle. En d'autres termes, bien que les éléments de page héritent généralement des propriétés supérieures, l'application directe d'une propriété à une balise entraîne toujours l'écrasement de la formule d'héritage standard.

La combinaison de tous les facteurs exposés ci-dessus et d'autres facteurs, tels que la spécificité CSS (un système qui attribue un poids différent à des types précis de règles CSS) et l'ordre des règles CSS, finit par créer une cascade complexe, où les éléments aux priorités les plus élevées écrasent les éléments aux propriétés les plus basses. Pour plus d'informations sur les règles en matière de cascade, d'héritage et de spécificité, visitez le site www.w3.org/TR/CSS2/cascade.html.