[CSS] sélecteur a:

Membre supprimé 2 · 22 Juillet 2004

Bonjour,

Au sein d'une feuille de styles du sélecteur body, comment attribuer plusieurs "variantes" pour les a: link / hover / active / visited ?

Exemple pour des a:link
text-decoration: none; pour certains liens.
text-decoration: underline;pour d'autres.

J'ai crée une nouvelle feuille pour différencier ces liens, mais ce n'est pas reconnu sous Safari.

molgow · 22 Juillet 2004

Une solution possible, l'utilisation des classes :

Bloc de code:

a.liensouligne:hover {
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

Avec le code ci-dessus, les liens sans classes particulières seront pas soulignés, alors que ceux où tu auras défini comme étant de la classe liensouligne seront souligné.

Je suis pas un pro de ces trucs en CSS, mais il y aussi d'autres possibilités plus complexe pour faire en sorte de ne pas utiliser de classes. Par exemple si tu veux que tous les liens qui se trouvent dans une liste ne soient pas soulignés, tu fais qqch du style (pas sûr de la syntaxe) : li> a:hover { ... }

tatouille · 23 Juillet 2004

C'est vrai on peut utiliser les exceptions mais le mieux c'est en core des classes
dérivées ou non

.mylink{}
.mylink:hover{}
.mylinkother{}
.mylinkother:hover{}

tu n'es pas forcé de les rendre héritières de la class mère a

enfin tout dépends de ce que tu veux faire

il arrive que tu puisses avoir les deux

a.linkorange:hover

mais aussi

.mylinkred:hover ...................

Membre supprimé 2 · 28 Juillet 2004

Merci de vos réponse.
Malheureusement, cela bug toujours.

Comme vous pouvez le voir sur ma feuille, j'ai rajouté une classe afin que tous les liens hover ne figurant pas dans le menu de gauche ne soit plus souligné :

Bloc de code:

a.mylinks {
text-decoration: none;

}

...mais cela n'est pas en pris en compte sous Safari ou Firefox :hein:

minime · 28 Juillet 2004

woa a dit:
Comme vous pouvez le voir sur ma feuille, j'ai rajouté une classe afin que tous les liens hover ne figurant pas dans le menu de gauche ne soit plus souligné :

Tu veux obtenir une réponse différente (comme par exemple border-bottom: solid au lieu de dashed) dans le cas d'une balise "a", définie par la classe "mylinks", lorsque l'utilisateur survole le lien à la souris (pseudo-classe "hover").

balise.classe:pseudo-classe {propriété: Valeur;}

------------------------

a:link {color: #003366; text-decoration: none;}
a:visited {color: #D1D5C6; text-decoration: line-through;}
a:hover {color: #999; border-bottom: 1px dashed #000;}
a:active {color: #999; text-decoration: none;}
a.mylinks:hover {border-bottom: 1px solid #000;}

Membre supprimé 2 · 28 Juillet 2004

Merci Minime, c'est tout de suite plus simple avec des couleurs :love:
La pseudo-classe fonctionne donc très bien pour l'attribution de différentes classes de survol de liens

Ce qui me rassure, c'est que je suis pas le seul à avoir de problèmes avec mon code

tatouille · 29 Juillet 2004

http://-anonyme-.free.fr/img/banner.png

dis mois c'est quoi cette image pas beau le home page

:mad: :mad: :mad:

le caps n'est pas admis !!

BODY{ }

body{}

molgow · 29 Juillet 2004

tatouille a dit:
http://-anonyme-.free.fr/img/banner.png

dis mois c'est quoi cette image pas beau le home page

:mad: :mad: :mad:

le caps n'est pas admis !!

BODY{ }

body{}

Traduction de tatouille :

- Tu as fait une image avec du texte simple (homepage). Tu aurais pu faire ça en CSS, ça aurait été mieux.

- Dans ta CSS, tu as un BODY { ... }, alors qu'il faudrait le mettre en minuscule.

:zen:

tatouille · 29 Juillet 2004

non juste un lissage net de police aurait suffit

Membre supprimé 2 · 30 Juillet 2004

tatouille a dit:
dis mois c'est quoi cette image pas beau le home page
:mad: :mad: :mad:

molgow a dit:
Traduction de tatouille :

- Tu as fait une image avec du texte simple (homepage). Tu aurais pu faire ça en CSS, ça aurait été mieux.

Je sais, mais je vous ai prévenu

:hein:
src:

tatouille · 2 Août 2004

woa a dit:
Je sais, mais je vous ai prévenu :hein:
src:

mélasse coupable

:mouais: :love:

loudjena · 4 Juillet 2006

tatouille a dit:
C'est vrai on peut utiliser les exceptions mais le mieux c'est en core des classes
dérivées ou non

.mylink{}
.mylink:hover{}
.mylinkother{}
.mylinkother:hover{}

tu n'es pas forcé de les rendre héritières de la class mère a

enfin tout dépends de ce que tu veux faire

il arrive que tu puisses avoir les deux

a.linkorange:hover

mais aussi

.mylinkred:hover ...................

Salut,

je comprends bien comment on fait les feuilles de style, pour les liens et autres balises, mais pour faire des liens - a:link - de différentes couleurs - (une partie des liens est sur fond sombre et une autre partie des liens sur fond clair) - je le place où exactement le code - a.mylinks:link {color: #330000;} ? J'ai déjà une feuille de style importée dans <head>, es-ce qu'il faut zapper la feuille de style importée et placer manuellement tous les style ds le code ? Plus haut on parle de le placer ds <body> mais ds <body> j'ai plusieurs tableaux pour lesquels j'ai besoins de couleurs de liens différentes et ça marche pas. :heu:

Vous pourriez me donner un exemple de code ?

loudjena · 5 Juillet 2006

Merci pour les MP

OlivierL · 5 Juillet 2006

Tu peux aussi spécialiser les lien en fonction de leur conteneur.
Par exemple, dans un site avec un Menu et un corps (vachement original) :
/******** Liens Body ******/
.zoneBody a{
font-size: medium;
font-family: Arial,Sans-serif;;
color: Red;
background-color: inherit;
text-decoration: underline;
}
.zoneBody a:visited{
text-decoration: underline;
font-style: italic;
}
.zoneBody a:hover{
color: #FFA500;
background-color: inherit;
text-decoration: underline;
font-style: italic;
}

/******** Liens Menu ******/
.zoneMenu a{
font-size: 22px;
font-family: Arial,Sans-serif;;
color: Red;
background-color: inherit;
text-decoration: none;
font-weight: bold;
}
.zoneMenu a:visited{
text-decoration: none;
font-style: normal;
/* Brown */
color: #A52A2A;
background-color: inherit;
}
.zoneMenu a:hover{
color: #FFA500;
background-color: inherit;
text-decoration: none;
font-style: normal;
}

Ainsi, les liens contenus dans des TD ayant des styles différents (zoneMenu et zoneBody dans mon exemple) auront automatiquement des styles différents, sans avoir à le préciser, puisque c'est lié au conteneur.

OlivierL · 5 Juillet 2006

et mon exemple est W3C CSS compliant , donc pas de problème avec IE, Firefox et Safari.

Captain_X · 5 Juillet 2006

j'ai des sites entiers qui sont W3C CSS COmpliant, et béh avec IE c'est pas toujours la joie pour autant.

loudjena · 5 Juillet 2006

Ça à l'air bien, je vais essayer ça.
Merci

p4bl0 · 5 Juillet 2006

Pour les utilisateur de CSS, je vous recommande d'acheter "CSS Précis et Concis" de chez O'Reilly, en fait, pour chaque langage il faut avoir le petit livre de cette collections qui correspond au langage, ils sont super bien foutu !

Captain_X · 5 Juillet 2006

truk2oof a dit:
Pour les utilisateur de CSS, je vous recommande d'acheter "CSS Précis et Concis" de chez O'Reilly, en fait, pour chaque langage il faut avoir le petit livre de cette collections qui correspond au langage, ils sont super bien foutu !

je l'ai c'est indispensable et ca coute 7 euros

OlivierL · 6 Juillet 2006

En gratos, j'utilise

Il y a sûrement mieux, mais j'y trouve généralement mon bonheur.:rateau:

[CSS] sélecteur a:

Membre supprimé 2

Invité

Membre expert

Membre expert

Membre supprimé 2

Invité

Membre expert

Membre supprimé 2

Invité

Membre expert

Membre expert

Membre expert

Membre supprimé 2

Invité

Membre expert

Membre actif

Membre actif

Membre actif

Membre actif

Membre expert

Membre actif

Membre expert

Membre expert

Membre actif

Sujets similaires