CSS Links

Met CSS kan de stijl van de link op verschillende manieren worden ingesteld.

Tekstlink Tekstlink knoplnk knoplnk

Instellen van linkstijlen

Links kunnen elke CSS-eigenschap gebruiken (bijvoorbeeld color,font-family,background enz.) om stijlen in te stellen.

voorbeeld

a {
  color: hotpink;
}

Probeer het zelf

Bovendien kan de stijl van de link worden ingesteld op basis van de status waarin de link zich bevindt.

Er zijn vier linkstaten:

  • a:link - Normale, niet bezochte link
  • a:visited - Wanneer de gebruiker de link heeft bezocht
  • a:hover - Wanneer de gebruiker de muis over de link houdt
  • a:active - Wanneer de link wordt geklikt

voorbeeld

/* Nog niet bezochte link */
a:link {
  color: red;
}
/* Bezoekte link */
a:visited {
  color: green;
}
/* Muis over de link */
a:hover {
  color: hotpink;
}
/* Geselecteerde link */
a:active {
  color: blue;
}

Probeer het zelf

Als u stijlen voor meerdere linkstaten instelt, volg dan de volgende volgorde:

  • a:hover moet na a:link en a:visited komen
  • a:active moet na a:hover komen

Tekstdecoratie

text-decoration Eigenschappen worden voornamelijk gebruikt om de onderstreping van de link te verwijderen:

voorbeeld

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

Probeer het zelf

Achtergrondkleur

background-color Eigenschappen kunnen worden gebruikt om de achtergrondkleur van de link te specificeren:

voorbeeld

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

Probeer het zelf

knoplnk

Dit voorbeeld demonstreert een meer geavanceerd voorbeeld, waarbij we meerdere CSS-eigenschappen combineren om links weer te geven als een vak/knop:

voorbeeld

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

Probeer het zelf

Meer voorbeelden

Andere stijlen toevoegen aan hyperlinks
Dit voorbeeld demonstreert hoe je andere stijlen aan hyperlinks kunt toevoegen.
Geavanceerd - Maak een randgevelde linkknop
Dit is nog een voorbeeld van hoe je een link frame/knop kunt maken.
Verander cursor
De cursor eigenschap specificeert het cursor type dat moet worden weergegeven. Dit voorbeeld demonstreert verschillende cursor types (handig voor links).