CSS overstyrer stil

Introduksjon

Du har kanskje implementert begrepet forrang i mange livsfelt, jeg.e., prioritere arbeidet, hjemmet og personlige ting. Innen HTML -programmering må nettleseren forutsi prioriteten til elementene eller instruksjonene for å vise deretter. Dette konseptet er kjent som “CSS Override”. Det ser ut til å være forskjellige regler som bestemmer om en stil erstatter en annen basert på velgertypen som brukes til å designe en komponent. Ved hjelp av den overordnede teknikken kan vi prioritere samme type elementer med de samme egenskapene i HTML -filen. Så hvis du er ny på CSS -overstyring av styling, vil denne artikkelen hjelpe deg sterkt. La oss se på noen av eksemplene som er implementert på VS -kode.

Eksempel 1
La oss starte med det første eksemplet for å illustrere bruken av å overstyre for styling i HTML ved hjelp av CSS. Innenfor dette eksemplet vil vi se på den overordnede forrang for inline og ekstern stilarket og CSS som brukes i stilkoden. Så vi har satt i gang denne illustrasjonen med den viktigste "HTML" -koden. Hodemerket inneholder lenken og stilkoden i den. Start forklaringen på dette programmet fra hovedkoden "Body". Kroppsområdet inkluderer fem overskrifter i fem forskjellige størrelser, i.e., Største til minste.

Etter alle overskriftene har kroppskoden blitt lukket, og HTML -stengingen følger den. La oss se på "hodet" -merket nå. Vi har brukt "tittel" -merket i den til tittelen HTML -siden som "Override Style". Etter dette har vi brukt "link" -merket for å referere til det eksterne stilarket som heter "Test.CSS ”fra samme mappe ved hjelp av“ Href ”-egenskapen. Etter dette har vi en "stil" -merke av type "tekst/css". Denne taggen er blitt brukt for å style kroppsområdet til denne HTML -filen. Innenfor det har vi brukt H1, H3 og H5 overskrifter og spesifiserer egenskapen "farge" for å fargelegge dem "maroon". Her er stilen og hodemerket nær.

Se nå på den eksterne CSS -filen, “Test.CSS ”. Vi har brukt kroppselementet, H2 og H4 -overskriftene for styling. Eiendomsbakgrunnsfargen brukes til å tilordne en farge til HTML -kroppen. Farge- og margin-venstre-egenskapen har blitt brukt til å vise overskriftene 1 og 4 i lilla og angi venstre marginer på 10 piksler. Stilmerket i HTML inneholder forskjellige farger for alle overskrifter, mens denne eksterne filen inneholder forskjellige farger for overskrift 2 og 4.

La oss lagre koden og feilsøke den ved hjelp av "Kjør" -vinkelknappen fra den visuelle studio -koden oppgavelinjen. Utgangen viser HTML -siden med "Override Style" -tittelen. Overskriften 1, 3 og 5 blir rødbrun, mens overskriftene 4 og 5 svinger lilla. Dette er fordi stiltaggen styling fikk den første forrang og ble overstyrt av HTML i stedet for et eksternt stilark.

La oss oppdatere koden en gang til. Vi har oppdatert fargen for overskrift 1, 3 og 5 av denne HTML -filen i stilkoden i hodemerket. Resten ville være uendret akkurat nå.

Innenfor det eksterne stilarket har vi brukt alle fem overskriftene for endring i farge og margin til henholdsvis lilla og 30 piksler. Lagre denne CSS -filen og kjør koden på nytt.

Denne gangen fikk bare overskriftene 1, 3 og 5 den "plengrønnen" -fargen på grunn av bruk og forrang for styling innen filen i stedet for en ekstern CSS-fil.

Eksempel 2
Vi har startet dette eksemplet med HTML -taggen etterfulgt av hodet og tittelkoden. Body -taggen til denne HTML -filen inneholder enkeltoverskriften 1 som skal vises på HTML -websiden. Kroppen og HTML -hovedmerket ble stengt her etter å ha brukt kroppselementer. Stilmerket i hodemerket inneholder stylingen for overskrift 1, i.e., Fargen spesifisert som "lilla". Stil- og hodemerket er nær her. La oss kjøre denne HTML -koden med "Kjør" -menyen etter alternativet "Start feilsøking".

Utførelsen av denne filen viste en enkel overskrift av størrelse 1 i lilla i Chrome -nettleseren vår nye fanen som vist nedenfor:

La oss utføre noen overordnede stiler i denne HTML -filen. Så vi har spesifisert klasse “A” for overskrift 1 innen H1 -tagåpningen. Innenfor stilmerket har vi brukt denne klassen “A” for å fargelegge overskriften brun, jeg.e., Bruke fargeegenskapen. La oss lagre og kjøre denne koden.

Nå viser utgangen at fargen på overskriften er oppdatert til brun. Dette betyr at klasseelementet overstyrer de enkle stylingelementene.

Nå har vi brukt en annen klasse innenfor samme H1 -taggen til HTML -kroppen til denne filen. Klassenavnet er spesifisert som “B” etter klassen “A”. På den annen side har vi brukt klassen “B” for å spesifisere fargen, “Lawn Green”, for overskrift 1.

Etter å ha lagret dette HTML -oppdateringsskriptet, utførte vi det og fikk følgende utdata. Utgangen viser at fargen på overskriften 1 er oppdatert til “Lawn Green”. Det er et bevis på at klasseelementet kan overstyre et annet klasseelement.

La oss oppdatere koden igjen og bruke "ID" -elementet i H1 -overskriften til HTML -koden. Denne "ID" kan brukes etter og før klasseelementene, som vi gjorde nedenfor. Etter dette, innen stilkoden, har vi spesifisert fargen "blå" for overskrift 1 ved å bruke ID "C".

Etter å ha utført denne oppdaterte koden, fikk vi den oppdaterte HTML -siden. Fargen på overskriften 1 er oppdatert til blå fra plengrønn. Dette viser at "ID" -elementet kan overstyre "klasse" elementstyling.

Nå vil vi bruke inline styling for denne HTML -koden og bruke "farge" -egenskapen for å gjøre overskriften 1 til en "hotpink" -farge uten å legge den til den eksterne "stilen" -koden. Denne inline -stilmerket har blitt brukt før "ID" -elementet i overskriften 1.

Etter å ha kjørt denne oppdaterte HTML -filen, har vi fått "Hotpink" -fargen for overskriften som har overstyret "ID" -elementet.

Bruker "!viktig ”attributt sammen med enhver eiendom vil gi den eiendommen første forrang sammenlignet med andre eiendommer. Vi har brukt “!viktig ”attributt med fargeegenskapen til overskrift 1 og lagret den.

Presedence er gitt til den "lilla" fargeegenskapen som er spesifisert for "H1".

Konklusjon

Denne artikkelen forklarer elementene for å demonstrere CSS overstyringsstil i HTML -kode. Det innledende avsnittet forklarer hva som er overordnet og forrang og bruk av stil som overstyrer for forskjellige valgtyper i detalj ved hjelp av forskjellige stylingteknikker. For dette har vi prøvd å implementere forskjellige eksempler som inneholder inline, disposisjon og eksterne stilerstyling. Vi har prøvd forskjellige valgtyper av elementer for hovedsakelig de samme elementene for å utføre overstyring av styling.