Abychom se vyhnuli opakování kódu, používáme v HTML a CSS více tříd. Pomocí CSS můžeme také definovat a stylovat obě třídy společně a používat více tříd v jednom prvku tím, že jim přiřadíme různá ID tříd. Tento přístup lze následovat použitím syntaxe oddělené mezerami k přidání více tříd do jednoho prvku HTML.
V tomto článku se naučíme, jak přidat více tříd do jednoho prvku.
Jak používat více tříd v CSS?
Chcete-li použít dvě nebo více tříd v jednom prvku, každé ID třídy bude odděleno mezerou.
Chcete-li použít více tříd v jednom prvku, musíte dodržovat následující syntaxi:
< třída h1 = 'třída_1 třída_2 třída_3' > předávání... h >
V jednom prvku HTML můžete zahrnout více než jednu třídu tak, že je oddělíte mezerou. Pro vaše pohodlí uvádíme příklad.
Příklad: Použití více tříd v CSS
V níže uvedeném příkladu vytvoříme:
- Nadpis pomocí tagu
a přiřazení názvu třídy “ nadpis “.
- Dále vytvoříme další nadpis a přiřadíme jej dvěma různým třídám: „ nadpis ' a ' čára “. Tato ID tříd jsou oddělena mezerou:
HTML
h1 >
< h1 třída = 'nadpis' >
Více tříd v Jeden Element
h1 >
Nyní se přesuneme do souboru CSS a použijeme některé vlastnosti CSS uvedené níže:
- Nastavte barvu pozadí nadpisu pomocí funkce rgb() jako „ (69, 51, 151) “.
- Nastavit styl písma ' kurzíva “ pro nadpis.
Ve třídě HTML používá první nadpis název třídy „ nadpis “. Styl zadaný v zadané třídě bude tedy implementován do prvního nadpisu:
.nadpis {
barva pozadí: rgb ( 69 , 51 , 151 ) ;
styl písma: kurzíva
}
Pro ' čára “třída, máme:
- Nastavte barvu nadpisu pomocí funkce rgb() jako „ (255, 0, 0) “.
- Použít text-decoration-line jako „ zdůraznit “.
Druhý nadpis bude využívat styly obou tříd: „ nadpis ' a ' čára “třída:
.čára {barva: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:underline;
}
Po implementaci zkontrolujte výsledek:
Z výstupu můžete pozorovat, že druhý nadpis využívá obě třídy CSS.
Závěr
Chcete-li použít více tříd na jednom prvku, použijte různá ID tříd oddělená mezerami. Pomocí toho můžeme aplikovat různé vlastnosti CSS najednou. Umožňuje nám znovu použít třídu tam, kde existují podobné prvky. Tento článek vysvětluje, jak používat více tříd v jednom prvku a jak jej stylovat spolu s příkladem.