CSS Active Link
Eksempel 1
Åpne HTML -filen din for å lage lenker. For styling av disse koblingene oppretter vi CSS -filen vår. Vi bruker Visual Code Studio for å utføre disse eksemplene. Så vi oppretter HTML -filen, og HTML -koden er også gitt her. Etter å ha fullført koden, lagre den med ".HTML ”utvidelse.
I forrige HTML -kode oppretter vi tre forskjellige lenker. Den første lenken vi har opprettet er "Google" -koblingen, den andre lenken er "Yahoo" -lenken, og den siste lenken er "Firefox" -lenken. Vi vil også style disse koblingene i CSS. Denne HTML -filen er her for bare å lage disse koblingene. Gå nå til følgende CSS -fil, og se hvordan du kan style disse koblingene.
CSS -kode
I det forrige bildet bruker vi “: Aktiv” -velgeren, som vi bruker for å gi stil til den lenken. Når brukeren trykker på denne lenken, blir koblingens bakgrunnsfarge “gul”. Så har vi ": link" -velgeren, som stiler lenken som ikke blir besøkt og endrer fargen på den uovertrufne lenken til "Blue". Det vil vises "blå" på skjermen. Etter dette bruker vi “: Besøkt” -velgeren, og denne besøkte velgeren endrer fargen på den besøkte lenken til “Purple”. Til slutt har vi ": Hover" -velgeren der vi endrer fargen på lenken til en "rød" farge når markøren beveger seg over lenken. Når du beveger musen på disse koblingene, endres fargen på disse koblingene til "rød". I dette eksemplet endret vi fargen på lenken når du svever på den og besøker lenken eller fargen på den uvisede lenken.
Produksjon
Du kan se tre lenker i forrige bilde. De to første lenkene er farge "lilla", så det betyr at disse to koblingene blir besøkt. Den tredje lenkets farge er "blå", noe som betyr at denne tredje lenken ikke blir besøkt når vi setter disse fargene i CSS -koden for de besøkte og uovertruffelige lenker. Når vi svever på en hvilken som helst lenke, blir fargen til en "rød" farge. Når vi klikker på en hvilken som helst lenke, vil fargen på lenkenes bakgrunn vises "gul". Når vi klikker på den første Google -lenken, vises Google -siden på skjermen, som vist i følgende bilde:
Eksempel 2
Dette er et annet eksempel der vi oppretter en kobling mellom avsnittet og gir stiler til denne lenken i CSS. La oss se hvordan lenken er aktiv mellom avsnittet.
I forrige bilde kan du se at vi har opprettet et avsnitt ved hjelp av HTML og lagt til en kobling mellom avsnittet. Vi vil bruke CSS i dette eksemplet for å endre koblingens og avsnittets farge.
CSS -kode
I den forrige CSS -filen kan du se at vi endret fargen på lenken til "Blå" inne i de krøllete tannreguleringene til ": Link", så denne lenken vil vises blå mellom avsnitt. Deretter bruker vi en "rød" farge for den besøkte lenken. For "Hover" velger vi bakgrunnsfargen som "gul". Den "aktive" fargen på lenken er satt som "lilla", og den aktive avsnittsfargen er betegnet som "#EEE" -farge. Så når lenken er aktiv, endrer den koblingens farge så vel som bakgrunnsfargen på avsnittet.
Produksjon
I denne første utgangen kan du se at koblingenes farge i avsnittet virker "blå" når vi setter den som "blå" i CSS -filen vår.
I den andre utgangen blir fargen på lenken til "rød", noe som betyr at vi har besøkt lenken her, så fargen blir endret fra "blå" til "rød".
Eksempel 3
I dette tredje eksemplet vil vi endre koblingens skriftstørrelse, skriftstil og farger ved hjelp av CSS. For dette må vi lage forskjellige lenker i HTML.
I forrige HTML har vi laget fem forskjellige koblinger ved å bruke de forskjellige klassene i "". Vi gir navnet på klassen som "Link1", "Link2", "Link3", "Link4" og "Link5". Vi bruker disse navnene for å endre stilen på lenken.
CSS -kode
Vi bruker "Link1" -navnet på klassen og bruker stilen på denne første lenken. Den første lenken virker "rød" når den er "aktiv". Deretter endrer vi "fontstørrelse" for den andre lenken. Når vi svever over denne lenken, øker størrelsen på denne koblingen til "150%". Vi setter "bakgrunnsfargen" for den tredje lenken til "rød", så bakgrunnsfargen blir "rød" når vi svever over den tredje lenken. Vi endrer skriftstilen til den fjerde lenken ved å bruke egenskapen "Font-Family". Vi bruker "tekstdekorasjon" i den femte lenken og setter den til "understreker". Utgangen vises.
Produksjon
Denne utgangen endrer fargen når vi svever over den første lenken. Når vi svever over den andre lenken, endres skriftstørrelsen. Når det gjelder den tredje lenken, endres bakgrunnsfargen. Fontstilen endres til “monospace” når du svever over den fjerde lenken.
Eksempel 4
I dette eksemplet vil vi lage to koblingsknapper med lenker inne i knappene. I den første knappen plasserer vi lenken til “Gmail”. Inne i den andre knappen legger vi lenken til “Facebook”. Så når du klikker på knapp en, åpner den Gmail -siden. Når du klikker på den andre knappen, åpner den Facebook -siden. Nå ønsker vi også å bruke stilen til disse koblingene.
Når denne lenken er aktiv, virker fargen på denne lenken "rød" når vi plasserer "fargen: rød" inne i de krøllete seler på ": aktiv" -velgeren. Når vi svever over denne lenken, som er inne i knappen, blir fargen på knappen "rosa" når vi setter denne fargen i CSS -filen. Etter å ha besøkt disse koblingene, vil fargen være "blå", og fargen på knappens bakgrunn vil være "hvit".
Produksjon
Den forrige utdata viser to koblingsknapper der vi har to forskjellige lenker, og du kan se at fargen på begge koblingene er "blå", noe som betyr at begge koblingene blir besøkt.
Konklusjon
Vi har lært om den "aktive lenken" i denne guiden. Vi har brukt forskjellige stylinger på forskjellige lenker ved hjelp av CSS -egenskapene. Vi har utført fire forskjellige eksempler her, da vi vet at lenken er aktiv når den er presset. Her har vi endret stilen til den aktive lenken, skriftstørrelsen på lenken når vi svever over den, og fargen etter å ha besøkt lenken. Vi brukte forskjellige farger for de besøkte og uovertelige lenker i denne guiden. Vi har lært å style disse aktive koblingene i CSS i detalj.