Chargement...

Liens en CSS

Les liens sont le moyen de se déplacer dans vos pages. En CSS vous stylisez l’élément a et ses états — non visité, visité, survol et actif — pour qu’un lien paraisse cliquable, change à l’interaction et reste lisible.

États du lien en un coup d’œil

📊 Boîte à outils des états de lien

État Quand il s’applique
a / a:link Lien par défaut / non visité
a:visited Lien déjà ouvert par le visiteur
a:hover Le pointeur est sur le lien
a:active Le lien est enfoncé (mousedown)
text-decoration Soulignement on/off — contrôle courant des liens

Les navigateurs retiennent souvent un ordre utile surnommé LVHA : :link, :visited, :hover, :active. Écrire les règles dans cet ordre évite que des états ultérieurs soient écrasés par accident.

Styliser le lien de base

Commencez par la couleur et le soulignement. Beaucoup de designs modernes retirent le soulignement par défaut puis le ramènent au survol.

Styles de lien de base

css
CSS Code 
a {
color: #0b5fff;
text-decoration: none;
}

Liens visités

:visited peut légèrement changer la couleur pour que les visiteurs fidèles reconnaissent les chemins connus. Gardez le changement subtil — la vie privée limite ce qui est stylable sur visited.

Teinte visited

css
CSS Code 
a:visited {
color: #5b4b8a;
}

Retour hover

:hover est votre signal quotidien le plus clair. Un changement de couleur, un soulignement ou les deux dit « c’est interactif » sans crier.

Soulignement au survol

css
CSS Code 
a:hover {
color: #0842b8;
text-decoration: underline;
}

active — le moment du clic

:active s’applique pendant que le lien est enfoncé. Une teinte un peu plus foncée donne une petite sensation de « clic ».

Pression active

css
CSS Code 
a:active {
color: #062e80;
}

Une habitude calme pour les liens de nav

Regroupez les états LVHA, gardez le survol évident, et ne pas effacer les contours de focus juste pour un look plat. Les utilisateurs clavier ont besoin d’un indice de focus visible.

Liens de nav calmes

css
CSS Code 
nav a:link,
nav a:visited {
color: #1a1a1a;
text-decoration: none;
}

nav a:hover,
nav a:active {
color: #0b5fff;
text-decoration: underline;
}

nav a:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}

À vous de jouer

  1. Définissez une couleur de base a et text-decoration: none.
  2. Ajoutez a:visited avec une couleur légèrement différente.
  3. Sur a:hover, soulignez et foncez la couleur.
  4. Foncez un peu plus sur a:active.
  5. Stylez nav a en ordre LVHA et gardez un outline :focus-visible.

Erreurs fréquentes

  • Écrire :hover avant :link / :visited si bien que certains états perdent
  • Retirer le soulignement et tout autre indice que c’est un lien
  • Survol arc-en-ciel sur chaque mot du paragraphe
  • outline: none sur les liens sans style de focus de remplacement
  • Mélanger cette leçon avec text-shadow / ellipsis (session précédente)

Résumé

  • Stylez les liens avec a et les états :link, :visited, :hover, :active
  • L’ordre LVHA aide la cascade à se comporter comme prévu
  • Couleur + text-decoration sont les contrôles du quotidien
  • Le survol doit être clair ; le visited reste subtil
  • Gardez un style de focus visible pour le clavier

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 30 de 35
Css Tutoriel