5 CSS + Třídy a ID

5.1 Opakování z minula

Nevíš si s něčím rady? Navštiv www.jakpsatweb.cz nebo nám napiš na e-mail (tomik@jmx.cz nebo klaxalk@gmail.com).

To, co jsem si zde řekli v minulé lékci je velice šikovné při formátování textu, a vůbec stránek, kde se opakuje hodně triviálních věcí. Neboli, umíme si udělat hezký nadpis, ale takto budou bohužel (!naštěstí) vypadat všechny nadpisy stejného řádu. Pokud to tedy nechceme pokaždé psát přímo do XHTML kódu. Ale proč bychom se tedy styly učili? :-)

Mnohé z vás již jistě napadlo, když už umíme definovat vlastnosti obecným prvkům (nadpisi, odstavce..), zdali je takémožné definovat vlastnosti pouze některým nadpisům, třeba jen určité skupině, nebo ještě, zdali je možné si je nějak jednoznačně identifikovat (nazvat).
Ano, ta možnost zde je. Obojí. Máme zde pomůcku, díky které si můžeme prvky jednoznačně pojemnovat a nebo si je pojmenovat hromadně (myšleno, po více kusech).

Máme zde XHTML vlastnost ID, která nám umožňuje si jednoznačně pojemnovat (identifikovat (od toho to ID)) prvek na stránce. To se tak děje pomocí vlastnosti id. Do dvojitých uvozovek se píše náš název prvku.
Zde důrazně doporučuji používat poze malá písmena anglické abecedy, čísla, pomlčku a podtržítko.
A ve výsledku to, např. na nadpisu, vypadá takto:

<h1 id="nadpisek">Nadpis</h1>

Prvek s tímto jménem (ídéčkem) může na stránce být pouze jednou.
A nyní ta druhá podstatná věc, jak ve stylech přidělíme tomuto prvku nějakou vlastnost? Dříve jsme pro obecný prvek psali pouze jeho název. Např h1. Jelikož zde není název obecný, nebudeme ho psát jen tak, ale před něj napíšeme ještě #.
Potom se se definují vlastnosti uplně stejně, jako to bylo v předchozích případech. Hlavní rozdíl je ten, že tyto vlastnosti bude mít pouze tento jeden prvek

#nadpisek { color: red; text-align: center; }

Další situace nastává, když nám takovýto prvek na stránce pouze jednou nestačí. Pokud se dostaneme do situace, kdy potřebujeme takových to nadpisů více, tak přichází chvíle na to, abychom si je zařadili do tříd.
Stejně jako žáci tříd ve škole, mají některé společné znaky: věk, třídního učitele... tak i my můžeme prvky dávat do tříd se stejnými vlastnostmi. Ty třídy si můžeme samozřejmě pojmenovat a vlastnosti jim náležitě nastavit.
Pro přiřazení prvku do třídy používáme vlastnost class (to z anglického překladu class = třída). Do dvojitých uvozovek se opět uvádí vlastní název. Dle své libosti.
A jak to vypadá?

<h1 class="nadpisek">Nadpis</h1>

No a jak na to ve stylech? Velice obdobně, jako v případě ID. Avšak, místo znaku # použiejeme ..
Značný rozdíl je ten, že tento prvek už můžeme na stránce použít v libovolném počtu. A vždy se mu nastaví vlastnosti podle stylů

.nadpisek { color: green; text-align: center; }

Dědění vlastostí ve stylech je velice podstatná věc, kterou mnohdy využijete a ani o tom nevíte, nebo na druhou stranu vám znepříjemní práci, a vy nevíte, že je to zrovna ono.
Kaskádové styly se jmenují kaskádové právě proto, že vlastnosti prvků se přenášejí i na prvky, které jsou v nich obsažené.
Tohoto využijeme např. když chceme nastavit font pro celý dokument. Nemusíme to dělat zvlášť pro nadpisy, zvlášť pro odstavce... stačí to jednou nastavit jednomu prvku, který je všechny obsahuje. No a to není žádný jiný, než <body>.