Sådan ændres farven på links på en webside

Nedenfor er trinene til, hvordan du kan ændre farven på de links, der vises på din webside ved hjælp af HTML og CSS. Selv om linkfarverne kan gøres med HTML BODY-tagget, anbefaler vi altid at lave nogen stylingindstillinger i CSS som vist nedenfor.

Tip: Når du definerer farven på et websideelement, skal du muligvis bruge HTML-farvekoder. For store farver kan du også angive navnene på disse farver i stedet for at bruge farvekoder, f.eks. Rød, blå, grøn og sort i stedet for at bruge deres respekterede farvekodeværdier.

Forstå de forskellige typer hyperlinks

Hyperlinks er særlige elementer på din side, fordi de er interaktive. For at angive, at de er interaktive, er de farvet anderledes afhængigt af deres tilstand. Et hyperlink har tre specielle farver, ud over den oprindelige farve, som repræsenterer tre forskellige tilstande:

  1. Besøgt link - Farven, når et link er blevet besøgt. Hvis et hyperlink er denne farve, kan brugeren forvente, at klik på linket vil føre dem til en side, de allerede har set.
  2. Hover link - Farven, når musen svæver over et link. Hvis et hyperlink er denne farve, kan brugeren forvente at trykke på venstre museknap (klikke), og derefter slippe knappen, vil få linket til at blive besøgt. Hover farve er den samme for både aktive og besøgte links.
  3. Aktiv Link - Farven på linket, når du klikker. Når brugeren ser denne farve, kan de forvente, at frigivelse af museknappen vil få browseren til at besøge linket.

Tip: Se vores hyperlink definition for yderligere information og relaterede spørgsmål til hyperlinks.

CSS link farve eksempel

I CSS-eksemplet nedenfor sætter vi hyperlinkfarverne til at ligne det, der vises på denne side. For det første er alle ankre sat til # 2c87f0 (skygge af blå), # 636 en skygge af lilla, og alle svinger og aktive links farve: # c33 (rød). Koden nedenfor kan tilføjes til CSS-stilelementet eller i din .css-fil.

 en {farve: # 2c87f0; } a: besøgte {farve: # 636; } a: svever, a: aktiv, a: fokus {farve: # c33; } 

Hvis din side ikke bruger CSS, eller du ikke vil konvertere til CSS, er nedenstående trinene til, hvordan du gør dette i BODY-tagget i HTML-koden. Men som tidligere nævnt anbefaler vi stærkt at bruge ovenstående CSS-kode i stedet for kropstegnet. Du kan føje ovenstående kode til en CSS-fil og knytte alle dine websider til den CSS-fil. Derefter kan du ændre baggrundsfarveværdierne i den ene CSS-fil for øjeblikkeligt at ændre baggrundsfarven på alle sider, der linker til den.

HTML body tag eksempel

I nogle meget sjældne situationer kan det ikke være muligt at bruge CSS. I disse situationer kan du også definere baggrundsfarve, tekstfarve, linkfarve og andre værdier i HTML-kropstaggen som vist nedenfor.

Nedenfor er beskrivelserne af hver af HTML-attributterne i kropstagget.

TEXT = Farven på tekst.

LINK = Farven på links.

VLINK = Besøg link farve.

ALINK = Farve på det aktive link eller den farve, som linket ændres til, når det klikkes.

BGCOLOR = Baggrundsfarven på siden.