HTML je věc sice náramná, leč nároky kladené dnešním web-designem už leckdy
neuspokojuje (pravda, v HTML v4.0 se objevily pěkné "vychytávky", avšak je
jasné, že čistý HTML kód dnes už není příliš aktuální téma ale je to samozřejmě
základ). Uvědomují si to i přední tvůrci web-browserů a tak se horlivě snaží
přicházet s dalšími novými vylepšeními, které možnosti HTML stránek postrčí
zase o kousek dále. Čin je to sice záslužný, avšak kamenem úrazu je skutečnost,
že avizovaná technologie je obvykle 100% funkční pouze s použitím právě jejich
browseru konkurenční firmy se mají pak co ohánět, aby co nejrychleji přidaly
tuto podporu i do svých browserů a zabránily tak masovému odlivu uživatelů ke
konkurenci. Na celé to soutěžení pak doplácí samotní autoři HTML stránek. Ti se
potom snaží seč mohou zachovat pokud možno kompatibilitu pro většinu nejčastěji
používaných browserů, je to však samozřejmě na úkor kvality, neboť tím obvykle
nemohou z výše uvedených důvodů plně využít možností nabízených technologií.

CSS neboli Kaskádové styly v podstatě jde o jednoduchý jazyk pro nastavování
vlastností (stylů) elementů HTML (za element je považován prvek HTML, např.
tabulka, formulář...). Můžeme pohodlně nastavovat např. jejich barvy, typy
písma apod., a upravovat tak vzhled celé stránky. Kaskádové styly byly vyvinuty
a poté vydány konsorciem W3C pro standardizaci Internetu na konci roku 1996.
Jednalo se o první návrh Kaskádových stylů, pojmenovaný prostě a jednoduše CSS1
(nebo také CSS level 1) ty také popisuje celý tento článek. Ukažme si nyní, jak
může průměrný pozemšťan neprogramátor své HTML stránky různými "udělátky" za
použití CSS (Cascade Style Sheet Kaskádové styly) drobet přikrášlit (CSS jsou
podporovány v HTML prohlížeči IE v4.0 a vyšší, u NN od v4.0 jsou stejně jako u
Opery v3.5 a vyšší podporovány jen částečně všechny styly jsem tedy odzkoušel v
IE v4.0/5.0, NN v4.0/6.0 preview release 2, Opera v3.50/4.0 beta 5 získané
výsledky o úspěšnosti provedení stylů jsem zapsal do tabulek). Začneme tedy jak
jinak než od začátku:


Kam to psát?

Existují dva základní způsoby, kterak v HTML použít Kaskádových stylů. Jednak
můžeme své styly psát přímo do HTML, jiná možnost je, že v našem HTML pouze
uvedeme, aby se pro stránku použily již existující styly, které jsou napsány
kdesi v nějakém externím (vedlejším) souboru například pokud jsme si sehnali
nějaké zajímavě napsané, již někým vytvořené (velkou nevýhodou pak ale je, že
pokud si chce někdo z Internetu stáhnout vaši stránku, musí si samozřejmě
společně s ní stáhnout i další soubor se styly, jinak by se mu při pozdějším
vyvolání nezobrazovala stránka tak, jak má).

- První varianta pro psaní stylů přímo do našeho HTML je vpisování mezi tagy
(značky) \\, které browseru říkají, od-do jakého místa jde
o blok se styly. Toto je také nejčastěji používaná metoda, jíž budeme výhradně
uplatňovat i v nadcházejících příkladech tohoto článku. U počátečního tagu
uvedeme parametr \type\ a jako jeho argument (hodnotu parametru \type\)
napíšeme \"text/css"\ (argument se obvykle uvádí do uvozovek), čímž označíme,
že jde o CSS, tedy Kaskádové styly. Dobrým zvykem je psát CSS do hlavičky HTML,
tedy bloku mezi tagy \

\ a \\. Vypadat to tudíž bude následovně:

...



