Čo dokáže CLASS v Kaskádových štýloch [6.časť CSS]

Dnes sa budeme podrobnejšie zaoberať atribútom CLASS, ktorý nám veľmi pomáha pri zadefinovávaní CSS a bolo by už veľmi nepohodlné pracovať bez neho. Táto časť je tématicky dosť rozsiahla, takže rozdelíme si ju na dve časti.


Samotné kaskádové štýly využívajú viacero možností, pomocou ktorých je veľmi jednoduché aplikovať rôzne vlastnosti, týkajúce sa textu, nadpisov, tabuliek, obrázkov a ostatných elementov použitých na stránke. Jedným slovomformátovanie stránky sa stáva jednoduchším a prehľadnejším.

A k tomuto prispievajú aj class, teda triedy. Pridávanímna CSS na www stránku pomocou class sa vám otvárajúnové možnosti práce, ktoré vám ulahčia prácu. Samozrejme sa dá pracovať aj bez nich, ale prečo si nezjednodušiť prácu keď je to možné. Ako to celé funguje? Celkom jednoducho. Zoberme si napríklad možnosť že máme na našej stránke viacero nadpisov toho istého druhu, napríklad ich chceme zadefinovať pomocou tagu H1. Ale problém je v tom, že osadenie každého nadpisu chceme realizovať iným typom písma, alebo farby. Taktiež by sme potrebovali aby zarovnanie jednotlivých nadpisov bolo iné. Mohli by sme na to použiť veľmi kvetnatý, čiže nafúknutý HTML kód, ale taktiež by to šlo prostredníctvom CSS. A najlepšie by bolo keby sme pridali CLASS. V tomto prípade zadefinujeme medzi tagmi HEAD nasledovnú sekvenciu STYLE, kde presne určíme nastavenie fontov, farieb, osadení a ďalších charakteristík jednotlivých textových elementov, ktoré pomenujeme nasledovne:
H1.prvy, H1.cislo_dva, P.body, P.cislo2.
Schválne som zvolil rôzne názvy jednotlivých class, proto aby ste videli že názvy si môžete zvoliť ľubovoľne.

Pozrime sa teraz na náš príklad, ako bude zadefinovaná sekcia STYLE v hlavičke stránky.

<style>
BODY {
background-color : }
H1.prvy {
font-size : 14pt;
font-family : Garamond, Times, Serif;
font-weight : bold;
color : }
H1.cislo_dva {
font-size : 14pt;
font-family : Garamond, Times, Serif;
font-weight : bold;
color : }
P.body {
font-size : 11pt;
font-family : Arial, Helvetica, Sans-Serif;
}
P.cislo2 {
font-size : 9pt;
font-family : Arial, Helvetica, Sans-Serif;
}
</style>

Výsledok si môžete prezrieť tu.

Na prvý pohľad je zrejmé o čo tu ide. Každej párovej značke sme priradili jeden názov, ktorý sme následne volali prostredníctvom class=nejake_meno. Tento class nejake_meno mal priradené určité vlastnosti, tak napríklad tag H1.cislo_dva:

{
font-size : 14pt;
font-family : Garamond, Times, Serif;
font-weight : bold;
color : }

A následne v HTML dokumente sme ho volalinasledovne:

<H1 class="cislo_dva"> Toto je nadpis </H1>

Vyskúšajte si to, zistíte že máte väčší poriadok a prehľad vo vašich HTML dokumentoch a ušetrili ste si aj viacej miesta a času. Nabudúce budeme v classoch pokračovať :-)

Developer,
Stiahnuté z Developer.sk