Siekdami išvengti kodo pasikartojimo, naudojame kelias HTML ir CSS klases. Naudodami CSS taip pat galime apibrėžti ir stilizuoti abi klases ir viename elemente naudoti kelias klases, priskirdami joms skirtingus klasės ID. Šis metodas gali būti taikomas naudojant tarpais atskirtą sintaksę, kad į vieną HTML elementą būtų įtrauktos kelios klasės.
Šiame straipsnyje sužinosime, kaip prie vieno elemento pridėti kelias klases.
Kaip naudoti kelias klases CSS?
Norėdami viename elemente naudoti dvi ar daugiau klasių, kiekvienas klasės ID bus atskirtas tarpu.
Norėdami viename elemente naudoti kelias klases, turite laikytis šios sintaksės:
< h1 klasė = 'klasė_1 klasė_2 klasė_3' > įteikimas... h >
Viename HTML elemente galite įtraukti daugiau nei vieną klasę, atskirdami jas tarpu. Jūsų patogumui pateikiame pavyzdį.
Pavyzdys: kelių klasių naudojimas CSS
Žemiau pateiktame pavyzdyje mes sukursime:
- Antraštė naudojant
žymą ir priskirti klasės pavadinimą ' Antraštė “.
- Tada sukursime kitą antraštę ir priskirsime ją dviem skirtingoms klasėms: Antraštė “ ir „ linija “. Šie klasės ID yra atskirti tarpu:
HTML
h1 >
< h1 klasė = 'antraštės eilutė' >
Kelios klasės in Vienas elementas
h1 >
Dabar pereikime prie CSS failo ir pritaikykime kai kurias toliau išvardytas CSS ypatybes:
- Nustatykite antraštės fono spalvą naudodami funkciją rgb() kaip ' (69, 51, 151) “.
- Nustatykite šrifto stilių “ kursyvu “, skirta antraštei.
HTML klasėje pirmoji antraštė naudoja klasės pavadinimą ' Antraštė “. Taigi nurodytoje klasėje nurodytas stilius bus įgyvendintas pirmoje antraštėje:
.Antraštė {
fono spalva: rgb ( 69 , 51 , 151 ) ;
šrifto stilius: kursyvas
}
Už ' linija “ klasėje, mes turime:
- Nustatykite antraštės spalvą naudodami funkciją rgb() kaip ' (255, 0, 0) “.
- Taikyti teksto dekoravimo eilutę kaip „ pabraukti “.
Antroje antraštėje bus naudojami abiejų klasių stiliai: „ Antraštė “ ir „ linija ' klasė:
.line {spalva: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:underline;
}
Įdiegę patikrinkite rezultatą:
Iš išvesties galite pastebėti, kad antroji antraštė naudoja abi CSS klases.
Išvada
Norėdami viename elemente naudoti kelias klases, naudokite skirtingus klasės ID, atskirtus tarpais. Naudodami tai galime vienu metu taikyti skirtingas CSS savybes. Tai leidžia pakartotinai naudoti klasę, kurioje yra panašių elementų. Šiame straipsnyje paaiškinta, kaip viename elemente naudoti kelias klases ir sudaryti jo stilių kartu su pavyzdžiu.