Lai izvairītos no koda atkārtošanās, mēs izmantojam vairākas HTML un CSS klases. Izmantojot CSS, mēs varam arī definēt un veidot stilu abas klases kopā un izmantot vairākas klases vienā elementā, piešķirot tām dažādus klases ID. Šo pieeju var izmantot, izmantojot ar atstarpi atdalītu sintaksi, lai vienam HTML elementam pievienotu vairākas klases.
Šajā rakstā mēs uzzināsim, kā vienam elementam pievienot vairākas klases.
Kā izmantot vairākas klases CSS?
Lai vienā elementā izmantotu divas vai vairākas klases, katrs klases ID tiks atdalīts ar atstarpi.
Lai vienā elementā izmantotu vairākas klases, ir jāievēro šāda sintakse:
< h1 klase = 'klase_1 klase_2 klase_3' > nodošana... h >
Vienā HTML elementā varat iekļaut vairāk nekā vienu klasi, atdalot tās ar atstarpi. Jūsu ērtībai šeit ir piemērs.
Piemērs: vairāku klašu izmantošana CSS
Tālāk esošajā piemērā mēs izveidosim:
- Virsraksts, izmantojot tagu
un piešķirot klases nosaukumu ' virsraksts ”.
- Tālāk mēs izveidosim citu virsrakstu un piešķirsim to divām dažādām klasēm: ' virsraksts ' un ' līniju ”. Šie klašu ID ir atdalīti ar atstarpi:
HTML
h1 >
< h1 klasē = 'virsraksta līnija' >
Vairākas klases iekšā Viens elements
h1 >
Tagad pāriesim uz CSS failu un lietosim dažus tālāk norādītos CSS rekvizītus:
- Iestatiet virsraksta fona krāsu, izmantojot funkciju rgb() kā ' (69, 51, 151) ”.
- Iestatiet fonta stilu ' slīpraksts ” virsrakstam.
HTML klasē pirmajā virsrakstā tiek izmantots klases nosaukums ' virsraksts ”. Tātad norādītajā klasē norādītais stils tiks ieviests pirmajā virsrakstā:
.virsraksts {
fona krāsa: rgb ( 69 , 51 , 151 ) ;
fonta stils: slīpraksts
}
Priekš ' līniju ” klase, mums ir:
- Iestatiet virsraksta krāsu, izmantojot funkciju rgb() kā ' (255, 0, 0) ”.
- Lietot teksta dekorēšanas rindiņu kā “ pasvītrot ”.
Otrajā virsrakstā tiks izmantoti abu klašu stili: ' virsraksts ' un ' līniju ” klase:
.line {krāsa: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:pasvītrot;
}
Pēc ieviešanas pārbaudiet rezultātu:
No izvades var novērot, ka otrajā virsrakstā tiek izmantotas abas CSS klases.
Secinājums
Lai vienā elementā izmantotu vairākas klases, izmantojiet dažādus klašu ID, atdalot tos ar atstarpēm. Izmantojot to, mēs varam vienlaikus lietot dažādus CSS rekvizītus. Tas ļauj atkārtoti izmantot klasi, kur pastāv līdzīgi elementi. Šajā rakstā ir paskaidrots, kā vienā elementā izmantot vairākas klases un veidot to kopā ar piemēru.