Slik bruker du pseudoklasser til stilkoblinger for HTML5 og CSS3-programmering

Når du har litt stil på HTML5 og CSS3 nettsidene, kan du være litt bekymret for hvor gale lenker er. Standard lenke stiler er nyttige, men de passer kanskje ikke med fargevalg.

Slik styler du en standardkobling

Det er enkelt å legge til en stil på en lenke. Tross alt, (koden som definerer koblinger) er bare en HTML-tag, og du kan legge til en stil til enhver tag. Her er et eksempel, hvor koblingene er svarte med en gul bakgrunn:

a {farge: svart; bakgrunnsfarge: gul;}

Det fungerer fint, men koblingene er litt mer komplekse enn noen andre elementer. Koblinger har faktisk tre stater:

• Normal: Dette er standardtilstanden. Med ingen CSS lagt til, viser de fleste nettlesere uvisede koblinger som blå understreket tekst.

• Besøkt: Denne tilstanden er aktivert når brukeren besøker en kobling og går tilbake til gjeldende side. De fleste nettlesere bruker en lilla understreket stil for å indikere at en kobling har blitt besøkt.

• Hover: Hovudtilstanden er aktivert når brukerens mus drar over elementet. De fleste nettlesere bruker ikke hover-tilstanden i standardinnstillingene.

Hvis du bruker en stil til kodene på en side, brukes stilen til alle tilstandene til alle ankre.

Slik styler du koblingstilstandene

Du kan bruke en annen stil til hver stat. I dette eksemplet er koblingene svart på en hvit bakgrunn. En besøkt lenke er svart på gul; og hvis musen svinger over en lenke, er lenken hvit med en svart bakgrunn.

Ta en titt på koden og se hvordan det er gjort:

linkStates. html a {farge: svart; bakgrunnsfarge: hvit;} a: besøkt {farge: svart; bakgrunnsfarge: # FFFF33;} a: svever {farge: hvit; bakgrunnsfargen: svart;}

Pseudoklasser og lenker
Denne lenken er normal
Denne lenken er besøkt
Musen svinger over denne lenken

Ingenting er spesielt om koblingene i HTML-delen av koden. Lenkene endrer tilstanden dynamisk mens brukeren samhandler med siden. Stilarket bestemmer hva som skjer i de ulike statene. Slik er du nærmer deg å sette koden sammen:

1. Bestem den vanlige lenke stilen først ved å lage en stil for taggen.

   Hvis du ikke definerer noen andre pseudoklasser, vil alle lenker følge den vanlige lenkeformen.

2. Lag en stil for besøkte lenker.

   En lenke vil bruke denne stilen etter at nettstedet er besøkt i den nåværende nettlesersøkten. Den a: besøkte velgeren angir koblinger som har blitt besøkt.

3. Lag en stil for sveverede lenker.

   A: svingestilen brukes kun på lenken når musen svever over lenken. Så snart musen forlater koblingen, går stilen tilbake til standard eller besøkt stil, etter behov.

Best link praksis

Link stiler har noen spesielle egenskaper. Du må være litt forsiktig med hvordan du bruker stiler til koblinger. Vurder følgende problemer når du bruker stiler til koblinger:

• Bestillingen er viktig. Pass på å definere det vanlige ankeret først. Pseudoklassene er basert på standard ankerstil.

• Pass på at de fortsatt ser ut som koblinger. Det er viktig at brukerne vet at noe er ment som en link. Hvis du tar bort underlinjen og fargen som vanligvis indikerer en lenke, kan brukerne være forvirret. Vanligvis kan du endre farger uten problemer, men koblinger skal enten være understreket tekst eller noe som tydeligvis ser ut som en knapp.

• Test besøkte lenker. Testing av besøkte koblinger er litt vanskelig fordi du besøker en link etter at du har besøkt en lenke. De fleste nettlesere tillater deg å slette nettleserloggen, som også bør fjerne koblingsstatusene for å være unvisited.

• Ikke endre skriftstørrelsen i svingestatus. Hover endrer siden i sanntid. En hover-stil med en annen skriftstørrelse enn den vanlige lenken kan føre til problemer. Siden er formatert for å godta den større skriftstørrelsen, som raskt kan flytte en stor mengde tekst på skjermen. Det er sikreste å endre farger eller grenser på svever, men ikke skriftfamilien eller skriftstørrelsen.