Koodi kordamise vältimiseks kasutame HTML-is ja CSS-is mitut klassi. CSS-iga saame ka mõlemad klassid koos määratleda ja stiilida ning kasutada ühes elemendis mitut klassi, määrates neile erinevad klassi ID-d. Seda lähenemisviisi saab järgida tühikuga eraldatud süntaksi abil, et lisada ühele HTML-elemendile mitu klassi.
Sellest artiklist õpime, kuidas lisada ühele elemendile mitu klassi.
Kuidas kasutada CSS-is mitut klassi?
Kahe või enama klassi kasutamiseks ühes elemendis eraldatakse iga klassi ID tühikuga.
Ühes elemendis mitme klassi kasutamiseks peate järgima järgmist süntaksit:
< h1 klass = 'klass_1 klass_2 klass_3' > kätteandmine... h >
Ühes HTML-i elemendis saate lisada rohkem kui ühe klassi, eraldades need tühikuga. Teie mugavuse huvides on siin näide.
Näide: mitme klassi kasutamine CSS-is
Allolevas näites loome:
- Pealkiri, mis kasutab märgendit
ja määrab klassi nime pealkiri ”.
- Järgmisena loome teise pealkirja ja määrame selle kahele erinevale klassile: ' pealkiri ” ja „ rida ”. Need klassi ID-d eraldatakse tühikuga:
HTML
h1 >
< h1 klass = 'pealkirja rida' >
Mitu klassi sisse Üks element
h1 >
Liigume nüüd CSS-faili juurde ja rakendame mõnda allpool loetletud CSS-i atribuuti:
- Määrake päise taustavärv funktsiooni rgb() abil kui ' (69, 51, 151) ”.
- Määrake fondi stiil ' kaldkiri ” pealkirja jaoks.
HTML-klassis kasutab esimene päis klassi nime ' pealkiri ”. Niisiis, määratud klassis määratud stiil rakendatakse esimeses päises:
.pealkiri {
taustavärv: rgb ( 69 , 51 , 151 ) ;
font-style:kaldkiri
}
Jaoks ' rida ” klassis on meil:
- Määrake pealkirja värv funktsiooniga rgb() kui ' (255, 0, 0) ”.
- Rakenda teksti kaunistusrida kui ' joon alla ”.
Teine pealkiri kasutab mõlema klassi stiile: ' pealkiri ” ja „ rida ” klass:
.rida {värv: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:underline;
}
Pärast rakendamist kontrollige tulemust:
Väljundist näete, et teine pealkiri kasutab mõlemat CSS-klassi.
Järeldus
Ühel elemendil mitme klassi kasutamiseks kasutage erinevaid klassi ID-sid, mis on eraldatud tühikutega. Seda kasutades saame korraga rakendada erinevaid CSS-i atribuute. See võimaldab meil klassi uuesti kasutada, kui sarnased elemendid on olemas. Selles artiklis selgitati, kuidas ühes elemendis mitut klassi kasutada ja seda koos näitega stiilida.