Aby sme sa vyhli opakovaniu kódu, používame viacero tried v HTML a CSS. Pomocou CSS môžeme tiež definovať a štylizovať obe triedy spolu a používať viacero tried v jednom prvku tak, že im priradíme rôzne ID triedy. Tento prístup môže nasledovať pomocou syntaxe oddelenej medzerami na pridanie viacerých tried do jedného prvku HTML.
V tomto článku sa naučíme, ako pridať viacero tried do jedného prvku.
Ako používať viacero tried v CSS?
Ak chcete použiť dve alebo viac tried v jednom prvku, každé ID triedy bude oddelené medzerou.
Ak chcete použiť viacero tried v jednom prvku, musíte postupovať podľa nasledujúcej syntaxe:
< h1 trieda = 'trieda_1 trieda_2 trieda_3' > odovzdávanie... h >
V jednom prvku HTML môžete zahrnúť viac ako jednu triedu tak, že ich oddelíte medzerou. Pre vaše pohodlie uvádzame príklad.
Príklad: Použitie viacerých tried v CSS
V nižšie uvedenom príklade vytvoríme:
- Nadpis s použitím značky
a priradením názvu triedy “ nadpis “.
- Ďalej vytvoríme ďalší nadpis a priradíme ho dvom rôznym triedam: “ nadpis “ a „ riadok “. Tieto ID tried sú oddelené medzerou:
HTML
h1 >
< h1 trieda = 'nadpis' >
Viaceré triedy v Jeden Element
h1 >
Teraz prejdime na súbor CSS a použijeme niektoré vlastnosti CSS uvedené nižšie:
- Nastavte farbu pozadia nadpisu pomocou funkcie rgb() ako „ (69, 51, 151) “.
- Nastaviť štýl písma “ kurzíva “ pre nadpis.
V triede HTML používa prvý nadpis názov triedy „ nadpis “. Takže štýl špecifikovaný v špecifikovanej triede bude implementovaný v prvom nadpise:
.nadpis {
farba pozadia: rgb ( 69 , 51 , 151 ) ;
štýl písma: kurzíva
}
Pre ' riadok “trieda, máme:
- Nastavte farbu nadpisu pomocou funkcie rgb() ako „ (255, 0, 0) “.
- Použiť text-decoration-line ako „ zdôrazniť “.
Druhý nadpis bude využívať štýly oboch tried: „ nadpis “ a „ riadok ' trieda:
.riadok {farba: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:underline;
}
Po implementácii skontrolujte výsledok:
Z výstupu môžete vidieť, že druhý nadpis využíva obe triedy CSS.
Záver
Ak chcete použiť viacero tried na jednom prvku, použite rôzne ID tried oddelené medzerami. Pomocou toho môžeme naraz aplikovať rôzne vlastnosti CSS. Umožňuje nám znovu použiť triedu tam, kde existujú podobné prvky. V tomto článku je vysvetlené, ako používať viacero tried v jednom prvku a ako ho štýlovať spolu s príkladom.