Ordre de priorité des styles
Comment est géré l'ordre de priorité des styles ?
Priorité entre les classes et les sélecteurs de type
Dans l'exemple suivant on applique la couleur verte et la mise en gras à toutes les balises p.
Code CSS :
p
{
color:red;
font-weight:bold;
}
.pspecial
{
color:green;
}
Au niveau du code XHTML, voyons ce qui se passe si on utilise la classe .pspecial dans une balise p particulier.
Code XHTML</acronym :
<p>
Ce paragraphe s'affiche en rouge, et en gras.</p>
</p>
<p class=".pspecial">test<p>
Ce paragraphe s'affiche en vert parce que le style de classe est prioritaire par rapport au style standard de la balise p.
<p>
Ce paragraphe s'affiche aussi en gras rouge.
</p>
Remarquons que tous les paragraphes sont colorés en rouge sauf un. Il s'agit du paragraphe où l'on a appliqué le style .pspecial. Par contre, le paragraphe en question a gardé la mise en gras. Les propriétés des deux sélecteurs (p et .pspecial) se combinent donc entre elles.
S'il y a des propriétés communes (color par exemple), c'est la valeur définie dans la classe (color:green) qui sera considérée. En d'autres termes, les classes (.pspecial) sont prioritaires par rapport aux styles standards définis à l'aide des sélecteurs de type (p)
Priorité entre deux classes de même nom
Si deux classes de même nom sont définies avec des propriétés différentes, c'est celle de la dernière classe définie qui sera prise en compte.
Code CSS :
.pspecial
{
color:red;
}
.pspecial
{
color:yellow;
}
Lorsqu'on utilise la classe .pspecial dans une balise p par exemple, le paragraphe sera coloré en jaune mais pas en rouge puisque c'est la dernière définition qui est prioritaire.
Code XHTML :
<p class="pspecial"> C'est la dernière définition qui sera prise en compte. </p>
Priorité entre les classes et les id
Définissons maintenant deux types de styles, un à l'aide d'un id et un autre en utilisant une classe.
Code CSS :
#unid
{
color:blue;
}
.uneclasse
{
color:red;
font-weight:bold;
}
Code XHTML :
<p id="unid" class="une-classe"> Eh voilà, c'est l'id qui emporte. </p>
Le paragraphe s'affiche en bleu puisque c'est le style de l'id qui est prioritaire sur la classe.
Priorité entre les styles internes et la feuille externe css
Par exemple, vous réunissez tout votre style dans une feuille de style CSS. Dans cette feuille de style, vous spécifiez que tous les paragraphes des pages XHTML auxquelles sera attachée cette feuille de style auront une taille de police de 20px.
Pour une raison ou pour une autre, vous auriez besoin de définir un autre style qui est local à votre page tout en rattachant la feuille de style externe. Il se peut que dans cette page, il y ait un paragraphe spécial qui doit être spécifié en taille plus grande. Dans ce cas c'est le style défini en interne qui est prioritaire par rapport au style externe.
Voici par exemple le code dans la feuille de style externe qu'on va nommer feuille.css :
Code CSS :
p
{
font-size: 20px;
}
Voici la page XHTML à laquelle on rattache la feuille de style feuille.css :
Code XHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Priorité des balises</title>
<style type="text/css">
p.italic
{
font-style:italic;
font-size: 40px;
}
</style>
</head>
<body>
<p>
Ce paragraphe suit le style externe.
</p>
<p class="italic">
Ce paragraphe suit le style interne.
</p>
</body>
</html>
Le style en interne p.italic est appliqué parce qu'il est prioritaire par rapport au style externe.
