Hvordan overstyre egenskapene til en CSS -klasse ved hjelp av en annen CSS -klasse

Lars Solberg

CSS er et grunnleggende programmeringsspråk som tillater brukerne å bruke forskjellige stiler, inkludert "fontstil”,“grensestil”,“margin”,“polstring”Og mange flere på websider. CSS -overstyring er en prosess for å forutsi prioriteten til et element eller CSS -styling av nettleseren. Mer spesifikt, overstyrer en klasse på en annen CSS -klasse, refererer til overordningen av styling i CSS. Med andre ord, det tidligere stilte elementet er igjen stylet av en annen klasse.

Dette innlegget vil forklare metoden for å overstyre egenskapene til en CSS -klasse ved bruk av annen CSS -klasse.

Hvordan overstyre egenskapene til en CSS -klasse ved hjelp av en annen CSS -klasse?

For å overstyre eiendommen til den ene CSS -klassen ved å bruke den andre CSS -klassen, kan du prøve ut de medfølgende instruksjonene.

Trinn 1: Lag en div container

Først må du lage en "”Element og tilordne det en klasse med et spesifikt navn.

Trinn 2: Legg til overskrift

Deretter setter du inn en overskrift ved å bruke "

”Tag mellom“ Div ”-merker.

Trinn 3: Legg til avsnitt

Legg til et avsnittsmerke "
" sammen med "klasse" Egenskap. "Klassen" er tildelt med to påfølgende verdier, "fontstil”Og“min innhold”. Legg deretter til teksten mellom avsnitts taggene:

Linuxhint

Linuxhint nettstedet Best Tutorials. Det gir det beste innholdet om forskjellige kategorier, inkludert HTML/CSS, JavaScript, Git, Docker, Windows og mange flere.

Produksjon

Trinn 4: Stiloverskrift

For å style overskriften, får du først få tilgang til overskriften med tagnavn "H1”Og bruk de nedenfor børsnoterte egenskapene:

H1
Font-stil: kursiv;
Farge: solid blå;
tekst-align: sentrum;

Her:

- “fontstil”Eiendom brukes til å spesifisere kursiv fontstil i teksten.
- “farge”Brukes til å spesifisere fargen på teksten.
- “Tekstalign”Brukes til å stille inn justering av teksten horisontalt.

Trinn 5: Stil “Div” -element

Etter det, stil "div" -elementet ved å få tilgang til klassen ".Linuxhint-Content”Og bruk“margin”Og“grensestil”Egenskaper til det. "Margin" brukes til å legge til plassen rundt det definerte elementet, og "grensestil" brukes til å definere grensestilen som ås:

.linuxhint-content
Margin: 50px;
Border-stil: Ridge;

Trinn 6: Stil første klasse av “

" Stikkord

Først får du tilgang til “

”Element ved bruk av klassen“.fontstil”. Her kan du bruke de under-nevnte egenskapene:

.fontstil
Bakgrunnsfarge: RGB (192, 240, 129) !viktig;
Font-family: 'Mansalva', kursiv !viktig;
Fontstørrelse: 130%;

Forklaringen på ovennevnte utdrag er som følger:

- “bakgrunnsfarge”Eiendom spesifiserer bakgrunnsfargen på elementet.
- “!viktig”Er en regel i CSS som brukes til å overstyre eller prioritere en eiendom fremfor en annen.
- “Font-familie”Eiendom tildeler skriften for et element:

Trinn 7: Stil “

”Element som bruker andre klasse

Få tilgang til den andre tildelte klassen “.min innhold”Av“

”Element og bruk“Font-familie”Og“bakgrunnsfarge”Egenskaper med forskjellige verdier:

.My Content
Font-Family: Verdana, Genève, Tahoma, Sans-Serif;
Bakgrunnsfarge: PowderBlue;

Det kan legges merke til at det ikke er noen effekt på output og nettleser prioriterer egenskapene til første klasse:

Du har lært hvordan du skal overstyre egenskapene til en CSS -klasse ved hjelp av en annen CSS.

Konklusjon

For å overstyre eiendommen til en CSS -klasse ved hjelp av en annen CSS -klasse, “!viktig”Regel brukes. “!viktig”Kommer etter at eiendomsverdien brukes til å gi større betydning til en verdi eller overstyre verdien av en annen klasse. Dette innlegget har vist metoden for å overstyre en CSS -klasse til en annen klasse.