Effets sur des liens textuels

 

On peut écrire par exemple: > Résultat: Remarques:
Dans l'entête (<head>...</head>):

Lien 1

Lien 2

Le style défini dans l'entête s'applique à tous les liens textuels normaux, c'est à dire pour lesquels aucune classe n'est spécifiée. Il suffit que le texte soit entouré par le conteneur A (balises <A> et </A>) pour que l'effet s'y applique. En fait, l'élément A créé différents états.
- Le lien à l'origine (A:link)
- Le lien survolé par la souris (A:hover)
- Le lien quand on clic dessus (A:active)
- Le lien déjà visité (A:visited)
On peut ainsi spécifier des effets différents selon l'état du lien. Dans notre exemple, l'effet donné au lien change seulement quand on passe avec la souris dessus. Cela donne un effet d'intéractivité un peu comparable à celui d'un Rollover (avec les images).
<STYLE TYPE=text/css>
A:link,A:active,A:visited {
text-decoration:underline;
color:#98a300;
}
A:hover {
text-decoration:none;
color:#ffffff;
}
</STYLE>
Dans le corps de la page (<body>...</body>):
<A href="#"> Lien 1 </A>
<A href="#"> Lien 2 </A>
 
Dans une même page, on peut définir des classes afin que certains liens textuels aient des effets différents:
On peut écrire par exemple: > Résultat: Remarques:
Dans l'entête (<head>...</head>): Lien de classe cadre

Les inscriptions figurant en rouge correspondent à ce qu'on à rajouter pour créer la classe. Celle-ci se prénome "cadre", mais elle aurait pu s'appeler autrement. Le nom est arbitraire, c'est vous qui le choisissez.

On peut voir ici qu'il existe d'autres instructions que la couleur (color) ou le soulignage du lien (text-decoration):
- width; défini la largeur du cadre entourant le texte. la valeur étant donnée en pixel (px).
- font-family; Défini la police du lien.
- font-size; défini la taille des caractères. La valeur peut être exprimée en pixel (px).
- border; défini la bordure du cadre. On peut dire qu'il n'y en a pas (none) ou alors lui donner un type (solid), une épaisseur (exemple: 1px) et une couleur (avec le code hexadécimal par exemple du blanc: #FFFFFF, ce qui rend la bordure de toute façon invisible).
- background-color; défini la couleur à l'intérieur du cadre.

Remarques: Dans notre exemple, la largeur du cadre n'est pas redéfini pour l'état hover. Il garde donc la même largeur de 150 pixels. Idem pour le soulignage, la police; la taille et la couleur du texte.
<STYLE TYPE=text/css>
A.cadre:link,A.cadre:active,A.cadre:visited {
width: 150px;
text-decoration: none;
font-family:Verdana;
font-size:12px;
color: #000000;
BORDER: none;
border: solid 1px #FFFFFF;
}
A.cadre:hover {
border: solid 1px #000000;
background-color:#FFFFFF;
}
</STYLE>
Dans le corps de la page (<body>...</body>):
<A href="#" class="cadre"> Lien de classe vert </A>
     
On peut définir autant de classes que l'on veut et décliner autant d'effets souhaités.
On peut écrire par exemple: > Résultat: Remarques:
Dans l'entête (<head>...</head>): Lien de classe bleu  
<STYLE TYPE=text/css>
A.bleu:link,A.bleu:active,A.bleu:visited {
width: 150px;
text-decoration:underline;
font-family:Verdana;
font-size:12px;
color: #000000;
BORDER: none;
}
A.bleu:hover {
text-decoration: none;
font-size:14px;
color: #ffffff;
border: solid 1px #322561;
background-color:#322561;
}
</STYLE>
Dans le corps de la page (<body>...</body>):
<A href="#" class="bleu"> Lien de classe bleu</A>