Feuille de style : lien souligné, barré... au passage de la souris

Soyez le premier à donner votre avis sur cette source.

Snippet vu 27 768 fois - Téléchargée 27 fois

Contenu du snippet

Comme tous les débutants, je cherchais comment faire pour souligner, barrer, changer de couleur, surligner...les liens. Voilà donc une petite série de feuille de style "classique". Ce n'est bien sûr QUE du HTML mais je pense que ça peut aider tous les débutants.

A:link détermine les propriétés de tous les liens de votre page (couleur, taille...)
A:visited détermine les mêmes propriétés de ces mêmes liens mais qui ont déjà été visités.
A:active détermine toujours les propriétés des liens "actifs"
A:hover pour moi c'est le plus intéressant, cela détermine les propriétés des liens au passage de la souris !!!

- Pour souligner: underline juste après "text-decoration:", à la place de "none"
- Pour changer de couleur: mettez le code de la couleur juste après "color:" Si vous ne connaissez pas les codes des couleurs faites un tour sur http://www.toulouse-renaissance.net/c_outils/c_fond.htm
-Pour changer la taille: indiquez la taille souhaitée en pt juste après "font-size:"
-Pour mettre une ligne dessus le lien: overline juste après "text-decoration:"
-Pour barrer le lien: line-through juste après "text-decoration:"
-Pour changer de police: le nom de votre police juste après "font-family:"

Je m'arrête là parce qu'y a pleins de possibilités !!!
A noter que si vous voulez combiner 2 effets juste après "text-decoration:" vous n'avez qu'à mettre and et y aura pas de problème.

Source / Exemple :


!!! Je vous conseille d'insérer la feuille de style entre les <head> et </head>!!!

<style>

A:link {text-decoration: none; color: #0000FF; font-family: Times New Roman, Arial; font-size: 12pt}
A:visited {text-decoration: line-through; color: #6699CC; font-family: Times New Roman, Arial; font-size: 12pt}
A:active {text-decoration: none; color: #FF0000; font-family: Times New Roman, Arial; font-size: 12pt}
A:hover {text-decoration: underline; color: #FF0000; font-size: 12pt}

</style>

Conclusion :


Dans l'exemple ci-dessus, les liens seront :
-bleu par défaut
-rouge et soulignement rouge au passage de la souris
-bleu clair barrés une fois visités

J'espère vous avoir rendu service (aux débutants !!!),

Pyroflo

Tout sur la pyrotechnie - http://www.abcpyro.com

A voir également

Ajouter un commentaire

Commentaires

Messages postés
2
Date d'inscription
dimanche 12 février 2006
Statut
Membre
Dernière intervention
26 février 2006

j'aime bien, c'est original

je pense que je vais le mettre dans mon site (plus tard)
Messages postés
1
Date d'inscription
mardi 25 janvier 2005
Statut
Membre
Dernière intervention
7 février 2005

C'est vraiment pratique et ça rend un site plus vivant!
Merci!
Messages postés
7
Date d'inscription
dimanche 12 octobre 2003
Statut
Membre
Dernière intervention
11 janvier 2008

Oui tu a bien aidé un débutan et g t'en remercie !!

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.