Třídy prvků v CSS
V předchozích lekcích jsme vybírali prvky stránky podle názvu tagu, nastavovali jsme styly například všem odstavcům najednou. Na stránce ale mohou být odstavce různých typů, na které je potřeba aplikovat různé styly. K vyřešení takového problému můžeme různé odstavce přiřadit k různým CSS třídám.
Abyste přiřadili tag nějaké třídě, je potřeba
tomuto tagu napsat atribut class,
a do něj - vymyšlený název třídy,
složený z písmen, číslic, znaků podtržítka
a pomlčky.
Podívejme se na příklad. Vytvořme odstavce
se dvěma typy tříd - eee a zzz:
<p class="eee">
paragraph with class eee
</p>
<p class="eee">
paragraph with class eee
</p>
<p class="zzz">
paragraph with class zzz
</p>
<p class="zzz">
paragraph with class zzz
</p>
Nyní přistupme v CSS k odstavcům
s různými třídami a nastavme jim nějaké
styly. Například obarvíme odstavce s třídou
zzz na červenou a odstavce s třídou
eee na zelenou.
K tomu je potřeba v CSS souboru přistoupit k
našim třídám. Přístup má následující
syntaxi: nejprve přijde znak tečka a poté
námi vymyšlený název třídy. To znamená, že pro
přístup ke třídě eee je potřeba napsat
.eee, a pro třídu zzz - napsat
.zzz.
Takže, udělejme, co je popsáno. Přidejme k našemu HTML také CSS styly pro zavedené třídy:
.eee {
color: green;
}
.zzz {
color: red;
}
Pokud spustíme náš kód, výsledkem bude následující:
Je dán následující kód:
<ul>
<li class="odd">text</li>
<li class="eve">text</li>
<li class="odd">text</li>
<li class="eve">text</li>
<li class="odd">text</li>
<li class="eve">text</li>
</ul>
Obarvěte prvky s třídou
odd na červenou a prvky s
třídou eve na zelenou.
Je dán následující kód:
<h2 class="eee">Title</h2>
<p class="eee">
paragraph
</p>
<p class="eee">
paragraph
</p>
<p>
paragraph without class
</p>
<ul class="eee">
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
Obarvěte všechny prvky s třídou
eee na červenou.
Vysvětlete, proč se v předchozí úloze na červenou
obarví tagy li, ačkoli třída,
nastavující barvu, je přiřazena tagu ul.