Třída jako selektor

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.

Obrázek 31. Elementy vybrané pomocí .obsah

Elementy vybrané pomocí .obsah

Tento dokument je určen výhradně pro osobní potřebu seznámení se s jazykem HTML a tvorbou webových stránek. Jakékoliv jiné použití, včetně dalšího šíření, pořizování kopií, použití při školeních a výuce apod. je výslovně zakázáno a bude považováno za porušení autorských práv.


Copyright © 1997–2014 Jiří Kosek
blog comments powered by Disqus