changer affichage liens

obtenir ces boutons

Changer l'apparence des liens

Changer la couleur des liens

Dans le code (CSS) de mise en page d'un modèle de blog, on peut trouver 5 paragraphes concernant l'affichage des liens, soit :

a {
...
}

a:link {
...
}

a:visited {
...
}

a:active {
...
}

a:hover {
...
}

1) "a" permet d'appliquer la même instruction aux 4 modes d'affichage (voir ci-dessous de 2 à 5) des liens, sans devoir la répéter ;

2) "a:link" (facultatif) est l'aspect du lien qui n'est pas ou n'a pas encore été survolé par le curseur ;

3) "a:visited" (facultatif) est l'aspect du lien déjà visité ;

4) "a:active" (facultatif) est l'aspect du lien quand il est prêt à être activé ;

5) "a:hover" est l'aspect du lien survolé par le curseur.

L'ORDRE DES INSTRUCTIONS EST IMPORTANT. IL FAUT SURTOUT PLACER "A:HOVER" À LA FIN, CAR SINON, SI LE SITE A DÉJÀ ÉTÉ VISITÉ, LA COULEUR DU LIEN NE CHANGERA PLUS SI ON LE SURVOLE AVEC LE CURSEUR DE LA SOURIS.

Les principales instructions que l'on peut modifier ou ajouter dans ces paragraphes sont :
text-decoration: underline; (=souligné) ;
text-decoration: none; (=non souligné) ;
font-family: (police de caractères) ;
color: (couleur) ;
background: (couleur du fond) ;
border: (bordure) ;
padding: (marge) ;
font-weight: bold; (=gras) ;
font-weight: normal; (=pas gras).

Exemple :
a:link {
font-weight: bold;
text-decoration: underline;
color: #191970;
background: transparent;
}
a:visited {
font-weight: bold;
text-decoration: underline;
color: #191970;
background: transparent;
}
a:active {
font-weight : bold;
text-decoration : none;
color: #88bb22;
background: transparent;
}
a:hover {
font-weight: bold;
text-decoration: underline;
color: #88bb22;
background: transparent;
}
* * * * *
De plus, IL EST POSSIBLE DE CHANGER LES COULEURS OU L'ASPECT D'UN OU PLUSIEURS LIEN(S) dans un même message : dans cet exemple les liens sont de différentes couleurs, voire même BICOLORES : cliquer ici.

Méthode : dans la version HTML d'un message ou d'un gadget (cela évite de toucher au "modèle" ou "template") :

1) créer une feuille de style commençant par <style type="text/css"> et se terminant par </style> ;

2) dans cette feuille de style, prévoir les codes applicables aux balises rattachées à un nom : par exemple : "lienrouge" ;
<style type="text/css">.lienrouge a:link {text-decoration:underline;color:red;} .lienrouge a:visited {text-decoration:underline;color:red;}.lienrouge a:hover {color: #88bb22;}</style>
3) ajouter ce nom à l'intérieur de balises (div, span, ...), soit, dans l'exemple cité : <span class="lienrouge" ...> : la feuille de style s'appliquera au texte contenu à l'intérieur de ces balises.
Template images by quidnunc. Powered by Blogger.

Aucun commentaire: