Motivační ukázka

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).

Obrázek 29. Části kaskádového stylu

Části kaskádového stylu

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ě.

Tento dokument je určen výhradně pro osobní potřebu seznámení se s jazykem HTML a tvorbou webových stránek. Jakékoliv jiné použití, včetně dalšího šíření, pořizování kopií, použití při školeních a výuce apod. je výslovně zakázáno a bude považováno za porušení autorských práv.


Copyright © 1997–2014 Jiří Kosek
blog comments powered by Disqus