CSS -valgfarge
Syntaks
:: utvelgelse// CSS -erklæring
Eksempel nr. 1: Endre farge på tekst ved valg
Vi må skrive noen HTML -koder for å endre fargen eller bakgrunnsfargen på teksten når teksten er valgt. Her, for å utføre disse eksemplene, bruker vi Visual Studio Code. Som et resultat åpner vi den nye filen i denne programvaren og velger språket "HTML", noe som resulterer i en HTML -fil. Så begynner vi å kode i denne filen. I vår HTML -fil lager vi en "div" som heter "D1", og så har vi en overskrift og et avsnitt i denne "Div", som vist nedenfor. Nå er vårt fokus på å endre fargen på den valgte teksten ved hjelp av "Selection" -velgeren, så for dette kommer vi til å flytte til CSS -koden der vi bruker denne "Selection" -velgeren og sjekker den fungerer i utgangen.
Vi bruker "utvalg" -velgeren her, og det er noen endringer i fargen på teksten. Vi kommer til å følge syntaksen til denne "utvalg" -velgeren, og her kan du se at vi bruker to koloner før utvalgsvelgeren og plasserer "H1" i starten, ettersom vi ønsker å bruke den gitte fargen på overskriften når Tekst av overskriften er valgt av brukeren. Her bruker vi “H1” og plasserer deretter to koloner “::”, og etter dette bruker vi “Selection”.
Nå, i dette, bruker vi egenskapen til CSS, som er "farge" -egenskapen, og denne egenskapen vil endre fargen på teksten når den er valgt. Så vi endrer den valgte teksten "farge" til "blå" for overskrift 1. Etter denne overskriften har vi også et avsnitt, så vi vil også endre "fargen" i avsnittsteksten ved valg. Vi legger "P" her, og igjen bruker vi "Selection" -velgeren for å endre fargetekst til en "rød" farge når den er valgt.
La oss sjekke hvordan det fungerer, og fargen på teksten endres ved valg i utgangene nedenfor. I den første utgangen kan du se at den valgte tekstfargen på overskriften virker blå når vi setter den i valgvelgeren ovenfor i CSS -koden.
Nå kommer den andre utgangen, og her kan du se fargen på den valgte avsnittteksten som virker "rød" her. Den svarte teksten blir konvertert til rød når vi velger teksten til dette avsnittet.
Eksempel nr. 2: Endre bakgrunnsfarge på tekst ved valg
Vi bruker den samme HTML -koden i dette eksemplet, men her i CSS skal vi endre fargen på bakgrunnen på teksten når den er valgt. Vi kommer til å bruke "Selection" -velgeren i dette eksemplet også.
Vi bruker “H1” og plasserer deretter “::” og “Selection” -velgeren. Som her må vi endre bakgrunnsfargen på teksten ved valg, så vi bruker egenskapen "bakgrunnsfarge" her. Når vi bruker denne egenskapen inne i valgvelgeren, vil den endre tekstens bakgrunnsfarge i henhold til fargen som vi har valgt her. I koden kan du se at vi bruker "gul" som bakgrunnsfarge på den valgte teksten for overskriften. Så skal vi endre avsnittets tekstbakgrunnsfarge. Så vi bruker igjen "Selection" -velgeren med "P" og erklærer "bakgrunnsfargen" -egenskapen og velger den "grå" fargen for denne avsnittets tekstbakgrunn.
Bakgrunnsfargen på overskriftsteksten sees her i utgangen nedenfor. Når vi velger overskriften, endres bakgrunnsfargen fra hvitt til gult. Denne endringen er bare på grunn av "utvalg" -velgeren som vi har brukt.
Endringen i bakgrunnsfargen på den valgte teksten i avsnittet vises nedenfor, og du kan merke at bakgrunnsfargen endres til en "grå" farge når denne teksten er valgt.
Eksempel nr. 3
Her har vi laget en overskrift, et avsnitt og en div i dette eksemplet og kommer til å bruke samme bakgrunnsfarge og tekstfargen når vi velger en tekst fra alle disse.
I dette eksemplet ga vi ikke noe valgnavn før den doble kolonen "::" av "utvalg" -velgeren fordi vi ønsker å gi samme tekstfarge og bakgrunnsfarge til alle disse tekstene når den er valgt, enten det er en overskrift eller et avsnitt. Vi bare setter "::" og "utvalg" -velgeren og bruker deretter to egenskaper her.
Utgangen viser at begge fargene endres på valg av teksten. Bakgrunnsfargen virker gul, og tekstfargen virker rød når vi velger teksten. Også det samme i tilfelle av overskrift.
Eksempel 4
I koden nedenfor oppretter vi flere avsnitt ved hjelp av forskjellige navn og bruker deretter forskjellige farger på bakgrunnen eller teksten på hvert avsnitt når vi velger en tekst i avsnittet. Alle disse stylingene vil bli gjort i CSS.
“.P1 ”brukes her, som definerer avsnittnavnet, og deretter bruker vi" Selection "-velgeren med dette. Vi endrer skriftfargen på "P1" til "Blå", så den blir blå når den er valgt. Deretter har vi "P2", og vi endrer "bakgrunnsfarge" til "gul" når teksten er valgt. Nå kommer “P3” vi bruker igjen "utvalg" -velgeren og endrer "bakgrunn" til "rødt.”
Etter dette nevnes “P4” med "Selection" -velgeren, og vi endrer "bakgrunnsfargen" så vel som "farge" på skriften til "lilla" og "hvit". Vi endrer "tekstskyggen" av "P5" til "1px 1px rød". Det vil skape en skygge av "rød" farge når vi velger teksten til "P5". Deretter bruker vi "P6" med denne "utvalg" -velgeren og bruker "bakgrunnen", som endrer bakgrunnen og setter svart til den vil vises "svart" når teksten er valgt. Vi styler også alle disse avsnittene uten valg, så vi bruker "kropp", og alle egenskapene som vi bruker her vil bli brukt på alle avsnitt og overskrifter. Vi bruker "font-family" og setter den til "sans-serif", slik at all teksten vises i dette formatet. Vi setter sin "linjehøyde" til "1.45 ”og“ bakgrunnsfarge ”til“ Lys-rosa.”Vi bruker også“ polstring ”her, som er valgt som“ 1EM ”. "Font-size" for alle avsnitt er "20px", og også "fontvekt" -settene som "fet" for alle.
Vi viser to eller tre skjermbilder her, og du kan merke endringen i skriftfargen og bakgrunnsfargen når teksten er valgt. Dette er alt på grunn av "utvalg" -velgeren.
Konklusjon
I denne guiden har vi utforsket konseptet med "utvalg" -velgeren. Som vi har diskutert at denne "utvalg" -velgeren brukes til å endre fargen på skriften og også bakgrunnsfargen når brukeren velger teksten som "utvalg" -velgeren brukes. Vi har utdypet flere eksempler her der vi har brukt denne "utvalg" -velgeren. Jeg håper du vil forstå denne "utvalg" -velgeren etter å ha gått gjennom denne guiden, og dette vil hjelpe deg mye i prosjektene eller nettstedene dine.