Sådan styles links i CSS
Styling Links
Links kan styles med en hvilken som helst CSS ejendom, såsom color
, font-family
, font-size
og 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 linka:visited
: et besøgt, klikket linka:hover
: et link, når brugerens mus er over deta: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:
- Understrege
- Blå farve
Du kan ændre disse ved at tilføje ændre color
og text-decoration
egenskaber.
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:hover
SKAL komme eftera:link
oga: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