 |
|
 |
|
Comment fonctionnent les CSS?
Pourquoi les noms des produits ne changent de couleur que si je modifie les A:hover et le A: de la feuille CSS? |
|
|
|
|
 |
|
Tout simplement parce que A est la dernière balise apliquée au nom des produits.
Comme son nom l'indique les CSS sont des feuilles de style EN CASCADE!!! c'est à dire que c'est toujours le style correspondant à la derniere balise qui est appliqué. Ce qui est bien pratique et permet d'appliquer un style ajouté aux précédents
La difficulté arrive quand on cumule les styles.
par exemple la page html contient | Code: | <table border="0" cellpadding="0" cellspacing="0" class="rouge">
<tr class="texteBlanc">
<td class="souligne">texte et <a href="#">lien</a> mis en forme</td>
</tr>
</table> |
et le css | Code: | .rouge {
background-color: #FF0000;
}
.texteBlanc {
color: #FFFFFF;
}
.souligne {
text-decoration: underline;
} |
On affiche donc un texte blanc, souligné sur un fond rouge. Par contre si le lien <a> est défini dans la css | Code: | a {
color: #FF0000;
} |
Le lien est invisible car rouge sur rouge.
Pour pallier au problème il suffit d'ajouter une class dans la balise <a> | Code: | | <a href="#" class="lien"> |
Permettant de définir ce que l'on veut comme style.
 il est également possible de définir un effet de rollover spécifique à ce lien. Par exemple, pour que le lien soit barré quand on le survole, il suffit de définir le style ".lien:hover"
| Code: | .lien {
color: #FFFFFF;
}
.lien:hover {
text-decoration: line-through;
} |
Pour plus d'info sur les CSS, voir le post de Mosaïc sur le forum
Liste de tutoriels CSS
Sujet régulièrement mis à jour. Merci à lui |
|
|
|
|
|
|
Auteur : xaglo |
Mise à jour le 12/05/2005 |
|
 |
|
|
|
|
|
