begin process at 2012 05 28 10:04:48
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Trucs & Astuces

 > FEUILLE DE STYLE : LIEN SOULIGNÉ, BARRÉ... AU PASSAGE DE LA SOURIS

FEUILLE DE STYLE : LIEN SOULIGNÉ, BARRÉ... AU PASSAGE DE LA SOURIS


 Information sur la source

Note :
1 / 10 - par 2 personnes
1,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Niveau :Débutant Date de création :18/03/2003 Date de mise à jour :28/03/2004 14:39:23 Vu :25 386

Auteur : pyroflo

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (3)
Ajouter un commentaire et/ou une note


 Description

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_fon d.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

  • !!! 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>
!!! 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


 Sources du même auteur

PLUSIEURS ACTIONS DIFFERENTES POUR UN SEUL FORMULAIRE
ARRETER LE CHARGEMENT DE LA PAGE (EQUIVAUT EXIT() DU PHP)
OUVRIR ET FERMER UNE FENÊTRE AUTOMATIQUEMENT APRÈS X SECONDE...
FAITES UN LIEN AVEC UN BOUTON, TRES FACILE MAIS POURTANT "BE...

 Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator
CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol

Commentaires et avis

Commentaire de eltoad le 12/10/2003 00:49:56

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

Commentaire de Shin013 le 07/02/2005 21:00:48

C'est vraiment pratique et ça rend un site plus vivant!
Merci!

Commentaire de darthmat le 26/02/2006 21:30:21

j'aime bien, c'est original

je pense que je vais le mettre dans mon site (plus tard)

 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,232 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales