Vous cherchez à rendre vos pages web plus attractives ? L'un des moyens les plus efficaces et discrets est d'utiliser les styles CSS pour animer vos liens hypertextes. Découvrez comment modifier la couleur des liens au survol de la souris, leur apparence (souligné, surligné), leur police, leur taille et leurs caractéristiques (gras, italique).
Comment modifier la couleur des liens au survol en CSS ?
Voici le code CSS à insérer entre les balises <head></head> de votre page :
a:link { color: #000000; font-family: Verdana, Helvetica; font-size: 8pt; text-decoration: none; }
a:visited { color: #000000; font-family: Verdana, Helvetica; font-size: 8pt; text-decoration: none; }
a:active { color: #000000; font-family: Verdana, Helvetica; font-size: 8pt; text-decoration: none; }
a:hover { color: #c8373a; font-size: 8pt; text-decoration: none; }
Ce code affiche les liens en noir au repos et en rouge au survol. La police reste identique (Verdana ou Helvetica) ainsi que la taille (8 pt).
Les pseudo-classes CSS des liens hypertextes
Comprendre les états des liens
- a : désigne la balise de lien
<a> - link : lien non encore visité
- visited : lien déjà consulté
- active : lien au moment du clic
- hover : lien survolé par la souris
Les propriétés CSS principales à personnaliser
color — Définit la couleur du lien. Indiquez le code hexadécimal avec le dièse (ex : #000000 pour le noir, #c8373a pour le rouge).
font-family — Assigne une police de caractères. Exemple : Verdana, Helvetica. Choisissez des polices lisibles et standards.
font-size — Définit la taille de police. Exemple : 8pt (environ taille 1), 10pt (taille 2). Évitez les tailles trop extrêmes.
text-decoration — Contrôle l'apparence du lien :
- none : lien normal sans décoration
- underline : lien souligné
- overline : lien surligné (barre au-dessus)
- overline underline : lien souligné et surligné
- line-through : lien barré
Comment mettre les liens en gras ou italique en CSS ?
Pour appliquer du gras aux liens, ajoutez cette propriété :
font-weight: bold;
Pour mettre les liens en italique, utilisez :
font-style: italic;
Insérez ces propriétés entre les accolades, après un point-virgule. Vous pouvez ainsi créer des effets visuels dynamiques au survol !
