Představme si, že na stránkách chceme použít nějaké bezpatkové písmo pro text, patkové pro nadpisy a nadpisy musí být navíc modré a vycentrované na řádce. S našimi dosavadními znalostmi samozřejmě není problém takovou stránku vytvořit.
<!DOCTYPE html> <html> <head> <title>Ukázková stránka -- bez použití CSS</title> </head> <body bgcolor="white" link="blue" vlink="navy" alink="red"> <basefont size="3" face="Verdana CE, Verdana, Arial CE, Arial, Helvetica, sans-serif"> <h1 align="center"><font color="blue" face="Times New Roman CE, Times New Roman, Times Roman, serif">Úvod</font></h1> <p>Nějaký v tuto chvíli nepodstatný text</p> <h1 align="center"><font color="blue" face="Times New Roman CE, Times New Roman, Times Roman, serif">Stať</font></h1> <p>Text teď poněkud rozvineme.</p> <p>Alespoň do dvou odstavců.</p> <h1 align="center"><font color="blue" face="Times New Roman CE, Times New Roman, Times Roman, serif">Závěr</font></h1> <p>Závěr může být opět krátký.</p> </body> </html>
Psát takovou stránku není příliš zábavné, protože musí pořád
dokola pomocí elementu font a atributu align nastavovat formátovací vlastnosti.
Navíc je výsledný HTML zbytečně dlouhý. Pokud se později rozhodneme
změnit písmo nebo barvu nadpisu, musíme změnu provést na několika
místech najednou. Může nám v tom sice pomoci textový editor s funkcí
„najdi a nahraď“, ale touto cestou můžeme změnit i věci,
které nechceme.
Kdybychom se vydali cestou CSS, nejprve bychom si definovali
kaskádový styl s popisem vzhledu stránku. Soubor
styl.css by obsahoval definice vzhledu celé
stránky a nadpisů první provně:
body { background-color: white;
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif }
h1 { color: blue;
font-family: 'Times New Roman', 'Times Roman', serif;
text-align: center }
Styl pak stačí připojit ke stránce, kde už nemusíme opakovaně používat prezentační elementy:
<!DOCTYPE html> <html> <head> <title>Ukázková stránka -- bez použití CSS</title> <link href="styl.css" type="text/css" rel="stylesheet"> </head> <body> <h1>Úvod</h1> <p>Nějaký v tuto chvíli nepodstatný text</p> <h1>Stať</h1> <p>Text teď poněkud rozvineme.</p> <p>Alespoň do dvou odstavců.</p> <h1>Závěr</h1> <p>Závěr může být opět krátký.</p> </body> </html>
Prohlédnete-li si stránku v prohlížeči, zjistíte, že vypadá úplně stejně. Je však kratší a její kód je mnohem přehlednější. Navíc lze styl použít s mnoha stránkami najednou v rámci jednoho webového serveru – získáme tak zcela zadarmo jednotný vzhled všech stránek.
Jak vidíte, práce se styly je velmi jednoduchá. Než se pustíme
do dalšího výkladu musíme se seznámit s několika základními pojmy
používanými společně s kaskádovýmu styly. Předpokládejmě jednoduchý
styl, který zajistí, že všechny nadpisy h1 budou
zobrazeny modře:
h1 { color: blue }
Tento jednoduchý styl se skládá z jednoho
pravidla. Každé pravidlo má dvě
části – selektor
(h1) a deklaraci
(color: blue). Deklarace se ještě skládá ze dvou
částí – z vlastnosti (color)
a z její hodnoty (blue).
Selektor nám zajišťuje vazbu na odpovídající HTML element. Jako selektor mohou být samozřejmě použity všechny elementy HTML. Vlastností, které je u každého elementu možno použít, je několik desítek. Společně s hodnotami, které mohou nabývat, jsou shrnuty v příloze na konci knihy (FIXME:odkaz). Na ty důležitější z nich se kromě toho podíváme i samostatně.
