Liens et CSS

Salut tout le monde !

Sur le site que je réalise, j'ai mis des CSS pour mettre en forme mes liens.
J'ai un index, dans lequel je fais des include php d'articles dans la partie centrale du site. sur mon index j'ai donc des liens, et pour faciliter la navigation, j'ai dans les articles inclus des liens également. Mais je voudrais que ceux-ci soit plus petits. J'ai donc mis entre deux balises <style> en haut des pages articles ce code (style 1):

 
a:link { color: #666666; text-decoration: none; font-size:10px; }
a:visited { color: #666666; text-decoration: none; font-size:10px; }
a:active { color: #CCCCCC; text-decoration: none; font-size:10px; }
a:hover { color: #CCCCCC; text-decoration: none; font-size: 10px;}

mais sur mon index j'ai egalement entre deux balises <style> ce code (style 2) :

a:link { color: #000066; text-decoration: none; font-size:12px; }
a:visited { color: #000066; text-decoration: none; font-size:12px; }
a:active { color: #666666; text-decoration: none; font-size:12px; }
a:hover { color: #666666; text-decoration: none; font-size: 12px; } 

Je pensais que le style 1 de l'index allait s'appliquer aux liens de l'index et le style 2 des articles s'appliquer aux articles. Mais en fait le style 2 des articles remplace le style 1 de l'index . Ce qui fait que dans le menu de l'index, mes liens se transforment si on affiche un article.

Je me demandais donc s'il était possible d'appliquer un style de liens seulement à une cellule de cette façon :

.LiensArticles {
font-family: Verdana;
a:link { color: #000066; text-decoration: none; font-size:12px; }
a:visited { color: #000066; text-decoration: none; font-size:12px; }
a:active { color: #666666; text-decoration: none; font-size:12px; }
a:hover { color: #666666; text-decoration: none; font-size: 12px; } 
}

j'ai donc essayé mais ca donne rien donc je suppose que, soit c'est pas possible, ce qui m'étonnerait , soit j'ai pas la bonne syntaxe, ce qui me semble plus probable vous auriez une idée ??
Modifié par prologg (12 Jan 2006 - 18:37)

Salut prologg !

Tout d'abord, il srait peut-être plus simple pour toi de mettre tout ton script css dans un fichier séparé et ensuite, de hiérarchiser tes classes suivant l'aspect que tu veux leur donner.

Comme tu l'a remarqué le nouveau style défini dans ton fichier remplace celui que tu avais précédemment codé.
Pour éviter ce genre de problème, je te conseillerais comme tu l'as indiqué de faire 2 classes différentes :

.lien_index {}
.lien_article {}

avec les caractéristiques que tu désires puis simplement d'appeler la classe voulu dans le lien :

<a href="..." class="lien_index">voici un lien d'index</a>
<a href="..." class="lien_article">voici un lien d'article</a>

Voilà, j'espère que c'est maintenant plus clair pour toi

EDIT:

Bouda a écrit :
Erreur dans ton code, les " . " ne doivent pas être notés dans l'attribu class des balises <a...

Oups !!!
Voilà qui est corrigé,
Merci Bouda
Modifié par Cygnus (14 Jan 2006 - 18:20)

Cygnus a écrit :

<a href="..." class="[#red].[/#]lien_index">voici un lien d'index</a>
<a href="..." class="[#red].[/#]lien_article">voici un lien d'article</a>

Erreur dans ton code, les " . " ne doivent pas être notés dans l'attribu class des balises <a...

<a href="..." class="lien_index">voici un lien d'index</a>
<a href="..." class="lien_article">voici un lien d'article</a>

Attention à l'ordre de déclaration des pseudo-classes qui doit être :

:link
:visited
:hover
:active

Merci pour vos réponses !

Mon véritable problème en fait est que je ne sais pas déclarer les attributs pour les liens dans une classe....

.LiensArticles {

font-family: Verdana;
a:link { color: #000066; text-decoration: none; font-size:12px; }
a:visited { color: #000066; text-decoration: none; font-size:12px; }
a:active { color: #666666; text-decoration: none; font-size:12px; }
a:hover { color: #666666; text-decoration: none; font-size: 12px; } 
} 

je sais pas quelle est la bonne syntaxe....

ok c bon je viens de trouver

ca donne ca :

a.lien:link { color: #666666; text-decoration: none; font-size:10px; }
a.lien:visited { color: #666666; text-decoration: none; font-size:10px; }
a.lien:active { color: #CCCCCC; text-decoration: none; font-size:10px; }
a.lien:hover { color: #CCCCCC; text-decoration: none; font-size: 10px; }

et c quand meme bien pratique ! meme si c dommage qu'on ne puisse pas l'appliquer à une cellule entière mais seulement liens pour liens... (enfin de ce que j'ai pu tester...) merci pour votre aide en tout cas !