Discussion :

[H-bil]

salut
je veux faire deux liens de styles different, en les survollant le premier se souligne et le deuxième change de couleure.
c'est possible avec les CSS
@+

[Kerod]

oui tout à fait

Code :

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

1
2
3
4
5
6
7
8
9
10
a{
text-decoration:underline;
color : #000000;
}
.line{
color:#FF0000;
}
 
<a href="#">Lien1</a>
<a href="#" class="line">Lien2</a>

Le premier sera souligné ainsi que tous les autres du body sans classe.et le deuxième je te laisse deviner

Mais si tu veux plus d'info vas dans la FAQ CSS

[psychoBob]

C'est quoi ce .line ?

Moi je fait

Code :

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

1
2
 .zoneLien a{}
.zoneLien a:hover{}

et accessoirement

Code :

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

.zoneLien a:visited{}

D'ailleur j'ai jamais compris quand et pourquoi on met .zoneLien plutot que zoneLien tout court.

Si je met a pour une balise prédéfinie ça fonctionne, si je met baliseOuDivPerso sans . devant ça fonctionne pas.

[Kerod]

line est un nom de classe, à la base je voulais mettre lien mais j'étais super trop rapide...

.lien est une classe que l'on crée.
a fait référence aux balises déjà existantes

Bon pour tout reprendre :

Code :

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

1
2
3
4
5
6
7
 
.lien{
 color:#000000;
 }
.lien:hover{
color:#FF0000;
}

[Invité]

D'ailleur j'ai jamais compris quand et pourquoi on met .zoneLien plutot que zoneLien tout court.

Peut être pour différencier les classes des identifiants dans la CSS?

Code :

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

1
2
3
 
.class {}
#id {}

[Loceka]

Comme dis plus haut, il faut te servir des mots-clef :hover et :link.

pour toi, ce serait :

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
 
// Dans le CSS :
a {
   text-decoration : none;
   color : black; // par exemple.
}
 
a.lien1:hover {
   text-decoration : underline;
}
 
a.lien2:hover {
   color : blue; // par exemple
}
 
// Dans le html :
<a href="" class="lien1">ton lien de classe 1</a>
<a href="" class="lien2">ton lien de classe 2</a>

[H-bil]

une derniere question
a ==>??
a:link ==> ??
a:visited ==> lien visité
a:hover ==> lien survolé
a:active ==> ??
a:focus ==> ??
pouvez-vous m'expliquer ?
on est obligé de les metre tous dans la feuille de style
@+

[Kerod]

a ==> équivalent à a:link, concerne le lien tel qu'il est à la base
a:visited ==> lien visité (important si tu veux aucune distinction entre le lien normal et celui qui est visité)
a:hover ==> lien survolé (important pour une modifiaction lors du survol)
a:active ==> lors du clic (pas très indispensable car ca se voit pas beaucoup, c'est un avis personnel là)
a:focus ==> lorsqu'il recoit la focalisation (pas trop utile pour moi)

j'espère avoir répondu à tes questions, et si j'ai fait une erreur quelque part qu'on hésite pas à me le dire

edit :

Les agents utilisateurs interactifs changent parfois l'aspect du rendu en réponse aux actions de l'utilisateur. CSS2 propose trois pseudo-classes pour un usage courant :

• La pseudo-classe :hover, qui est appliquée quand l'utilisateur désigne un élément (au moyen d'un appareil de pointage) sans l'activer. Par exemple, un agent utilisateur visuel pourrait appliquer celle-ci quand le pointeur (d'une souris) survole la boîte produite par un élément.
• La pseudo-classe :active, qui est appliquée quand l'utilisateur active un élément. Par exemple, entre le moment où l'utilisateur presse le bouton de la souris et le relâche.
• La pseudo-classe :focus, qui s'applique quand un élément reçoit l'attention (celui-ci acceptant les événements du clavier ou d'autres formes d'entrées de texte).

[H-bil]

merci
tout est claire sauf pour a:focus

[Kerod]

J'ai rajouté un petit complément avant que tu postes

[Loceka]

euh, si tu vas sur le lien que j'ai donné dans mon précédent post, y'a la réponse à toutes tes questions... Avec des exemples en prime...

On n'est pas obligés de tous les spécifier dans la feuille de style mais si on le fait, il faut respecter l'ordre (cf le lien) si l'on ne veut pas avoir de mauvaises surprises.