style "rouge" seul
style "rouge" + style "grosse-police"
style "vert" seul
style "rouge" + style "vert". Le style vert étant en 2ième position et portant sur la même fonction "color:", il écrase le style "rouge".
style "rouge" + style "grosse-police" + style "centrage"
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
.centrage {text-align:center} /* centre le texte */
hr {width:70%} /* défini la largeur du séparateur */
.rouge {color:red} /* met le texte en rouge */
.vert {color:green} /* met le texte en vert */
.grosse-police {font-size:30px} /* met le texte en police 30 pixels
*/
</style>
</head>
<body>
<p class="rouge">style "rouge" seul </p>
<!-- Utilisation d'un seul style -->
<hr class="centrage" width="70%" /> <!--
trait séparateur -->
<p class="rouge grosse-police">style "rouge" +
style "grosse-police" </p> <!-- Utilisation de 2
styles qui s'ajoutent -->
<hr class="centrage" width="70%" />
<p class="vert">style "vert" seul </p> <!--
Utilisation d'un seul style -->
<hr class="centrage" width="70%" />
<p class="rouge vert">style "rouge" + style "vert".
Le style vert étant en 2ième position et portant sur la même
fonction <b>"color:"</b>, il écrase le style
"rouge".</p> <!-- Utilisation de 2 styles dont le
second écrase le 1er -->
<hr class="centrage" width="70%" />
<p class="rouge grosse-police centrage">style "rouge"
+ style "grosse-police" + style "centrage"</p> <!--
Utilisation de 3 styles qui s'ajoutent -->
</body>
</html>
COMMENTAIRES
On peut parfaitement, dans les navigateurs modernes, créer une classe contenant plusieurs styles.
Ce type d'écriture est assez peu utilisé, ce qui est dommage. On peut en effet l'utiliser dans 2 optiques :
Optique 1 :
On crée des "bouts" de styles, que l'on combine ensuite à l'infini. Cela rend plus libre dans le développement, en accroissant le nombre de possibilités, et cela réduit la taille et le nombre des styles.
Optique 2 :
On peut écraser une partie d'un style général grace à un petit style combiné en seconde position et portant sur une partie seulement du code du premier style.
Il y a un principe à conserver à l'esprit : chaque style est composé de fonctions. Si le second ou le troisième style contient un fonction existant déjà dans un style situé avant dans la classe, il écrasera la précédente valeur de la fonction, et la remplacera par la sienne.
C'est l'exemple ou 2 styles avec 2 couleurs de texte différentes sont mis dans la même classe : la seconde couleur remplace la première.
Mais ce n'est pas tout le 1er style qui est écrasé, seulement la fonction en doublon.
Netscape 4 n'interprète que le 1er style de la classe. Marche normalement pour IE 5.0 et plus, ainsi que pour les navigateurs Gecko, opéra ou KHTML.