Som vi alle vet at HTML og CSS går hånd i hånd for å lage en responsiv og attraktiv nettsteddesign, men noen ganger må vi bruke de samme CSS -egenskapene på flere HTML -koder i henhold til designkravet. Nå oppstår spørsmålet, hva gjør vi i en slik situasjon? Her kom CSS -klasser inn for å redde oss fra å skrive den samme CSS -koden flere ganger.

CSS -klasse er nøkkelspilleren for å legge til flere egenskaper til et element eller hele websiden. Denne artikkelen har sett på viktigheten av CSS -klasse, og tar sikte på å gi et innblikk i CSS -klassen følgende læringsresultater:

• Hva er en CSS -klasse
• Hvordan bruke flere klasser på en enkelt HTML -tag
• CSS -klasse for spesifikk HTML -tag

Hva er en CSS -klasse

I CSS brukes klassen til å definere et sett med egenskaper for å bruke CSS -egenskapene i bulk. En klasse kan brukes av flere HTML -tagger om gangen, noe som betyr at vi ikke trenger å skrive de samme CSS -egenskapene i vår HTML -kode flere ganger bare bruk klasse i stedet. En klasse er definert med gruppen av CSS -egenskaper. Den generelle syntaks for CSS -klassen er gitt nedenfor:

.klassenavn
CSS -egenskaper

I CSS, en prikk (.) brukes til å angi et klassenavn og CSS -egenskaper er deretter lukket i krøllete seler.

Hvordan lage en CSS -klasse

Primært brukes CSS -klassen til å omslutte et sett med CSS -egenskaper og deretter bruke disse egenskapene ved å ringe klassen. Følgende kode forklarer hvordan CSS -klasser opprettes.

CSS -klasse

Dette er første avsnitt for klasseopplæring

Dette er andre avsnitt for klasseopplæring

I eksemplet ovenfor lager vi tre CSS -klasser, container, senter og farge. Disse klassene brukes på ,

, og

Tagger.

Produksjon

I ovennevnte utgangsbeholderklasse spesifiserer containerens høyde og bredde, og legg også en grense mens fargeklasse endrer skriftfargen og midtklassen justerer teksten til sentrum.

Hvordan bruke flere klasser på enkelt HTMLTAG

I CSS kan vi bruke flere klasser på en enkelt HTML -tag som hjelper til med å style HTML mer effektivt. Følgende eksempel demonstrerer dette konseptet bedre.

CSS -klasse

Dette er første avsnitt for klasseopplæring

Dette er andre avsnitt for klasseopplæring

Dette er tredje avsnitt for klasseopplæring

I koden ovenfor opprettes det fem CSS -klasser. De container Klasse brukes på taggen, mens resten av de fire klassene blir brukt på

Tagger. Dessuten brukes fire forskjellige CSS -klasser på en enkelt

Tag (sist

Produksjon

I outputten vises tredje ledd med anvendelse av flere CSS -klasser samtidig.

Hvordan bruke klasser i HTML

Vi kan også spesifisere en CSS -klasse for en spesifikk HTML -tagg. Denne typen klasse er nyttig når vi ønsker å bruke den samme stylingen på en spesifikk tag hver gang den brukes. Følgende eksempel hjelper deg å forstå bedre.

Eksempel

CSS -klasse

Dette er det første avsnittet er skrevet i Span -taggen

Dette er andre avsnitt for klasseopplæring

Dette er tredje avsnitt for klasseopplæring

I dette eksemplet opprettet vi en fargeklasse spesielt for

tagg og påførte det på Tag så vel som

.

Produksjon

Ovennevnte utgang viser tydelig at fargeklasse bare fungerte med

tag fordi den er spesielt opprettet for

Konklusjon

I CSS er klasse et attributt som brukes til å bruke flere CSS -egenskaper på HTML -tagger. En enkelt CSS -klasse kan brukes på flere HTML -koder og omvendt. Prikken (.) symbol identifiserer en CSS -klasse. I denne artikkelen har vi lært om CSS -klasser, hvordan du bruker flere CSS -klasser på enkelt HTML -tag og CSS -klasse for spesifikk HTMLTAG. Også den samme CSS -klassen kan brukes av flere tagger om gangen.