Hyperlinks

In deze tutorial leer je hoe je met CSS je hyperlinks heel mooi kan maken en dat ze zich aanpassen als je erop klikt. Dit doen we met de begrippen a:link, a:visited, a:active en a:hover.

Je hebt vier begrippen die temaken hebben met je hyperlinks. a:link is hoe een link er normaal uit ziet. a:visited is hoe een link er uit als je hem al een keer hebt bezocht. a:active is wanneer je hem aan het indrukken ben. a:hover is wanneer je boven een link hangt.

Hyperlinks kan je op tal van manieren opmaken, een andere kleur geven of een randje laten verschijnen of verdwijnen als je erboven hangt. De meest gebruikte begrippen om een hyperlinks mooi te maken zijn color, text-decoration en background-color.

Het beste is om a:link, a:visited en a:active allemaal hetzelfde te doen anders gaan je hyperlinks er steeds anders uit zien en zijn de hyperlinks niet meer mooi en gelijk. Hieronder vind je een voorbeeld van hoe je hyperlinks zou kunnen opmaken.

a:link {
   text-decoration: underline;
   color: #000000;
}
a:visited {
   text-decoration: underline;
   color: #000000;
}
a:active {
   text-decoration: underline;
   color: #000000;
}
a:hover {
   text-decoration: none;
   background-color: #0000FF;
   color: #000000;
}

Nu is het ook nog mogelijk om sommige hyperlinks (bijvoorbeeld in je menu) anders te laten kleuren dan de andere hyperlinks. Dit is makkelijk te doen door er een class van te maken dit doe je door na de letter a een punt te zetten en vervolgens de naam van de class zie hieronder. Om vervolgens hyperlinks met die class op te roepen voeg je gewoon aan de link tag class="naam" toe.

a.menu:link {
...
}
a.menu:visited {
...
}
a.menu:active {
...
}
a.menu:hover {
...
}