Kako bismo izbjegli ponavljanje koda, koristimo više klasa u HTML-u i CSS-u. Pomoću CSS-a također možemo definirati i stilizirati obje klase zajedno i koristiti više klasa u jednom elementu dodjeljujući im različite ID-ove klasa. Ovaj se pristup može slijediti korištenjem sintakse odvojene razmakom za dodavanje više klasa jednom HTML elementu.
U ovom ćemo članku naučiti kako dodati više klasa jednom elementu.
Kako koristiti više klasa u CSS-u?
Za korištenje dvije ili više klasa u jednom elementu, svaki ID klase bit će odvojen razmakom.
Morate slijediti sljedeću sintaksu da biste koristili više klasa u jednom elementu:
< h1 klasa = 'razred_1 razred_2 razred_3' > uručenje... h >
U jedan HTML element možete uključiti više od jedne klase tako da ih odvojite razmakom. Radi vaše udobnosti, evo primjera.
Primjer: korištenje više klasa u CSS-u
U primjeru u nastavku izradit ćemo:
- Naslov koji koristi oznaku
i dodijeli naziv klase “ naslov ”.
- Zatim ćemo stvoriti još jedan naslov i dodijeliti ga dvjema različitim klasama: ' naslov ' i ' crta ”. Ovi ID-ovi klasa odvojeni su razmakom:
HTML
h1 >
< h1 razreda = 'linija naslova' >
Više klasa u Jedan element
h1 >
Sada prijeđimo na CSS datoteku i primijenimo neka CSS svojstva navedena u nastavku:
- Postavite boju pozadine za naslov pomoću funkcije rgb() kao ' (69, 51, 151) ”.
- Postavite stil fonta ' kurziv ” za naslov.
U HTML klasi, prvi naslov koristi naziv klase ' naslov ”. Dakle, stil naveden u navedenoj klasi bit će implementiran na prvom naslovu:
.naslov {
boja pozadine: rgb ( 69 , 51 , 151 ) ;
font-style:kurziv
}
Za ' crta ” klase, imamo:
- Postavite boju naslova pomoću funkcije rgb() kao ' (255, 0, 0) ”.
- Primijeni text-decoration-line kao ' naglasiti ”.
Drugi će naslov koristiti stilove obje klase: ' naslov ' i ' crta ” klasa:
.crta {boja: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:podcrtano;
}
Nakon implementacije provjerite ishod:
Iz rezultata možete primijetiti da drugi naslov koristi obje CSS klase.
Zaključak
Za korištenje više klasa na jednom elementu, koristite različite ID-ove klasa odvojene razmacima. Koristeći ovo, možemo primijeniti različita CSS svojstva odjednom. Omogućuje nam ponovno korištenje klase tamo gdje postoje slični elementi. Ovaj je članak objasnio kako koristiti više klasa u jednom elementu i stilizirati ga uz primjer.