La mise en forme finale d'un élément peut ếtre obtenue grâce à plusieurs règles présentes à plusieurs endroits et qui interagissent de façon complexe. C'est cette complexité qui rend CSS si puissant mais c'est également une source de confusion et de difficultés lorsqu'il s'agit de résoudre des problèmes.
----- Code CSS --------
/* ************************************ */
/* Propriétés communes aux deux classes */
/* ************************************ */
.bloc-gauche, .bloc-droite {
position:absolute;
top : 50px;
width:60px;
border: 1px solid orange;
}
/* ************************************ */
/* Propriétés propres à chaque classe */
/* ************************************ */
.bloc-gauche { left:30px; }
.bloc-droite { right:30px; }
/* ************************************ */
/* Couleur des liens */
/* ************************************ */
a { color:blue; }
/* ************************************ */
/* Couleur des liens pour chaque classe */
/* ************************************ */
.bloc-gauche a { color:green; }
.bloc-droite a { color: red ;}
------ code HTML -------
<div id="haut">
<a href="http://www.hei.fr">Je suis un lien vers le site d'HEI</a>
</div>
<div class="bloc-gauche">
<a href="page1.php">Lien 1</a><br/>
<a href="page2.php">Lien 2</a><br/>
<a href="page3.php">Lien 3</a><br/>
</div>
<div class="bloc-droite">
<a href="page1.php">Lien 1</a><br/>
<a href="page2.php">Lien 2</a><br/>
<a href="page3.php">Lien 3</a><br/>
</div>
Voir
Ne pas confondre les écritures suivantes:
Les liens de classe nommée (ici menu) :
----- Code CSS --------
/* signifie les liens de classe menu */
a.menu { color:green }
----- Code HTML --------
<a href="www.google.fr" class="menu">Google</a>
Les liens emboités dans une classe :
----- Code CSS --------
/* lien inclus dans une classe menu */
.menu a { color:green }
----- Code HTML --------
<div class="menu">
<a href="page1.php">Lien 1</a>
</div>