CSS link

Med CSS kan du indstille stilen på links på forskellige måder.

Tekstlink Tekstlink Link-knap Link-knap

Indstil link-stil

Links kan bruge enhver CSS-ejenskab (f.eks. color,font-family,background osv.) til at indstille stilarter.

eksempel

a {
  color: hotpink;
}

Prøv det selv

Derudover kan du indstille forskellige stilarter afhængigt af hvilken tilstand linket er i.

Der er fire linktilstande:

  • a:link - Normalt, ikke besøgt link
  • a:visited - Linket er blevet besøgt
  • a:hover - Når brugeren sætter musen over linket
  • a:active - Når linket klikkes på

eksempel

/* Linket er ikke blevet besøgt */
a:link {
  color: red;
}
/* Linket er blevet besøgt */
a:visited {
  color: green;
}
/* Musen er placeret over linket */
a:hover {
  color: hotpink;
}
/* Valgt link */
a:active {
  color: blue;
}

Prøv det selv

Hvis der indstilles stilarter for flere linktilstande, skal du følge følgende rækkefølgesregler:

  • a:hover skal komme efter både a:link og a:visited
  • a:active skal komme efter a:hover

Tekstdekorering

text-decoration Ejenskaben bruges primært til at fjerne understregning fra links:

eksempel

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

Prøv det selv

Baggrundsfarve

background-color Ejenskaber kan bruges til at specificere baggrundsfarve for links:

eksempel

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

Prøv det selv

Link-knap

Dette eksempel viser en mere avanceret eksempel, hvor vi kombinerer flere CSS-ejenskaber, for at vise links som boks/knap:

eksempel

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;
}

Prøv det selv

Flere eksempler

Tilføj forskellige stilarter til hyperlinks
Dette eksempel viser, hvordan man tilføjer andre stilarter til hyperlinks.
Avanceret - Opret en kantet linkknap
Dette er et andet eksempel på, hvordan man opretter en linkboks/knap.
Ændre markør
cursor egenskab specificerer den type markør, der skal vises. Dette eksempel viser forskellige typer markører (nyttige for links).