- Další varianta je v podstatě založena na té předchozí využívá se rovněž
zápisu mezi tagy \\, je tak ale možné využít i styly již
napsané v nějakém externím souboru, a to za pomoci speciálního příkazu k tomu
určenému, kterým browseru řekneme, aby styly načetl z externího souboru.
Syntaxe (popis) příkazu pro import stylů z externího souboru je tedy \@import
url();\, kde uvádíme jako parametr funkce \url\ (společně s cestou k
němu) zmiňovaný soubor se styly. Vložený soubor pak obsahuje pouze samotné
definice stylů (nemusí být uváděny v bloku STYLE). Za zmínku stojí, že v bloku
pak můžeme definovat i styly vlastní tak jako u předchozího způsobu psaní stylů
ovšem ty musí následovat vždy až za příkazem import.

Pozor!!! Příkaz import nefunguje v prohlížeči Netscape Navigator v4.x (tato
chyba je odstraněna až u verze 6). Příklad:






...



- Další způsob využívá opět připojení stylu v externím souboru k našemu HTML
souboru. Tentokráte to ale browseru říkáme pomocí HTML tagu \\, kde v
jeho parametru \REL\ uvádíme, že jde o CSS, a v parametru \HREF\ konečně název
souboru se styly (s cestou k němu). Vložený soubor pak obsahuje pouze samotné
definice stylů (nemusí být uváděny v bloku STYLE). Příklad:






...
/BODY>


- Posledním způsobem je použití atributu STYLE u konkrétních HTML elementů,
tzn. jakési jedinečné definování stylu. Každý HTML element totiž může mít
parametr STYLE, kde jako jeho argument uvedeme náš styl. Příklad:

Nadpis s použitím CSS

Styly budeme dále tedy zapisovat mezi tagy \\ aby si ale se
styly nedělaly těžkou hlavu browsery, které je nepodporují, je dobré je uvést
jako komentář (pak budou pouze oním browserem ingorovány). Pozor! Jako komentář
uvedeme pouze blok se samotným stylem, nikoliv už tagy označující blok se styly.





Co tam psát?

Jak bylo řečeno, CSS slouží k nastavování stylů různých elementů HTML. Jaké
HTML elementy ale vlastně známe? Je dobré si říci, že se dělí na tzv. blokové a
řádkové. Blokové jsou zjednodušeně řečeno ty, které mohou ještě obsahovat
řádkové. Mezi blokové, u nichž jde použít CSS, patří např.: DIV, FORM, H1..H6,
P, TABLE

Z řádkových jsou to pak např.: A, FONT, IMG, INPUT, SELECT, TEXTAREA

CSS lze ale samozřejmě použít i na prvek BODY.

Přistupme tedy k meritu věci. Zápis stylu je pro všechny podporované HTML
elementy stejný skládá se vždy ze dvou základních bloků, a sice selektoru a
deklarace.

Selektor nám říká, u jakého elementu HTML chceme zvolit ("selektovat") styl, a
v deklaraci jej již určíme ("deklarujeme"). Deklarace pak tedy obsahuje samotný
název stylu, který chceme upravovat, a argument ten udává hodnotu, pomocí níž
určujeme chování stylu (např. argumentem pro styl měnící barvu je barva
samotná).

Syntaxe tedy vypadá následovně:





PODROBNĚ O DEKLARACI STYLŮ

Deklarace stylu obsahuje jeho název a argument (argumentem je míněna samotná
hodnota stylu, kterou již určujeme jeho chování) název stylu se od argumentu
odděluje dvojtečkou, deklarace každého jednoho stylu se pak zakončuje
středníkem poslední deklarovaný styl se středníkem zakončovat nemusí (tzn. i
pokud je deklarovaný pouze jeden jediný styl). Pokud má styl více argumentů
(např. dva argumenty z nichž jeden slouží pro horizontální, druhý pro
vertikální umístění čehosi), oddělují se tyto od sebe mezerou!



