Latest web development tutorials

lien CSS (lien)

Différents liens peuvent avoir des styles différents.


Lien style

liens de style, vous pouvez utiliser toutes les propriétés CSS (telles que la couleur, la police, arrière-plan, etc.).

liens spéciaux peuvent avoir des styles différents, en fonction de quel état ils sont.

Les quatre états de liaison sont:

  • a: link -, les liens non visités normaux
  • a: visited - liens que l'utilisateur a visité
  • a: hover - lorsque l'utilisateur passe la souris sur le lien lorsque
  • a: active - le lien est cliqué le moment

Exemples

a: link {color: # FF0000;} / * lien unvisited * /
a: visited {color: # 00FF00;} / * liens visités * /
a: hover {color: # FF00FF;} / * déplacer la souris sur le lien * /
a: active {color: # 0000FF;} / * clic * /

Essayez »

Lorsqu'il est réglé sur un certain nombre de type d'état de liaison, il y a quelques règles d'ordre:

  • a: hover doit suivre l'a: link et a: visited plus tard
  • a: active doit suivre un: hover derrière

style de lien commun

Selon l'exemple ci-dessus le changement de couleur du lien, pour voir dans quel état il se trouve.

Regardons quelques autres façons communes de style de lien:

Text-decoration

attribut text-decoration est principalement utilisé pour supprimer le soulignement sur les liens:

Exemples

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Essayez »

Couleur de fond

propriété de couleur d'arrière-plan spécifie la couleur du lien de fond:

Exemples

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

Essayez »


Exemples

D'autres exemples

Ajouter des styles différents d'hyperliens
Cet exemple montre comment ajouter d'autres styles d'hyperliens.

Avancé - Créer des liens boîte
Cet exemple montre un exemple plus avancé, nous combinons un certain nombre de propriétés CSS apparaissent comme des boîtes.