Rechercher :
Accueil » Look & Feel Connexion

Question 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?
Réponse 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.

Idea 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

Retour