For at undgå gentagelse af kode bruger vi flere klasser i HTML og CSS. Med CSS kan vi også definere og style begge klasser sammen og bruge flere klasser i ét element ved at tildele dem forskellige klasse-id'er. Denne tilgang kan følges ved at bruge den mellemrumsseparerede syntaks til at tilføje flere klasser til et HTML-element.
I denne artikel lærer vi, hvordan du tilføjer flere klasser til et element.
Hvordan bruger man flere klasser i CSS?
For at bruge to eller flere klasser i et element, vil hvert klasse-id være adskilt af et mellemrum.
Du skal følge følgende syntaks for at bruge flere klasser i ét element:
< h1 klasse = 'klasse_1 klasse_2 klasse_3' > aflevere... h >
I et enkelt HTML-element kan du inkludere mere end én klasse ved at adskille dem med et mellemrum. For nemheds skyld er her et eksempel.
Eksempel: Brug af flere klasser i CSS
I nedenstående eksempel vil vi oprette:
- En overskrift, der bruger
-tagget og tildeler klassenavnet ' overskrift ”.
- Dernæst vil vi oprette en anden overskrift og tildele den til to forskellige klasser: ' overskrift ' og ' linje ”. Disse klasse-id'er er adskilt af et mellemrum:
HTML
h1 >
< h1 klasse = 'overskriftslinje' >
Flere klasser i Et element
h1 >
Lad os nu gå til CSS-filen og anvende nogle CSS-egenskaber, der er anført nedenfor:
- Indstil baggrundsfarve til overskriften ved hjælp af rgb()-funktionen som ' (69, 51, 151) ”.
- Indstil skrifttypestilen ' kursiv ” for overskriften.
I HTML-klassen bruger den første overskrift klassenavnet ' overskrift ”. Så stilen angivet i den angivne klasse vil blive implementeret på den første overskrift:
.overskrift {
baggrundsfarve: rgb ( 69 , 51 , 151 ) ;
skrifttype: kursiv
}
For ' linje klasse, vi har:
- Indstil farven på overskriften ved hjælp af rgb()-funktionen som ' (255, 0, 0) ”.
- Anvend tekst-dekorationslinje som ' understrege ”.
Den anden overskrift vil bruge stilene fra begge klasser: ' overskrift ' og ' linje ' klasse:
.line {farve: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:underline;
}
Efter implementering skal du kontrollere resultatet:
Fra outputtet kan du se, at den anden overskrift bruger begge CSS-klasser.
Konklusion
Hvis du vil bruge flere klasser på et enkelt element, skal du bruge forskellige klasse-id'er adskilt af mellemrum. Ved at bruge dette kan vi anvende forskellige CSS-egenskaber på én gang. Det giver os mulighed for at genbruge klassen, hvor der findes lignende elementer. Denne artikel forklarede, hvordan man bruger flere klasser i et enkelt element og stiler det sammen med et eksempel.