Hvordan style lenker ved hjelp av CSS?

Koblinger er enheter som indikerer nye steder. Disse hyperkoblingene eller linkene spiller en viktig rolle på nettsteder når du vil at brukerne dine skal besøke annet innhold tilgjengelig online. Disse betegner enten innhold som er tilgjengelig på samme nettsted eller innhold som er tilgjengelig på andre nettsteder. Nå vet vi hvor viktig det er å få nettstedet ditt til å se visuelt behagelig ut, derfor er styling hyperkoblinger like viktig som å style noe annet element på nettstedet ditt. Du må gruble på hvordan du gjør det. Vel, hold fast fordi dette innlegget vil veilede deg alt om stylingslenker.

Hvordan style lenker?

Koblinger eller hyperkoblinger på et nettsted kan styles ved hjelp av forskjellige CSS -egenskaper. Stylingskoblinger kan omfatte å endre farge, skriftstørrelse, fontfamilie osv.

Eksempel
Anta at du vil at en hyperkobling på nettstedet ditt skal ha en dristig stil og fargen skal være grønn. Bruk følgende kodestykke.

Produksjon

Fargen og fontvekten på lenken er endret vellykket.

Styling lenker i henhold til stater

Koblinger som vises på et nettsted har forskjellige stater, og de kan styles basert på deres nåværende tilstand. De forskjellige tilstandene som en kobling kan ha er;

en kobling (en lenke som ennå ikke er besøkt av brukeren)

A: Besøkt (en lenke som har blitt besøkt av brukeren)

A: Hopp (Tilstanden til lenken når en musemarkør flyttes over lenken)

A: Aktiv (Tilstanden til lenken når brukeren klikker på lenken)

Stylingskoblinger i henhold til deres stater er nødvendig fordi de lar brukeren forstå tilstanden til en lenke og forhindre at brukeren står overfor enhver forvirring.

Eksempel
Bruk følgende kodebit til å style lenker på nettstedet ditt i henhold til staten.

Produksjon

1. Når lenken ikke er besøkt av brukeren ennå.
   
2. Når brukeren besøker lenken.
   
3. Når brukeren bringer musen over lenken.
   
4. Når brukeren klikker på lenken.
   

Merk: Når du styler flere lenker, må du opprettholde den ovennevnte ordren slik at koblingene dine oppfører seg deretter. La oss anta at du stil hiver først i stedet for styling som ble besøkt, så vil stilen definert for besøkte overstyre svevestil, og dette er en situasjon som man må unngå.

Hvordan fjerne standard understrek fra hperlinks

Som standard er det en understrek på lenker på et nettsted som noen ganger kan være uønsket. Du kan bli kvitt understreken fra lenker ved hjelp av CSS. Følgende kodebit viser hvordan det kan gjøres.

I eksemplet ovenfor fjernes standardundersøkelsen fra en uovertruffen lenke ved å angi verdien av tekstdekorasjonsegenskapen til “Ingen”. Du kan bruke ovennevnte kodebit for å fjerne en understrek fra andre tilstander av en lenke også.

Produksjon

Standard understreken fjernes med hell fra den uvisede lenken.

Koblinger som knapper

Noen ganger kan de vanlige tekstkoblingene som vises på et nettsted være kjedelige, for å gjøre dem mer attraktive, kan du få lenker til å vises som knapper på nettstedet ditt. Å lage koblinger som knapper bruker flere CSS-egenskaper som polstring, grense, bakgrunnsfarge osv.

Eksemplet nedenfor illustrerer hvordan du bruker lenker som knapper.

I kodebiten vises en kobling som en knapp. De uvisede og besøkte tilstandene i knappen blir stylet annerledes enn sveveringen og aktive tilstandene i lenken.

Produksjon

1. Den uvisede og besøkte tilstanden til knappekoblingen.
   
2. Hover og aktive tilstander i knappekoblingen.
   

En lenke i alle tilstandene er designet med suksess som en knapp.

Konklusjon

Stylingskoblinger eller hyperkoblinger på et nettsted er like viktig som å style noe annet element. For stylingslenker brukes forskjellige CSS-egenskaper, for eksempel farge, bakgrunnsfarge, font-familie, fontstil osv. Koblinger kan også styles i henhold til deres stater som er uovertruffen, besøkes, svevet og aktivt, dessuten for å forbedre utseendet til lenker som vises på nettsteder, kan du bruke lenker som knapper. Denne oppskrivningen diskuterer hvordan du styler koblinger ved å bruke CSS i dybden ved hjelp av passende eksempler.