Sådan styles links i CSS

Styling Links

Links kan styles med en hvilken som helst CSS ejendom, såsom color, font-family, font-sizeog padding. Her er et let eksempel:

a { color: hotpink; }

Derudover kan links designes forskelligt afhængigt af hvilken tilstand de er i.

Links har også 4 tilstande, og mange programmører styler hver stat forskelligt. De fire stater er:

  • a:link: et ubesøgt, ikke-markeret link
  • a:visited: et besøgt, klikket link
  • a:hover: et link, når brugerens mus er over det
  • a:active: et link, når der klikkes på det

Den egenskab er ansvarlig for at skabe URL'er og kan ændres ved hjælp af en række CSS styling egenskaber, selv om det har et par stykker som standard:

  1. Understrege
  2. Blå farve

Du kan ændre disse ved at tilføje ændre colorog text-decorationegenskaber.

 color: black; text-decoration: none;

Du kan også style linket baseret på interaktion ved hjælp af disse egenskaber, også kendt som linktilstande:

  • a: link - et normalt, ubesøgt link
  • a: besøgt - et link brugeren har besøgt
  • a: svæver - et link, når brugeren muser over det
  • a: aktiv - et link i det øjeblik det klikkes

Her er nogle eksempler på CSS ved hjælp af de 4 stater:

a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: blue; }

Bemærk, at der er nogle ordreregler for, når du indstiller typografien for linktilstande.

  • a:hoverSKAL komme efter a:linkoga:visited

a:active SKAL komme efter a:hover

a: link - et normalt, ubesøgt link a: besøgt - et link brugeren har besøgt a: svæver - et link når brugeren muserer over det a: aktiv - et link i det øjeblik det klikkes

/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; }

Mere om styling i CSS:

  • Sådan styler du et HTML-tag direkte i CSS
  • Sådan style lister med CSS
  • Sådan styler du knapper med CSS