Endre farge på HR -taggen CSS
”Tag ved å bruke CSS. “
”Tag i HTML brukes til å representere en tematisk pause mellom to avsnitt i HTML. Det ser ut som en horisontal linje mellom avsnittet. Vi vil endre fargen på denne HR -taggen ved hjelp av CSS i denne guiden. Vi bruker forskjellige egenskaper for å endre fargen på denne taggen. Du må gå gjennom disse eksemplene som er utdypet i denne guiden for en bedre forståelse av dette.
Egenskaper for å endre farge:
Vi vil bruke to egenskaper her for å endre fargen på HR -taggen:
- Bakgrunnsfarget eiendom.
- Grensen.
Eksempel nr. 1: Ved å bruke bakgrunnsfargede eiendommer
Åpne en ny HTML -fil der vi bruker “
”Merk og endre fargen på dette
Tag i CSS -filen. Vi utfører de gitte kodene i Visual Code Studio. Vi må opprette en HTML -fil for å skrive HTML -koden. Denne filen må lagres med ".HTML ”utvidelse. HTML -koden brukes til å designe
Tag mellom to avsnitt. Hvis du jobber med Visual Studio Code for å lage HTML -filer, åpner du en ny fil og skriver "!" merke. Trykk deretter ENTER HTML-kodene er innebygd i dette visuelle kodestudioet som vises på skjermen. Du må skrive kroppen og plassere koblingskoden på den gitte malen.
Definer typen av dette dokumentet som er "HTML" her. Åpne og taggen. Etter dette er "Meta" -taggen definert her som "Charset = UTF-8". Dette betyr at det lar oss bruke mange tegn i dokumentet vårt. Og det støtter mange språk. Vi satte tittelen ved å bruke “" Åpnings- og lukkekoden. Som vi vil koble denne HTML -filen til CSS -filen for å endre fargen på "
”Tag, vi bruker“ ”-merket og lukker“ "-merket vårt. Vi må skrive to avsnitt og plassere
Tag mellom disse to avsnittene slik at vi kan endre fargen på denne taggen. Vi skriver avsnittet mellom "" -kodene. Vi har en "
”Tag etter første avsnitt. Skriv deretter andre ledd og lukk taggene til “” og “”.
CSS -fil for styling og endring av farge:
Etter å ha lagret den ovennevnte HTML -filen, oppretter du en fil med navnet som er nevnt i lenken til HTML -filen. Her vil vi endre fargen på HR -taggen som vi oppretter i HTML -filen.
Først skriver vi HR, og inne i de krøllete seler av HR, kommer vi til å gi stil til HR -taggen vår. Vi gir høyden på dette “
”Taggen lik“ 4px ”slik at høyden på HR -taggen vår er omtrent 4px. Vi bruker eiendomsfargede eiendommer her. Denne egenskapen brukes til å endre fargen på HR -elementet i CSS. Vi har satt fargen på HR -linjen som blå. Så vi setter "bakgrunnsfargen" blå for dette. Grensen for dette er ingen fordi vi ikke vil plassere noen grense rundt den.
Vi får utdataene ved å bare trykke ALT+B på HTML -filen eller også ved å trykke på høyre knapp på musen og velge åpent i standard nettleseren. Vi får utdataene på nettleseren.
Her er linjen mellom avsnittene gjengitt “Blå” fordi vi setter fargen på denne HR -taggen “Blue”. Dette er den ene måten å endre fargen på "HR" -koden ved å bruke "CSS".
Eksempel nr. 2: Ved å bruke eiendommen
I dette eksemplet bruker vi "Border-Top" -egenskapen i CSS. Denne egenskapen hjelper også med å endre fargen.
Her endrer vi bare lenken til CSS -filen i forrige HTML -fil fordi vi opprettet en ny CSS -fil for å bruke en annen egenskap for å endre fargen. Så vi trenger ikke å forklare denne koden igjen.
CSS -fil for å endre farge:
Vi starter denne CSS -koden på samme måte ved å bruke HR i første linje og åpne en krøllete brakett.
Vi setter skjermen som "blokkering". Denne blokken vil fylle hele linjen. Deretter er høyden på denne linjen “2px”. Grensen for dette er null “0”. Nå bruker vi eiendommen "Border-Top" her. Denne egenskapen hjelper til med å endre fargen på HR -taggen i CSS. Her definerer “5px” bredden, “solid” definerer “linjestil”, og “rød” brukes til fargen på HR -taggen. På denne måten setter vi bredden, linjestilen og fargen på HR -taggen i CSS. Marginen vil skape plassen til “2em”. Og polstringen her er “0”.
Ettersom polstring brukes til å skape det ekstra mellomrommet mellom elementene, inneholder ikke linjen elementer, så vi setter det som null. Til slutt lukker vi den krøllete braketten og lagrer den. Vi har koblet denne filen til HTML -filen vår, slik at alle disse stylingene blir brukt på HTML -filen. Du kan sjekke utgangen av dette på bildet, da bildet også er gitt her.
Eksempel nr. 3:
I dette eksemplet bruker vi to HR -koder i HTML -filen vår og bruker begge metodene for å endre fargen på HR -taggen. Her skal vi gi to farger til HR -taggen eller linjen samtidig. La oss se på dette eksemplet.
Her oppretter vi tre avsnitt separat ved å bruke tre par av “
”Avsnittåpning og lukkende tagger. Etter hvert avsnitt plasserer vi en HR -kode. Så vi har to HR -koder her i denne koden. Koble også denne HTML -filen til den nye CSS -filen som vi vil lage for styling av disse HR -taggene.
CSS -fil for å endre farge:
I dette eksemplet bruker vi to forskjellige egenskaper for å endre fargen på samme linje. I den første HR åpner vi de krøllete seler, og vi skal bruke grensen. I dette er høyden “2px” og grensenes eiendom brukes. Vi setter bredden til "5px" og stilen på linjen som er "solid" og endrer også fargen til "grønn". Lukk deretter dette og opprette en ny "HR" der vi bruker "bakgrunnsfarget" egenskapen. Så her er høyden "4px" og bakgrunnsfargen er "oransje". Så linjen vil være av to farger som er "grønne" og "oransje".
Her kan du legge merke til at vi kan gi mer enn en farge til HR -taggen vår ved å bruke disse egenskapene.
Konklusjon:
I denne guiden har vi lært hvordan vi endrer fargen på HR -taggen ved hjelp av CSS -egenskaper. Vi har utdypet tre forskjellige koder i denne guiden. Vi har endret fargen på HR-linjen ved å bruke "bakgrunnsfargen" -attributtet. I neste eksempel har vi brukt en annen eiendom som er "grensetopp" -egenskapen for å endre fargen. Vi tilbyr også skjermbilder av utdataene etter å ha kjørt alle kodene og viser utdataene på nettleseren. Jeg håper du vil lære å endre fargen på HR -linjen i CSS etter å ha lest denne guiden.