Video: Lag egen CSS knapp 2024
Generelt viser browsere links som blå understreget tekst. Denne standardadfærd minimerede oprindeligt forvirringen mellem indhold på siden og et interaktivt link. I dag knytter næsten alle hjemmesider stilarter på sin egen måde. Nogle websteder understreger ikke links; andre beholder understregningen, men stilforbindelser i andre farver end blå; og så videre.
HTML-ankerelementet (
a
) bruges til at oprette links. Teksten mellem åbnings- og lukkeankerstaggen er linkbeskrivelsen, og URL'en angivet i attributten
href
er adressen, som browseren besøger, når linket klikkes.
Ankeretiketten er udviklet over tid, og i dag har fire stater:
-
link
: Et link, som en bruger ikke har klikket på eller besøgt -
besøgt
: A link, som en bruger har klikket på eller besøgt -
svever
: Et link, som brugeren svæver musemarkøren over uden at klikke på -
aktiv
: Et link brugeren er begyndt at klikke, men har endnu ikke udgivet museknappen
CSS kan style hver af disse fire stater, oftest ved at bruge disse egenskaber og værdier.
Egenskabsnavn | Mulige værdier | Beskrivelse |
farve
|
navn
|
Link farve specificeret ved brug af navne (
farve: blå;
), hexadecimal kode (
farve: # 0000FF;
) eller RGB værdi (
farve: rgb (0, 0, 255); >).
tekst-dekoration |
ingen
|
understreger
|
Følgende eksempel stilarter forbinder på en måde, der ligner den måde, de er stylet i artikler på Wikipedia, hvor hyperlinks vises som standard blå, understreget på musemarkøren og orange, når den er aktiv. Som vist nedenfor fremgår det første link til Chief Technology Officer i USA, som det ville, hvis en mus svævede over det. Linket til Google vises også orange som det ville, hvis det var aktivt, og musen klikede på det. |
a: link {
farve: rgb (6, 69, 173);
tekst-dekoration: ingen;
}
a: besøgt {
farve: rgb (11, 0, 128)
}
a: svinger {
tekstindretning: understreger
}
a: aktiv {
farve: rgb (250, 167, 0)
}
Wikipedia. org side der viser link, besøgt, svinger og aktive stater.
a
vælgeren og linktilstanden.
Selv om man forklarer hvorfor er uden for denne bogs anvendelsesområde, insisterer CSS-specifikationer på, at du definerer de forskellige linktilstande i den viste rækkefølge - link, besøg, svinge og derefter aktiv.Det er dog acceptabelt ikke at definere en linktilstand, så længe denne ordre bevares.
De forskellige linktilstande er kendt som
pseudoklassevalgere. Pseudoklassevælgere tilføjer et søgeord til CSS-selektorer og giver dig mulighed for at indstille en særlig tilstand for det valgte element.