CSS -bruker Velg
Eksempel 1
Til å begynne med, ved å lage en ny fil i programvaren, som i denne guiden er Visual Studio Code. Når vi oppretter en ny fil, kan vi velge språket og velge HTML. HTML -koden må da opprettes. Visual Studio Code lar oss øyeblikkelig skaffe de grunnleggende kodene ved å legge inn “!”Og klikk deretter“ Enter ”. Så vi utnytter denne muligheten og samler alle disse grunnleggende taggene. Vi bruker brukervalg-egenskapen i CSS og kobler denne filen til CSS-filen ved å legge til "lenke" -merket i HTML-hodemerket. Vi har en enkel overskrift og en div i denne HTML -koden. Vi skriver også litt tekst i overskriftskoden “H1” og også i “Div” -merket. Etter å ha fullført denne koden, lagre den og fortsett til CSS -filen. Nå vil vi bruke egenskapen "brukervalg" på disse tekstene i CSS-filen.
Vi velger "RGB" som overskriften "farge" og verdiene vi bruker her er "RGB (16, 100, 8)" som representerer den "grønne" skyggefargen. Deretter blir "Algerie" valgt som "Font-Family", og vi dekorerer også denne overskriften ved å legge "understreke" her. Vi legger til denne "understreker" ved å bruke egenskapen "tekst-dekorasjon". Vi vil velge denne overskriftsteksten ved å dobbeltklikke på den fordi vi ikke bruker noen "brukervalg" -egenskap til denne overskriften. Standardverdien for denne egenskapen er “Auto”. Vi setter nettopp "ingen" som verdien av denne "brukervalg" -egenskapen for "div" -elementet.
Vi kommer til å plassere egenskapen "Webkit-User-Select", da Chrome bare støtter dette prefikset og setter verdien til "Ingen". Deretter bruker vi "MS-bruker-velge" som brukes til å spesifisere søkeordverdien som er "ingen". Det betyr at brukeren ikke vil kunne velge teksten som er skrevet inne i DIV. Vi bruker også bare "brukervalg" -egenskapen og setter den til "ingen". Når dette DIV -elementet vises på skjermen, vil ikke brukeren velge DIV -elementet i teksten.
Utgangen fra denne koden viser at det ikke er noen valgt tekst vist på dette bildet, da den ikke lar brukeren velge teksten til DIV. Dette er på grunn av "ingen" -verdien av "brukervalg" -egenskapen.
Eksempel 2
Vi har en enkel overskrift og en div her. Vi inkluderer også litt tekst i "H1" overskriftskoden samt "Div" -merket. Nå vil vi bruke egenskapen "brukervalg" på denne DIV-teksten.
Vi har valgt "RGB" som overskriften "farge", og tallene vi har valgt er "RGB (87, 23, 4)", som er den "brune" skyggefargen. Deretter velger vi "algerian" som "font-family", og vi legger til "understreker" også i denne overskriften. For "Div" -elementet setter vi ganske enkelt "brukervalg" -egenskapen til "Auto". Vi bruker egenskapen "Webkit-bruker-velg" her fordi Chrome bare tillater dette prefikset og endrer verdien til "Auto".
Deretter bruker vi "MS-bruker-velg" for å spesifisere søkeordverdien, som er "Auto" i dette tilfellet. Vi indikerer også at brukeren vil få lov til å velge teksten ved å dobbeltklikke på den som blir satt inne i DIV. Vi setter også egenskapen "User-Select" til "Auto". Når dette DIV-elementet vises på skjermen, vil brukeren velge denne teksten ved å dobbeltklikke. Deretter setter vi "20px" -verdien for "fontstørrelsen" av "div" og "Times New Roman" som "font-family".
Når utgangen fra denne koden gjengis på skjermen ser det ut som det første skjermbildet. Vi kan velge disse tekstene ved å dobbeltklikke på dem, da vi har brukt "Auto" nøkkelordet som verdien av egenskapen "brukervalg".
I det andre skjermbildet kan du også se den valgte teksten når vi velger teksten ved å dobbeltklikke på den. Den valgte teksten er fremhevet i dette skjermbildet.
Eksempel 3
HTML -filen er den samme som ovenfor. Vi erstatter bare DIV -elementet med avsnittet og endrer teksten som er skrevet i dette avsnitts -taggen.
Vi justerer alle "kropp" -elementer i "senteret". Bruk deretter "RGB (96, 18, 199)" som "fargen" på overskriften og "fontfamilien" er den samme som eksemplene ovenfor. Ettersom Chrome bare aksepterer "Webkit" -prefikset, så bruker vi egenskapen "Webkit-bruker-valg" og setter verdien til "tekst". Verdien av "Moz-User-Select" er satt til "tekst". Deretter bruker vi "MS-User-Select" for å spesifisere søkeordverdien, som er "tekst". Egenskapen "brukervalg" er også satt til "tekst", noe som betyr at brukeren kan velge teksten ved hjelp av denne egenskapen. Det hindrer ikke brukeren fra å velge tekst. "Font-size" for denne "P" er "22px" og "Calibri" er valgt her som "font-family", og velger "grønn" som tekstens "farge".
Utgangen viser at vi velger teksten hvor vi vil når vi setter verdien av den brukervalgte egenskapen til "tekst" i dette eksemplet.
Eksempel 4
I denne koden endrer vi bare teksten som er skrevet inne i DIV -beholderen. Nå vil vi også bruke egenskapen "brukervalg" i dette eksemplet, men med en annen verdi.
Alle "kropp" -elementer er justert i "senteret". Bruk deretter "maroon" som overskriften "farge", og "font-family" er den samme som i eksemplene før. Vi setter nøkkelordet "alle" for verdien av "webkit-bruker-valg", "moz-bruker-velg", "ms-user-select", og også for standard syntaks som er "brukervalg". Når vi bruker "alle" som verdien av denne "brukervalg" -egenskapen, vil den velge teksten med et enkelt museklikk i stedet for et dobbeltklikk. Så vi vil kunne velge Div-teksten med bare ett enkelt klikk, og vi trenger ikke å dobbeltklikke på den for å velge denne teksten. Vi bruker også "23px" for "fontstørrelse" og styler denne teksten i "kursiv" fontstil, og "fet" denne teksten ved hjelp av "fontvekt" -egenskapen.
Utgangen før tekstvalget vises i det første skjermbildet. Vi leverer det andre skjermbildet der vi velger hele teksten med bare et enkelt museklikk.
I dette skjermbildet er teksten valgt. Eller vi kan si at teksten blir fremhevet når vi bruker et enkelt museklikk på denne teksten. Vi trenger ikke å dobbeltklikke på teksten for å velge den fordi vi bruker "alle" nøkkelordet, og den velger også hele teksten som du kan se på skjermdumpen nedenfor.
Konklusjon
Denne guiden er opprettet for å hjelpe deg med å forstå CSS “User-Select” -egenskaper. Vi har gått over dette emnet i detalj og sett på mange eksempler på hvordan vi har brukt "brukervalg" -egenskapen i CSS-kode. Vi har allerede dekket hvordan du bruker bruker-velgegenskapen for å kontrollere hvordan brukeren velger teksten eller om brukeren vil velge teksten eller ikke. Vi har også dekket hvordan du setter verdiene for denne egenskapen og har forklart alle verdiene for denne egenskapen i detalj her. Vi har satt sammen en omfattende guide for deg, der vi har tatt med koden og detaljerte forklaringer på hvordan du bruker den, så vel som resultatene.