| COULEUR SUR LES LIENS |
Outils pour webmaster. Trucs et astuces en code HTML et JavaScript : améliorer son site internet
Descriptif : Permet de varier aspect, couleurs et formes de vos liens.
Exemple : Retouner à la page principale. Voir plus bas ces autres possibilités : CLIC CLIC CLIC
Mise en oeuvre : Sélectionnez et copiez directement à l'écran le code ci-dessous et collez-le dans votre page, code HTML visible.
Entre les deux balises <head> et </head>
| <!--DEBUT CODE COULEUR SUR LIENS--> <style> <!-- A:link {text-decoration: none; color: #0000FF; font-family: Times New Roman, Arial; font-size: 12pt} A:visited {text-decoration: none; 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> <!--FIN CODE COULEUR SUR LIENS--> |
Remarque : Ce script comporte toutes les propriétés des
liens de votre page. Vous pouvez donc les personnaliser selon vos besoins.
- A:link Propriétés par défaut au
chargement de votre page.
Non souligné : (text-decoration: none)
Souligné : (text-decoration: underline)
Couleur avant click : (color: #0000FF) - Ici en bleu
Définition de la police : (font-family: Times New Roman,
Arial;)
Taille : (font-size: 12pt)
- A:visited définit l'affichage des
liens qui ont déjà été visités
- A:active définit l'affichage des liens
actifs.
- A:hover définit l'affichage du lien
lorsque vous le survolez. Ici, le lien est souligné (text-decoration: underline) et le
texte est rouge (color: #FF0000)
- Bien entendu, vous pouvez n'utiliser qu'une des fontions.
- Ou, encore plus simplement :
Entre les deux balises <head> et </head>
| <!--DEBUT CODE COULEUR SUR LIENS--> <style TYPE="text/css"> <!-- A:hover {color:#008080;} --> </style> <!--FIN CODE COULEUR SUR LIENS--> |
- Vous pouvez aussi essayer ceci :
Entre les deux balises <head> et </head>
| <!--DEBUT CODE COULEUR SUR LIENS--> <style fprolloverstyle>A:hover {color: #FF00FF; font-style: italic; font-weight: bold} </style> <!--FIN CODE COULEUR SUR LIENS--> |
Entre les deux balises <head> et </head>
| <!--DEBUT CODE COULEUR SUR LIENS--> <style> <!-- A.type1:link {color:#00CC33; text-decoration:none;} A.type1:visited {color:#00CC33; text-decoration:none;} A.type1:active {color:#00CC33; text-decoration:none;} A.type1:hover {color:#00FF80; text-decoration:underline;} A.type2:link {color:#FF0000; text-decoration:underline;} A.type2:visited {color:#FF0000; text-decoration:underline;} A.type2:active {color:#FF0000; text-decoration:underline;} A.type2:hover {color:#ABCDEF; text-decoration:underline;} A.type3:link {color:#00CCFF; text-decoration:none;} A.type3:visited {color:#00CCFF; text-decoration:none;} A.type3:active {color:#00CCFF; text-decoration:none;} A.type3:hover {color:#FF8000; text-decoration:overline underline;} //--> </style> <!--FIN CODE COULEUR SUR LIENS--> |
Entre les deux balises <body> et </body>
| <!--DEBUT CODE COULEUR SUR LIENS --> <a class="type1" href="http://www.votre_site.com">clic</a> <a class="type2" href="http://www.votre_site.com">clic</a> <a class="type3" href="http://www.votre_site.com">clic</a> <!--FIN CODE COULEUR SUR LIENS--> |
Où "type1", "type2", "type2", représentent les noms des styles dans la partie <head> et </head> .