V deklaraci pak tedy již uvádíme samotné styly, které si zanedlouho podle
funkčního zařazení přehledně rozdělené na kapitoly představíme. Budu tím sice
předbíhat, ale abyste si mohli styly alespoň trochu odzkoušet, prozradím název
jednoho stylu, určujícího barvu popředí elementu: jeho název je \color\ (jen
pro úplnost: název stylu určujícího barvu pozadí je pak ,background-color\) a
argumentem potom klíčové slovo barvy či RGB hodnota v hexadecimálním tvaru tak
jak je známe z HTML (např. "red", "green", "blue" či #FFFFFF atd.). Ten budeme
také v následujících příkladech pro větší názornost používat.



PODROBNĚ O SELEKTORECH

Co je selektor už dobře víme, jak ale pomocí něj vyjádřit, u jakého elementu
HTML chceme měnit styl? Způsoby existují hnedle čtyři:

- První je, že jako selektor jednoduše použijeme právě název HTML elementu
(FORM, TABLE atd.). Uveďme si tedy jednoduchý příklad (dále budou v příkladech
uváděny jen podstatné bloky textu nechť tedy laskavý čtenář sám doplní na
správná místa tagy jako \\, \HEAD\,\/HEAD\ a \/HTML\):

...

...



...

- Při definici stylů ale může leckdy nastat případ, kdy požadujeme, aby ne pro
všechny HTML elementy stejného druhu v dokumentu bylo použito stejného stylu
(například u různorodého elementu INPUT, pod nějž spadají tlačítka, vstupní
textová řádka a textová pole). V takovém případě nemůžeme použít výše uvedeného
selektoru (což, jak už bylo řečeno, způsobí nastavení daného stylu pro všechny
výskyty daného elementu v dokumentu), ale použijeme jako selektor tzv. třídu,
což je druhý způsob vyjádření selektoru. Atributem třída je pak možné odkazovat
se pouze na vybrané HTML elementy dokumentu při samotné definici stylu. Třídu
definujeme v těle dokumentu v jednotlivých HTML elementech, a to přidáním
parametru "class" a v argumentu uvedením názvu třídy. Název třídy pak uvádíme v
definici stylů jako selektor způsobem .. Tímto tedy
definujeme, že uvedený styl bude platit pouze pro HTML element s touto třídou.
Stejný název třídy ale můžeme uvést i u více HTML elementů dokumentu, potom
bude tedy platit styl pro všechny uvedené HTML elementy. Příklad:
...

...



...

- Další, individuálně identifikovaný selektor, může stejně tak jako předchozí
způsob zvolit styl pro každý HTML element zvlášť (popravdě řečeno se v praxi
však pro tento účel používá spíše předchozího způsobu). Klíčovým je při
určování stylu v tomto případě tzv. identifikátor řetězec, pomocí nějž se lze
odkazovat na požadovaný HTML element. Identifikátor definujeme v těle dokumentu
v jednotlivých HTML elementech, a to přidáním parametru "id" a v argumentu
uvedením názvu identifikátoru. Ten pak uvádíme v definici stylů jako selektor
způsobem #. Příklad:

...

...



...

- Posledním je pak tzv. kontextový selektor.

Nám poslouží ve speciálním případě a totiž tehdy, chceme-li aby některý HTML
element, jenž je vnořen (vložen) v jiném, měl určitý styl ale pouze v tomto
případě. Kontextový selektor pak obsahuje název HTML elementu, ve kterém má být
vnořen HTML element, jehož styl chceme nastavovat, bezprostředně za ním
následuje mezera a poté již zmiňovaný samotný HTML element, kterému udáme styl.
Kromě názvů HTML elementu lze v kontextovém selektoru použít i třídu či
identifikátor viz předchozí typy selektorů. Příklad:

...

...

...



PSEUDOTŘÍDY

Jak z názvu vyplývá, jde jakoby o ,selektor jako třída\, ne však zcela jsou to
tedy speciální případy selektorů. Pseudotřídy existují pouze tři a všechny se
vztahují k jednomu jedinému HTML elementu. Totiž k elementu \\, tj.
odkazovému. Víme, že tento element má tři stavy, v jakých se může objevit, a to
\link\ (výchozí), \visited\ (stav elementu po navštívení odkazu, na který
ukazuje) a \active\ (stav elementu při momentálním odkazování se na dokument).
Pro každý z těchto stavů elementu je zavedena zvláštní pseudotřída, umožňující
nám nastavit chování elementu pro každý ze zmíněných stavů. Navíc je zavedena i
jedna jeho pseudotřída s názvem \hover\, která určuje jeho chování při najetí
ukazatele (kurzoru myši) na něj resp. na text, jenž je odkazem na dokument.
Pseudotřídy se zapisují jako \A\, následuje dvojtečka a poté název pseudotřídy.
Uveďme si příklad, pro efektivní přikrášlení naší stránky s odkazy:





SLUČOVÁNÍ DEFINIC

Mnoho práce si lze usnadnit i tzv. slučováním selektorů, tzn. že můžeme pro
více selektorů použít stejné deklarace (definice stylu). Jednoduše tedy namísto
jednoho selektoru uvedeme jejich libovolné množství, přičemž se jednotlivé
selektory poté oddělují čárkou. Uvedený způsob funguje na všechny výše uvedené
typy selektorů. Příklad:





KOMENTÁŘE

Užitečné je i vpisování komentářů, tedy poznámek například pro pozdější
rychlejší pochopení určitých částí. Komentář lze uvést kdekoliv a zapisuje se
mezi počáteční značku \/*\ a konečnou \*/\, jež browseru říkají, že jde o vaši
poznámku, kterou má ignorovat. Příklad:





Jednotky používané při vyjádření argumentu

JEDNOTKY BAREV

Barva se, jak známo, na počítači vyjadřuje tzv. aditivním způsobem, tedy
mícháním tří základních barev červené (Red), zelené (Green) a modré (Blue) tzv.
systém RGB. Jsme takto schopni vyjádřit jakoukoli barvu spektra. V klasickém
HTML se barva zapisuje uvedením těchto tří složek v hexadecimálním tvaru za
sebou (např. #FFFFFF), nebo přímo klíčovým slovem definujícím určité odstíny
barev (např. "white"). V Kaskádových stylech jsou podporovanými jednotkami
barev oba uvedené způsoby, zadávání RGB složek je navíc poněkud rozšířeno.
Uveďme si tedy jmenovitý přehled způsobů vyjádření jednotek barev:

- Zadáním klíčových slov (aqua jasně modrozelená, black černá, blue modrá,
fuchsia fialová, gray šedá, green zelená, lime citronově zelená, maroon
kaštanově hnědá, navy tmavě modrá, olive olivová, purple purpurová, red
červená, silver stříbrná, teal tmavě modrozelená, white bílá, yellow žlutá),
určujících odstín barvy

- Vyjádřením složky RGB formou:

1. #RRGGBB kde RR/GG/BB je 0-FF (hodnota v hexadecimálním/šest-náctkovém tvaru)
tedy 256 stupňů (FF hexadecimálně = 255 decimálně/desítkově, nesmíme zapomínat
ani na 0, což je také jeden stupeň)

2. #RGB kde R/G/B je 0-F (opět hodnota v hexadecimálním tvaru) tedy 16 stupňů

3. rgb(x,y,z) kde x/y/z je v rozsahu 0-255

4. rgb(x%,y%,z%) kde x/y/z jsou procentuální hodnoty v rozsahu
0-100, udávající intenzitu dané složky ve výsledné barvě. Znamená to tedy, že
výsledná barva může být složena z 0-100 % červené barvy, 0-100 % zelené a 0-100
% modré barvy. Dílčí procenta se pak přepočítávají na poměrnou část ze 100 %
výsledné barvy (např.: chceme bílou barvu. Musíme tedy nastavit R=100 %, G=100
%, B=100 %. Intenzita všech je 100 %. Výsledkem je bílá barva, jejíž
procentuální složení je R=33,3 %, G=33,3 %, B=33,3 %. Procentuální zastoupení
ve výsledné barvě je tedy u všech složek (RGB) 33,3 %).



JEDNOTKY DÉLKY

Vyjádření určité délky musí spolu nést i způsob, jakým byla nebo bude ona délka
měřena (např. jdeme-li si koupit látku, poručíme si 2 m látky pokud řekneme jen
2 látky, prodejce nám asi nebude rozumět). Jednotky délky tedy určují způsob
odměření určité dané vzdálenosti. Lze je rozdělit do dvou skupin, a sice na
relativní a absolutní. Relativní délka se vztahuje k délce celkové, absolutní
je sama o sobě celkem. Absolutní jednotkou délky tedy vyjádříme reálnou
vzdálenost, která bude vždy stejná, relativní naopak změníme délku v závislosti
na současné délce.

Syntaxe zápisu argumentu s použitím jednotky délky je: délky> (v případě kladné hodnoty samozřejmě zápis znaménka + není nutný).
Například: 20cm (pozor! Jednotka délky je uvedena bezprostředně za hodnotou,
není mezi nimi tedy povolena ani mezera).

Relativní:

em (ems, výška vzhledem k aktuálně použitému písmu)
ex (výška písmene \x\)
px (pixely-obrazové body)

Absolutní:

in (inch=palec; 1 palec=2,54cm)
cm (centimetr; 1cm=10mm)
mm (milimetr)
pt (point=bod; 1bod=1/72palce)
pc (pica=tiskařská jednotka; 1pc=12bodů)



PROCENTUÁLNÍ JEDNOTKY

Procentuální jednotky jsou typickým zástupcem jednotek relativních k okolním
hodnotám. Je výhodné použít je kupříkladu při navrhování stránky, kdy nevíme, v
jakém rozlišení bude zobrazena, a nemůžeme tedy ani počítat s přesným
rozmístěním; namísto přesného umístění si tedy zjistíme, jaké části to odpovídá
a zapíšeme procenty.

Syntaxe zápisu argumentu s použitím jednotky délky je: % (v
případě kladné hodnoty samozřejmě zápis znaménka + není nutný). Například: 20%
(pozor! Jednotka délky je uvedena bezprostředně za hodnotou, není mezi nimi
tedy povolena ani mezera).



URL

URL (Uniform Resource Locator) adresy se používá jako argument u stylů, kde je
třeba zadat též cestu (adresu) ukazující na určitý objekt (např. soubor s
obrázkem u stylu "background-image").

Syntaxe zápisu URL může mít tři způsoby: url(""); či url(\\); či
jenom url();

Například:

url("http://www.mujsite.cz/zviratko.gif") či třeba url("zviratko.gif");

Textový řetězec vyjadřující cestu k souboru může obsahovat i escape--sekvence,
což jsou krátké řetězce znaků (obvykle 2znakové) umožňující vypsat některé
běžně nepoužitelné, rezervované znaky (z logických důvodů např. nelze obvyklým
způsobem vypsat znak uvozovek ty totiž slouží k označení začátku a konce
řetězce, který se má vypsat; stejně tak se musí použít escape-sekvence při
výpisu znaku apostrof a mezery přesto v praxi ale mnohé browsery tolerují i
uvedení těchto rezervovaných znaků samostatně, a to ne formou escape-sekvence).
Escape-sekvence se zapisují tak, že se napíše znak zpětného lomítka (backslash)
a za ním následuje bezprostředně požadovaný znak (např. \" či \\). Znak zpětné
lomítko je tedy z pochopitelných důvodů rovněž nutné zapsat pomocí
escape-sekvence, a to jeho zdvojením, tedy jako \\.