Da bi se izognili ponavljanju kode, uporabljamo več razredov v HTML in CSS. S CSS lahko definiramo in stiliziramo oba razreda skupaj in uporabimo več razredov v enem elementu, tako da jim dodelimo različne ID-je razredov. Temu pristopu lahko sledite z uporabo sintakse, ločene s presledki, za dodajanje več razredov enemu elementu HTML.
V tem članku se bomo naučili, kako enemu elementu dodati več razredov.
Kako uporabljati več razredov v CSS?
Za uporabo dveh ali več razredov v enem elementu bo vsak ID razreda ločen s presledkom.
Za uporabo več razredov v enem elementu morate upoštevati naslednjo sintakso:
< h1 razred = 'razred_1 razred_2 razred_3' > predaja ... h >
V en element HTML lahko vključite več kot en razred, tako da jih ločite s presledkom. Za lažjo predstavo je tukaj primer.
Primer: uporaba več razredov v CSS
V spodnjem primeru bomo ustvarili:
- Naslov z oznako
in dodelite ime razreda “ naslov ”.
- Nato bomo ustvarili še en naslov in ga dodelili dvema različnima razredoma: ' naslov « in » linija ”. Ti ID-ji razredov so ločeni s presledkom:
HTML
h1 >
< h1 razred = 'naslovna vrstica' >
Več razredov v En element
h1 >
Zdaj pa pojdimo na datoteko CSS in uporabimo nekatere lastnosti CSS, navedene spodaj:
- Nastavite barvo ozadja za naslov s funkcijo rgb() kot ' (69, 51, 151) ”.
- Nastavite slog pisave ' poševno ” za naslov.
V razredu HTML prvi naslov uporablja ime razreda ' naslov ”. Torej bo slog, naveden v podanem razredu, implementiran v prvi naslov:
.naslov {
barva ozadja: rgb ( 69 , 51 , 151 ) ;
slog pisave: poševno
}
Za ' linija ” imamo:
- Nastavite barvo naslova s funkcijo rgb() kot ' (255, 0, 0) ”.
- Uporabi text-decoration-line kot ' podčrtaj ”.
Drugi naslov bo uporabil sloge obeh razredov: ' naslov « in » linija ” razred:
.line {barva: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:underline;
}
Po izvedbi preverite rezultat:
Iz rezultatov lahko opazite, da drugi naslov uporablja oba razreda CSS.
Zaključek
Če želite uporabiti več razredov na enem elementu, uporabite različne ID-je razredov, ločene s presledki. S tem lahko uporabimo različne lastnosti CSS hkrati. Omogoča nam ponovno uporabo razreda, kjer obstajajo podobni elementi. V tem članku je razloženo, kako uporabiti več razredov v enem elementu in ga oblikovati skupaj s primerom.