CSS understreker farge
Eksempel 1
Opprett HTML -filen for å starte denne koden. Vi skal starte med å lage en ny fil og deretter velge HTML som språket i Visual Studio Code. Endelig legger vi til "!”Til filen har vi nettopp generert. Denne filen inneholder alle HTMLs grunnleggende tagger. Alt vi trenger å gjøre nå er å skrive HTML -kroppen og CSS -filens lenke til “hodet.”I kroppen legger vi en overskrift og et avsnitt i denne koden. Vi lager også litt dristig tekst i denne koden. Nå flytter vi for å lage CSS -filen der vi understreker overskriften og avsnittet og endrer deretter fargen på dette understreket. Alle disse vil bli gjort ved å bruke CSS -egenskapene.
Vi justerer alle kroppselementene i HTML her i "senteret" ved hjelp av "tekst-align" -egenskapen. Deretter bruker vi egenskapen "tekstdekorasjon" og plasserer "understrek" nøkkelordet for verdien av denne egenskapen. Vi bruker denne eiendommen her for å generere understreken for overskriften. Vi setter også fargen på dette understreket ved å bruke egenskapen "tekst-dekorasjonsfarge".
Her setter vi fargen på dette understreket til “Black.”Vi genererer også en annen understrek ved å bruke den samme" tekstdekorasjon "-egenskapen, og denne gangen genererer vi dette understreket for avsnittet. Vi endrer fargen på dette understreket til "grønt" ved å bruke egenskapen "tekst-dekorasjonsfarge". Vi har også litt dristig tekst, så vi kommer til å generere en understrek for denne dristige teksten ved hjelp av egenskapen "tekstdekorasjon" og også endre fargen til "rød" ved å bruke egenskapen "tekst-dekorasjonsfarge".
Utgangen er her, og du kan observere at fargen på understreken av overskriften vises "svart", avsnittteksten vises i "grønn", og understreken av den dristige teksten er i "rød.”
Eksempel nr. 2
Vi bruker den samme HTML -koden for eksempel 1 her. Vi bruker den "tekst-align" egenskapen for alle kroppselementer, og "fontstørrelsen" for kroppselementet er "24px". Vi "understreker" alle elementene separat ved å bruke "tekstdekorasjon", og vi endrer fargen på understreken ved hjelp av "tekst-dekorasjonsfarge.”Her bruker vi“ RGB ”-fargen som verdien av denne" tekstdekselfargede "egenskapen". For “H1” satte vi “RGB (13, 128, 13)”, som brukes til den “grønne” skyggen. Deretter har vi “P”, der vi bruker “RGB (40. 40, 184), ”som representerer den“ blå ”fargen. For den siste dristige teksten, "B", bruker vi "RGB (216, 69, 15)", som representerer "Orange.”
Resultatet vises nedenfor, og du kan se at fargen på understreken av overskriften er "grønn", avsnittteksten er "blå", og den dristige teksten understreker er "oransje.”
Eksempel nr. 3
Igjen bruker vi HTML -koden til eksempel 1 og kobler denne gitte CSS -filen til HTML -filen i eksempel 1. All teksten til HTML-kroppen stemmer overens med "sentrum" og "24px" "fontstørrelse.”Vi understreker alle elementer på vei, avsnitt og den dristige teksten på samme måte som vi har beskrevet i eksemplet ovenfor. Her endrer vi fargen på disse understrekene ved å bruke "tekst-dekorasjonsfarge" og tilordne verdiene til fargen i "HSL" -formen. "HSL (0, 100%, 50%)" vi bruker her til overskriften understreker "Red" -fargen. Så bruker vi "HSL (133, 86%, 47%)" for avsnittets understreking, som fremstår som "lysegrønn", og for de dristige bruker vi “HSL (327, 85%, 33%)” som som er for "magenta" farge.
Utfallet er gitt nedenfor, med fargen "rød" for overskriften understreket, "lysegrønn" for avsnittteksten, og "magenta" for den dristige teksten som understreker.
Eksempel 4
I dette eksemplet skal vi endre ovennevnte HTML -kode litt ved å legge til en lenke her i denne filen. Nå har vi en overskrift, ett avsnitt, en dristig tekst i dette avsnittet, og også en lenke. Nå skal vi understreke alle disse og deretter bruke forskjellige understreker farger for dem alle i CSS.
Vi oppretter overskriften understreker ved å bruke egenskapen "tekst-dekorasjon" og endre fargen til "oransje" ved hjelp av "tekst-dekorasjonsfarge.”Etter dette bruker vi egenskapen“ tekstdekorasjon ”for å generere den dristige teksten som understreker og“ tekstdesigede farger ”for å endre fargen til“ blå.”Vi satte avsnittets“ Font-size ”til“ 22px ”. For å nevne lenken, bruker vi "A" her med "svevet" og endrer deretter fargen på understreken til "rød", slik at den vil endre fargen på understreken av lenken når vi holder musen over denne lenken og Endrer også "fontstørrelse" på sveving til "20px".
I den første utgangen understreker vi bare overskriften og den dristige teksten. Overskriften understrek vises i "oransje" farge, og den dristige tekstens understrek vises her i “Blå.”
I det andre bildet kan du se lenkenes understrekfarge. Når vi svever markøren på denne lenken, vises fargen på understreken av lenken i "rød" slik vi har satt den i vår CSS -kode, så den endrer fargen på svevet.
Eksempel 5
Her har vi en overskrift og to forskjellige avsnitt med navnene “P1” og “P2”. Vi har også litt dristig tekst og en "div" og også et "spenn" -element. Vi kommer til å generere understreken for alle disse og også endre fargen på disse understrøkene.
Vi bruker "tekst-align", og for verdien av denne egenskapen setter vi "sentrum" her for alle elementene som er til stede inne i kroppen. Vi økte også "fontstørrelsen" og satte den til "25px". Vi bruker egenskapen "Text-Decoration" for alle elementer som vi har laget i HTML-filen ved å bruke navnene deres. Deretter bruker vi også egenskapen "tekstdedigeringsfarge" i navnene på alle disse elementene her. Vi bruker fargenavn, RGB -farge og også HSL -farger her. For overskriften og første avsnitt “P1” bruker vi understrekningen i “RGB”, for andre avsnitt “P2” og fet “B”, bruker vi “HSL” -farge for understreken, og for “ div ”og“ span ”element, vi bruker fargenavn i egenskapen“ tekst-dekorasjonsfarge ”. På denne måten genererer vi understreken og endrer fargen på understreken av alle elementer.
På skjermdumpen nedenfor gjengir understreken av alle elementene i forskjellige farger fordi vi setter disse fargene i ovennevnte CSS -fil.
Konklusjon
Vi har skrevet denne opplæringen som forklarer hvordan du endrer fargen på understreken i CSS. Vi har diskutert eiendommen til CSS, som brukes til å endre fargen på understreken. Vi har forklart i detalj at egenskapen "tekst-dekorasjonsfarge" brukes til å endre understrekets farge. Vi har utdypet forskjellige eksempler her der vi har brukt denne egenskapen og forklart koden så vel som utdata for din bedre forståelse. Etter å ha lært denne opplæringen nøye, vil du bruke denne egenskapen i kodene dine.