For å unngå repetisjon av kode bruker vi flere klasser i HTML og CSS. Med CSS kan vi også definere og style begge klassene sammen og bruke flere klasser i ett element ved å tildele dem forskjellige klasse-IDer. Denne tilnærmingen kan følges ved å bruke den mellomromseparerte syntaksen for å legge til flere klasser til ett HTML-element.
I denne artikkelen vil vi lære hvordan du legger til flere klasser til ett element.
Hvordan bruke flere klasser i CSS?
For å bruke to eller flere klasser i ett element, vil hver klasse-ID være atskilt med et mellomrom.
Du må følge følgende syntaks for å bruke flere klasser i ett element:
< h1 klasse = 'klasse_1 klasse_2 klasse_3' > overrekke... h >
I et enkelt HTML-element kan du inkludere mer enn én klasse ved å skille dem med et mellomrom. For enkelhets skyld, her er et eksempel.
Eksempel: Bruk av flere klasser i CSS
I eksemplet nedenfor vil vi lage:
- En overskrift som bruker
-taggen og tilordner klassenavnet ' overskrift '.
- Deretter vil vi lage en annen overskrift og tilordne den til to forskjellige klasser: ' overskrift ' og ' linje '. Disse klasse-ID-ene er atskilt med et mellomrom:
HTML
h1 >
< h1 klasse = 'overskriftslinje' >
Flere klasser i Ett element
h1 >
La oss nå gå til CSS-filen og bruke noen CSS-egenskaper som er oppført nedenfor:
- Sett bakgrunnsfarge til overskriften ved å bruke rgb()-funksjonen som ' (69, 51, 151) '.
- Angi skriftstilen ' kursiv ' for overskriften.
I HTML-klassen bruker den første overskriften klassenavnet ' overskrift '. Så stilen spesifisert i den angitte klassen vil bli implementert på den første overskriften:
.overskrift {
bakgrunnsfarge: rgb ( 69 , 51 , 151 ) ;
skriftstil:kursiv
}
For ' linje klasse, vi har:
- Sett fargen på overskriften ved å bruke rgb()-funksjonen som ' (255, 0, 0) '.
- Bruk tekst-dekorasjonslinje som ' understreke '.
Den andre overskriften vil bruke stilene til begge klassene: ' overskrift ' og ' linje ' klasse:
.linje {farge: rgb ( 255 , 0 , 0 ) ;
tekst-dekorasjonslinje:understreking;
}
Etter implementering, sjekk resultatet:
Fra utdataene kan du se at den andre overskriften bruker begge CSS-klassene.
Konklusjon
For å bruke flere klasser på et enkelt element, bruk forskjellige klasse-ID-er atskilt med mellomrom. Ved å bruke dette kan vi bruke forskjellige CSS-egenskaper samtidig. Det lar oss gjenbruke klassen der lignende elementer finnes. Denne artikkelen forklarte hvordan du bruker flere klasser i et enkelt element og stiler det sammen med et eksempel.