Třídy a identifikátory

Pokud jste se v minulé lekci poctivě snažili splnit všechny úkoly opakovacího testu, mohlo se vám zdát, že máte pro tvorbu bohatější stránky k dispozici málo elementů (tagů). Jedna část textu z minulého testu mohla mít vlastnosti uvedené v tagu body, básnička mohla být uzavřena v odstavci a skupina odkazů v divu. Co kdybychom ale chtěli ještě jiný blok stránky nějak odlišit - žádný tag už by nám nezbyl. Do stejné situace se dostane autor stránek pokud chce například některé buňky tabulky odlišit od ostatních, nebo chce mít odstavce nebo divy s různými vlastnostmi atd. Pro tyto účely je možné vytvořit svoje vlastní třídy nebo identifikátory.

Definování vlastní třídy je jednoduché, stačí, když v souboru stylů před svůj název třídy přidáte tečku, například (do css):

.moje {color: blue; font-size: 20 px}

Všude na stránce, kde budete chtít tuto třídu použít, ve zdroji stránky jako parametr tagu použijete class="název třídy", a to u kteréhokoliv tagu, kde vlastnosti mají smysl, například (do html):
<p class="moje">tento odstavec bude modrý a velikost texu 20 px</p>
<td class="moje">v této buňce bude text stejný jako v odstavci</td>
<tr class="moje">v celém řádku tabulky bude text stejný jako v odstavci</tr>
Ve třídě moje je definovaná barva a velikost textu, ostatní vlastnosti se "zdědí" z tagu, ve kterém je třída použita a aby to nebylo tak jednoduché, další "dědění" u každého tagu probíhá z nadřazeného tagu (ve kterém je obsažen), takže může při nerozvážné práci dojít ke zmatkům.

Novou třídu lze definovat také takto:
h1.nadpis {color: red} - potom platí pro všechny nadpisy <h1>, které mají uveden atribut class="nadpis", pro jiné elementy tuto třídu využít nelze.

K nadefinování vlastností pro odlišení elementů, je možné využít také identifikace (ID) objektu stránky. Identifikátor (ID) na rozdíl od třídy můžete použít na stránce jen jednou, každý objekt na stránce má totiž svůj jednoznačný identifikátor. Používá se u jedinečných částí stránek, například záhlaví, menu a podobně, využívá se také pro účely scriptů. V definici stylů ho poznáte podle toho, že začíná dvojkřížkem #, například identifikátor uvedený v definici stylů:
#podtitul { text-align: center; font-weight: bold; text-decoration: overline}
můžeme použít ve zdroji stránky:
<p id="podtitul">Text podtitulu</p>

Podobně jako u tříd je možné použít tuto definici identifikátoru:
div#podtitul { text-align: center; font-weight: bold; text-decoration: overline}
Tato definice se bude týkat jen divu s uvedeným identifikátorem podtitul, používá se pro určení vlastností konkrétního divu.

Názvy tříd i identifikátorů by měly být buď jednoslovné nebo je může tvořit více slov spojených podtržítkem, například menu_vpravo, užitečné budou srozumitelné, nápovědné názvy.


Úkoly:

Úkol (2 body):

Na stránce vtipy.html odlište jeden z vtipů pomocí třídy (vtipy měly být uzavřené v <p>). Jednou z vlastností této třídy má být i rámeček.

Úkol (2 body):

Do stylu pro stránku rozvrh.html doplňte třídu, pomocí které budou čísla hodin v prvním řádku tabulky zapsány kurzívou (třídu můžete použít i do řádku tabulky - viz ukázka v této lekci).

Úkol (3 body):

Doplňte další třídu, kterou použijete pro zvětšení a obarvení písma v prvním sloupci rozvrhu s názvy dnů.

Název školy:Základní škola, Hradec Králové, M. Horákové 258
Název projektu:EU peníze školám
Číslo projektu:CZ.1.07/1.4.00/21.2575
Téma:Tvorba WWW stránek
Název:VY_32_INOVACE_14_10B_tvorba www14
Autor:Pavel Petr
Použité zdroje: Není-li uvedeno jinak, jsou všechny ilustrační obrázky dílem autora.