[CSS] Un style pour en surcharger un autre ?

[StarNab]

Bonjour,

C'est un peu le boxon sur mon site. De ce fait, les liens sont amenés à avoir des couleurs différentes pour être lisible...
En fait, j'aimerais avoir un style général qui s'applique par défaut et, le cas échéant, si cela a été spécifié pour la classe, qu'un autre style s'applique.

Alors j'ai essayé pas mal de trucs (l'ordre de déclaration des styles dans la CSS entre autres), mais j'ai le sentiment de mal m'y prendre. (Je le vois surtout avec mes yeux à vrai dire).

Quelqu'un pourrait il m'éclairer ?

 

[toutankhaton]

si tu ne parle que des liens c'est simple.

Par exemple, on fais tout les liens en vert souligné par defaut :
a { color:green; text-decoration:underline }

et si le lien à une classe "important", alors on le met en gras
.important a { font-weight:bold }

et si le lien se trouve dans ton menu et à une classe "important", on le met en gras aussi, mais il devient bleu

#menu a.important { color:blue; }

bref, sachant que a { } permet de style les liens par default, et que tu peux varier avec les classes et les id, je pense que tu pourras styler tes liens.

Si j'ai pas bien compris la question, donne un exemple concret de ce que tu voudrais faire

 

[StarNab]

D'accord merci.
Mais est-ce que l'ordre de déclaration des styles influent sur le rendu de la page ? Parfois j'ai l'impression que oui et parfois...

Je veux dire que est-ce que si dans ma CSS je mets

a { ... }

.maclass a { ... }

ca différera de

.maclass a { ... }

a { ... }

?

(Et rajoute par dessus les différences d'interprétation d'un navigateur à l'autre et on a une belle mélasse...)

 

[oberon]

ça ne changera rien car quel que soit l'ordre, le navigateur applique toujours les styles des sélecteurs les plus spécifiques.

a { color:red }
.toto a { color:blue}

<div class="toto"><a href="">lien</a></div>

le lien sera bleu par .toto a{} est un sélecteur plus précis que a{} qui est généraliste.

Si tu as :

.toto a {color:blue; }
a { color:red; border:1px solid black}

<div class="toto"><a href="">lien</a></div>

ton lien ci dessus sera bleu avec une bordure noire.

 

[StarNab]

Ok merci ! J'y vois plus clair.

Reste plus qu'à remettre les mains dans le camboui.