Jak je známo, třídy CSS umožňují definovat společné vlastnosti mnoha objektům na stránce současně. V definici CSS se nadefinují
vlastnosti pro třídu (pomocí selektoru s tečkou):
.modrytext { color:blue }
Objektům v HTML dokumentu se potom může přiřadit příslušná třída pomocí atributu class a pro každý objekt
stejné třídy se pak použijí vlastnosti pro tuto třídu definované:
<DIV class="modrytext">...
<P class="modrytext">...
To je vcelku známé a nejrozšířenější použití tříd v HTML.
Již méně známé (a také zřídka používané) je, že hodnotou atributu class v HTML značce nemusí být pouze jméno
třídy. Specifikace HTML 4 totiž umožňuje, aby hodnotou atributu class byl také seznam tříd. V praxi to znamená,
že každý objekt na stránce může být hned v několika třídách současně. V takovém případě pak přebírá všechny vlastnosti
definované pro všechny třídy, do nichž patří. Pokud dvě třídy definují odlišně stejnou vlastnost, přednost má později
uvedená třída (priorita zleva doprava).
Syntaxe a příklad:
<PRVEK class="trida1 trida2 ... tridaN" ...>
např.:
<DIV class="velky modry vpravo">
K čemu je to dobré?
Výhodné použití je nasnadě. Často se odlišují některé prvky stránek pouze detaily (jiná barva písma, jiné pozadí). Na menších
webech je obyvklé definovat pro podobné prvky jednu třídu, v níž se definují společné vlastnosti, a odlišnosti se pak
"doladí" pomocí konkrétních definic pomocí ID. Např.:
.nadpis { margin: 0 1ex; font-family: sans-serif; }
#nadpis1 { color:red }
#nadpis2 { color:blue }
...
<H1 id="nadpis1" class="nadpis">...
Na větších webech je však již množství různých skupin podobných prvků velké a proto zde pak stoupá množství potřebných
tříd. Jakékoli změny vzhledu webu jsou pak velmi složité.
S použitím násobných tříd si ale můžeme z celého webu udělat jednu velkou skládačku. Můžeme si například definovat sady
jednoduchých tříd definujících barvu textu, další pro barvy pozadí, pro rámečky atd. Jednotlivým prvkům pak přiřadíme
potřebné třídy:
.zakladnitext { color:#0069CC }
.vedlejsitext { color:#DD3612 }
.textodkazu { color:#DDC800 }
.negativnitext { color:white }
.pozadiclanku { background:#0069FF }
.pozadimenu { background:#DD3612 }
.zakladnipozadi { background:#FFFF00 }
.negativnipozadi { background:#333300 }
...
<P class="zakladnitext zakladnipozadi">...
<P class="negativnitext negativnipozadi">...
...
S takto definovanými třídami je hračkou například upravit barvy na celém webu najednou - změníme pouze hodnotu barvy v
příslušné třídě a změna jediné barvy se projeví všude na webu, kde je tato třída použita.
Ještě výhodnější je pak používat tyto jednoduché třídy v kombinaci s podrobněji definovanými vlastnostmi tříd a objektů.
Chceme mít například určitou sadu stránek v zeleném odstínu, jinou v modrém. Základní barva se použije pro pozadí záhlaví,
barvu nadpisů, barvu odkazů a pro použité rámečky. Vzhled těchto stránek bude v zásadě stejný, budou se lišit pouze barevností
- budeme proto definovat všechny základní vlastnosti pro jednotlivé prvky stránek tak, jak jsme zvyklí, ale pouze jednou,
společně pro všechny stránky; vlastnosti týkající se barev však vynecháme a definujeme je samostatně. V atributu class
je potom sloučíme:
// spolecny soubor CSS:
.zahlavi { margin:...; padding:....; font:...; }
H1.hlavni { margin:...; font:...; }
.green { color:green }
.blue { color:blue }
.bggreen { background:green }
.bgblue { background:blue }
//... na jedne strance pak pouzijeme:
<DIV class="zahlavi bggreen">...
<H1 class="hlavni green">....
//... a na jine strance:
<DIV class="zahlavi bgblue">...
<H1 class="hlavni blue">...
Výhodou tohoto řešení je především snadné "přebarvení" celého webu jediným zásahem do CSS: pokud budeme chtít
např. změnit odstín použité zelené barvy, pouze předefinujeme hodnoty v třídách "green" a "bggreen"
a nemusíme již procházet všechny definice CSS a hledat, kde všude se tato barva používá. Do HTML souborů pak nemusíme
zasahovat vůbec.
A naopak, stejně tak snadno změníme vzhled celé stránky na jinou barvu, pokud v HTML zaměníme všechny třídy "green"
za např. "orange" a "bggreen" za "bgorange". Zde pro změnu vůbec nemusíme zasahovat do CSS
(pokud zde máme "orange" a "bgorange" již definováno).
Dalším celkem příjemným použitím je také náhrada oblíbených, ale v HTML 4 již zakázaných či nedoporučovaných atributů.
Snadno tak vhodně nadefinovaným globálním CSS souborem dosáhneme takřka shodného zápisu jako ve starých verzích HTML:
// Příklad zakázaných/nedoporučených atributů:
<P align="justify">
<TD valign="middle">
<IMG border="1" ...>
<P clear="all">
// Náhrada pomocí tříd CSS:
.left { text-align:left }
.right { text-align:right }
.justify { text-align:justify }
.center { text-align:center }
.middle { vertical-align:middle }
.rfloat { float:right }
.clear { clear:both }
.border1black { border: 1px solid black }
...
<P class="clear justify">
<TD class="center middle">
<IMG class="rfloat border1black" ...>
atd...
Možností použití je nepřeberně, možná nemálo z nás hned napadne, jak tento způsob práce s třídami použít třeba právě na
svém webu. Je pochopitelně jen otázkou vkusu a konkrétního řešení, jaká strategie definování CSS bude zrovna vhodnější.
Je však dobré znát i tuto možnost a vědět, že ji máme kdykoli k dispozici. S širším výběrem možných řešení je pak každý
návrh nového webu snazší.
Staníček Petr
|
