Kaskádové styly poprvé

24. ledna 2000

•

V době, kdy se začal rozvíjet web a vznikaly první verze jazyka HTML určeného pro psaní webových stránek se příliš nepočítalo s tím, že by někdy mohly webové stránky vypadat pěkně. V představách původních tvůrců HTML se totiž budoucí web nejspíše jevil jako množství strohých webových stránek, kde je vzhled nepodstatným atributem.

Záhy se ovšem ukázalo, že možnosti webových stránek bude nutno rozšířit, a přidat do něj prostředky, které by umožňovaly o něco více než zobrazení strohého strukturovaného textu. Nastal tak živelný vývoj, kdy byly do jazyka HTML mimo jiné přidávány možnosti ovlivňovat grafický vzhled dokumentu. Dnes již tak můžeme v HTML získat poměrně pěknou a atraktivní stránku, nevyhneme se však řadě nevýhod. Asi největší nevýhodu je pracnost, mnoho věcí musí být nastavováno stále dokola. Z toho vyplývá i nepřehlednost. Někdy může být velkým problémem, když se rozhodnete změnit třeba velikost písma v celém textu.

Většinu problémů řeší právě kaskádové styly. Kaskádové styly se nejčastěji označují anglickou zkratkou CSS, což v originále znamená Cascading Style Sheets. Možnosti kaskádových stylů jsou poměrně široké. Umožňují například určit vzhled každého prvku na webové stránce – tedy barvu, velikost, druh fontu atd.

Samotné tvorba stylů je velmi jednoduchá. Mám vyzkoušeno u svého okolí, že se dají velice rychle naučit. A po naučení základů kaskádových stylů se navíc staly velmi oblíbenými. Doufám, že i pro vás se stanou oblíbeným pomocníkem na cestě při vytváření přitažlivějších webových stránek.

Začneme tedy praktickým příkladem kaskádovacího stylu. Řekněme, že chcete, aby všechny hlavní nadpisy uzavřené mezi značkami H1 byly psány modře. To zajistíte snadno pomocí jednoduchého stylu zapsaného takto:

H1 { color: blue }

Uvedený styl nám říká, že pro všechny texty, které jsou uvnitř značky H1, bude nastavena barva (color) na modrou (blue). Není to nic težkého.

Abychom si styl mohli vyzkoušet, je potřeba vědět, kam ho do HTML stránky zapsat. Styl lze vložit do HTML stránky celkem čtyřmi různými způsoby, nám bude pro začátek stačit způsob jediný, který si zde ukážeme.

Pro potřeby kaskádových stylů je určena značka <style>, která slouží pro zápis stylů do HTML stránky. Tato značka by měla být zapsána v hlavičce HTML stránky, tedy mezi <head> a </head>. Vlastní webová stránka zapsaná v jazyce HTML i s naším stylem by mohla vypadat takto:

<HTML>
<HEAD>
<STYLE TYPE=“TEXT/CSS“><!–
H1 { COLOR: BLUE }
–></STYLE>
</HEAD>
<BODY>
<H1>Toto je nadpis</H1>
</BODY>
</HTML>

A takto se náš příklad zobrazí:

Toto je nadpis

Jak je vidět výše, uvnitř značky <style> jsme dali najevo, že se jedná o kaskádový styl CSS. Provedli jsme to pomocí zápisu type=“text/css“. Stylů může být totiž více druhů, a tak je vhodné, abychom řekli, že chceme právě kaskádový styl CSS. Vzhledem k tomu, že tento seriál pojednává pouze o kaskádových stylech CSS, bude to tam psáno vždy.

Některé starší prohlížeče kaskádové styly nepodporují. V současné době je zobrazí prohlížeče Microsoft Internet Explorer od verze 3 a Netscape Navigator od verze 4. Dá se ale říci, že počet prohlížečů, které podporují kaskádové styly neustále roste. Pro podporu starších prohlížečů se uzavírají styly uvnitř značky style do komentářů, jak to máme i v našem příkladě. Komentáře v HTML začínají <!– a v našem případě končí –>. Je potřeba počítat s tím, že u starších prohlížečů nevyloudíte z kaskádových stylů žádný efekt, budou pouze ignorovány.

Kaskádové styly – jak je i vidět z našeho příkladu vlastně představují nějaká pravidla, kterými říkáme v zásadě dvě věci. Za prvé, kde se mají použít, a za druhé, co mají ve výsledné stránce ovlivnit. Například u stylu v našem příkladu jsme stanovili toto: Za prvé, že se použije na text, který bude uvnitř značek H1, a za druhé jsme určili, že takový text má být modrý, což je je v podstatě princip všech kaskádových stylů. Zapisují se jako soubor pravidel, složených ze dvou částí. Pokud bychom chtěli být trochu složitější, tak samotná norma CSS nazývá první část selektorem a druhou část deklarací. Pro názornost: