Zatím jsme si ukázali, jak nastavit vzhled určitého elementu pro
celý dokument společně. Někdy však potřebujeme stejný element zobrazit
v různých případech rozdílně. Proto můžeme u každého elementu, který
patří do těla dokumentu (body
), určit jeho třídu pomocí
atributu class
. Na jméno třídy definované
tímto atributem samozřejmě můžeme odkazovat i v definici stylu. Dejme
tomu, že naše stránka obsahuje poznámky a varování zapisované
následujícím způsobem:
<div class="poznamka">V tomto odstavci naleznete poznámku. Text nemá smysl, jen ilustruje použití tříd (atribut <tt>class</tt>).</div> <div class="varovani">V tomto odstavci naleznete varování. Takže pozor! Text nemá smysl, jen ilustruje použití tříd.</div>
V definici stylu lze selektor s názvem elementu doplnit o název třídy. Název třídy se od jména elementu odděluje tečkou:
div.poznamka { font-size: smaller; color: gray; margin-left: 2em; } div.varovani { color: red; font-weight: bold; margin-left: 2em; padding: 4px; border: solid 2pt outset; border-color: red; }
Jako selektor můžeme použít i samotný název třídy. Pak
deklarace platí pro všechny elementy, kterým je atributem
class
přiřazena daná třída. Na
názvu elementu vůbec nezávisí.
.poznamka { font-size: smaller;
color: gray;
margin-left: 2em; }
Použití tagu <div>
způsobí zalomení
textu a text elementu pokračuje až na další řádce. Pokud chceme třídu
přiřadit nějakému textu, který je součástí odstavce, použijeme k jeho
značení element span
společně s atributem class
. span
je element, který byl
do HTML přidán právě kvůli stylům – sám o sobě nemá žádný význam, ale
umožňuje označit a následně ostylovat i malou část textu kdekoliv
v dokumentu.
Varování
Pomocí tříd můžeme libovolný element nahradit nějakým jiným
elementem, který je určen pro zcela jiné účely. Dokonce můžeme celý
dokument vytvořit jen pomocí elementů span
a div
. Tuto vlastnost bychom však neměli příliš
využívat, aby si HTML dokumenty zachovaly svoji strukturu. Třídy
použijeme pouze tehdy, kdy potřebujeme ještě jemnější rozčlenění
struktury dokumentu, než nám nabízí HTML.