Video: CSS Efecto - 19 borde inferior - menus @JoseCodFacilito 2024
En av de vanligste bruksområder av sammensatte stiler av Cascading Style Sheets (CSS) er å skape egendefinerte hyperkoblinger med pseudoklasser, som kan brukes til å endre standard farge og attributter av hyperkoblinger.
Hyperlinksforbindelsen pseudoklassestilen kan skrives som en todelt väljare hvor ankeretiketten er adskilt av et kolon etterfulgt av navnet på lenkestaten, som i en: lenke, a: besøkt, a: svinger, og a: aktiv.
Utseendet på en hyperkobling bestemmes av en besøkendes interaktivitet med den i en nettleser:
-
Normale koblinger er unvisited links.
-
Besøkte koblinger er lenker som den besøkende allerede har klikket på.
-
Hover-koblinger endre utseendet når en besøkende svever markøren over dem.
-
Aktive lenker Endre utseendet deres bare når en besøkende klikker direkte på en kobling, før du slipper museknappen.
Som du kanskje vet, vises alle hyperkoblinger som standard i enten blå understreket tekst (unvisited link) eller lilla understreket tekst (besøkte lenker). Fordi disse fargene er usannsynlig å matche de spesifikke fargene i nettstedets design, kan du overstyre standardkoblingsstilene ved å lage egendefinerte hyperkoblingsstiler.
Enda bedre, i tillegg til de unvisited og besøkte hyperkoblingstillatelsene, med CSS, kan du legge til stiler for to ekstra hyperkoblingstilstander, nemlig sveverstaten, som oppstår når en besøkende mister over en kobling og den aktive tilstanden, som vises når en besøkende klikker en kobling.
For å endre fargene på en hyperlink for alle fire koblingslandene, legg til følgende stildefinisjoner til CSS, erstatte de heksadesimale verdiene i dette eksemplet med de ønskede fargeverdiene for hver av koblingsstablene:
a: link {color: # CC0000;} a: besøkt {color: # 339933;} a: svinger {color: # 000000;} a: aktiv {color: # 99CC33;}
For ytterligere å lage Ting interessante, du kan legge til flere stildeklarasjoner for noen av eller alle de fire koblingsstatene. For eksempel vil du kanskje fjerne understreken, legge til en bakgrunnsfarge, eller bruke en prikket kantlinje rundt hyperkoblingen, som vist her og vist nedenfor:
a: link {color: # CC0000;} a: besøkt {farge: # 339933; tekst-dekorasjon: ingen;} a: svever {farge: # 000000; bakgrunnsfarge: # 0CC;} a: aktiv {farge: #ffffff; tekst-dekorasjon: ingen; grense: 2px prikket #CCC; bakgrunnsfarge: # 000;}
Når du oppretter disse lenkeformatene, må du passe på at hver stil blir lagt til CSS i samme rekkefølge som den vil bli opplevd på et nettsted av en besøkende på nettstedet: link, besøkt, svever, aktiv.
Hvis stilene legges til CSS i orden, kan det hende at koblingsstablene ikke fungerer riktig når de vises i en nettleser. Derfor blir du vant til å lage den normale koblingsstaten først, og legg deretter til den besøkte staten etterfulgt av svingerstaten, og til slutt den aktive tilstanden, som vist i foregående eksempel.
