Pentru a evita repetarea codului, folosim mai multe clase în HTML și CSS. Cu CSS, putem, de asemenea, să definim și să stilăm ambele clase împreună și să folosim mai multe clase într-un singur element, atribuindu-le ID-uri de clasă diferite. Această abordare poate fi urmată prin utilizarea sintaxei separate prin spațiu pentru a adăuga mai multe clase la un element HTML.
În acest articol, vom învăța cum să adăugați mai multe clase la un element.
Cum se utilizează mai multe clase în CSS?
Pentru a utiliza două sau mai multe clase într-un element, fiecare ID de clasă va fi separat printr-un spațiu.
Trebuie să urmați următoarea sintaxă pentru a utiliza mai multe clase într-un singur element:
< clasa h1 = „clasa_1 clasa_2 clasa_3” > predare... h >
Într-un singur element HTML, puteți include mai multe clase, separându-le cu un spațiu. Pentru confortul dumneavoastră, iată un exemplu.
Exemplu: Utilizarea mai multor clase în CSS
În exemplul de mai jos, vom crea:
- Un titlu care folosește eticheta
și atribuie numele clasei „ rubrica ”.
- În continuare, vom crea un alt titlu și îl vom atribui la două clase diferite: „ rubrica ' și ' linia ”. Aceste ID-uri de clasă sunt separate printr-un spațiu:
HTML
h1 >
< h1 clasă = 'linie de titlu' >
Clase multiple în Un element
h1 >
Acum, să trecem la fișierul CSS și să aplicăm unele proprietăți CSS enumerate mai jos:
- Setați culoarea de fundal la titlu folosind funcția rgb() ca „ (69, 51, 151) ”.
- Setați stilul fontului „ cursiv ” pentru antet.
În clasa HTML, primul titlu utilizează numele clasei „ rubrica ”. Deci, stilul specificat în clasa specificată va fi implementat pe primul titlu:
.rubrica {
culoare de fundal: rgb ( 69 , 51 , 151 ) ;
stil font: cursiv
}
Pentru ' linia ” clasa, avem:
- Setați culoarea titlului folosind funcția rgb() ca „ (255, 0, 0) ”.
- Aplicați text-decor-line ca „ subliniază ”.
Al doilea titlu va folosi stilurile ambelor clase: „ rubrica ' și ' linia ” clasa:
.linia {culoare: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:subliniere;
}
După implementare, verificați rezultatul:
Din rezultat, puteți observa că al doilea titlu utilizează ambele clase CSS.
Concluzie
Pentru a utiliza mai multe clase pe un singur element, utilizați ID-uri de clasă diferite separate prin spații albe. Folosind aceasta, putem aplica diferite proprietăți CSS simultan. Ne permite să reutilizam clasa acolo unde există elemente similare. Acest articol a explicat cum să folosiți mai multe clase într-un singur element și să îl stilați împreună cu un exemplu.