Discussion :

[keishah]

Bonjours je voudrai avoir plusieur style de liens ( couleur , décoration.. ) dans une même page! quelle méthode faut t-il utiliser? j'ai essayer avec des "id" dans les liens ( <a href="#" id="style"> lien </a> ) mais ca ne marche pas !

[liza83]

Bonjour,

Oui, c'est tout a fait possible à l'aide de la balise "class"... voici un exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
a.menu { display:block; margin-top:5px; text-align:center; width:16ex;
border-style:ridge; border-width:3px; padding:2px; }
 
a.menu:link { color:#0000FF; text-decoration:none; }
a.menu:visited { color:#0000FF; text-decoration:none; }
a.menu:hover {  color:#FFFF00; background-color:#0000FF; text-decoration:none; }
a.menu:active { color:#FFFF00; background-color:#AA0033; text-decoration:none; }

que tu appelles ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="menu" href="http://www.monsite.fr/accueil.html">accueil</a>

Bon courage pour la suite

[keishah]

ok merci je te tiens au courant

[speedev]

Salut!

Si ça t'intéresse voici comment appliquer des filtres sur tes classes css de liens.
Cela ne fonctionne pas avec IE par contre en utilisant un hack et en redéfinissant tes liens dans un fichiers css spécialement conçu pour IE tu auras le même résultat. Tu peux déjà voir le résultat avec mozilla

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
 
/*a{padding-left:17px;}*/
 
a[href^="http:"]
{
	background : url(lien1.gif) no-repeat;
}
 
a[href^="http:"]:hover
{
	background : url(lien1_on.gif) no-repeat;
}
a[href^="mailto:"]
{
	background : url(lien2.gif) no-repeat;
}
a[href^="mailto:"]:hover
{
	background : url(lien2_on.gif) no-repeat;
	color:#08863f;
}

Ces filtres te permettent d'appliquer une image de fond à tes liens pointant vers une url HTTP:// ou bien vers un mailing mailto:

Moi j'applique un padding-left de 17px sur la balise générale "a" et en background je mets de petites puces diverses pour agrémenter mes liens. Ainsi chaque lien a sa puce propre. Pour tous mes liens poitant vers un mailto j'ai une petite enveloppe devant par exemple.

C'est joulii ^^.

Sinon j'applique une classe particulière du type: class="a_mail" quand le navigateur est IE. Grace au hack suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<!--[if IE]>
      <link rel="stylesheet" type="text/css" media="all" href="styles/lien_ie.css" />
<![endif]-->

J'appelle donc pour IE un style supplémentaire qui contient toutes les classes de lien définies pour lui.

[Candygirl]

Qestion vocabulaire, ne serait-il pas plus juste de dire:

Oui, c'est tout a fait possible à l'aide de la balise "class"...

c'est tout à fait possible à l'aide de l'attribut class dans ta balise a

Si ça t'intéresse voici comment appliquer des filtres sur tes classes css de liens.

Ne devrait-on pas parler de sélecteurs d'attribut dans ce cas, plutôt que de filtres ?

[speedev]

"Selecteur d'attribut" en css effectivement, filtre, masque dans le langage du développeur....