Úvod

Kaskádové styly

Základní rozpor dnešního HTML

Původní idea HTML - kontextové (logické) značkování
HTML dnes - jak graficky stvárnit dokument

Jak z toho ven

Částečné řešení - nastavovat atributy u jednotlivých HTML elementů (barva, font, šířka, ...). Pracné, nepohodlné, možnost chyb, pracný případný update.
(Téměř dokonalé) řešení - kaskádové styly (Cascading StyleSheets - CSS). Styly umožňují definovat způsob zobrazení (druh a velikost písma, barvu, zarovnání apod.) každého elementu na stránce. Styl přitom není přímo součástí textu stránky a tak může být zápis stránky přehlednější a dobře strukturovaný. Navíc styly umožňují definovat jednotný vzhled určitého elementu v celém dokumentu jedním zápisem - nemusíme jej opakovat u každého elementu.

Styly zde byly i před dynamickým HTML, nyní přibývá možnost určení pozice na stránce a filtry (MSIE 4.0).

Základy práce se styly

Styly - definice & použití Kam napsat definici - do HTML textu, inline (do tagu) nebo do samostatného souboru; příklady:

<HTML>
<HEAD>
<TITLE>Titulek stránky</TITLE>
<LINK REL=StyleSheet TYPE="text/css"
HREF="http://style.com/super" TITLE="Super styl">
<STYLE TYPE="text/css">
</STYLE>
</HEAD>
<BODY>
<H1>Nadpis je krásně modrý a vycentrovaný</H1>
<P STYLE="color: green">Ekologický paragraf je zelený.
</BODY>
</HTML>

Tedy:

První způsob využívající element LINK připojí k dokumentu styl uložený v separátním souboru.
Styl může být definován i přímo v dokumentu mezi tagy <STYLE> a </STYLE>. Pomocí komentáře jsme definici stylu skryli před staršími prohlížeči, které CSS nepodporují. Soubor má zpravidla extenzi .css, nesmí být interpretován WWW- serverem.
Poslední možností je definice stylu pouze pro jeden konkrétní element. Toho lze dosáhnout použitím atributu STYLE, který můžeme použít u všech elementů.

Příklad stylu:

H1, H2, H3 { font-family: Arial, sans-serif; color: blue }
H1 { text-align: center }
Každé pravidlo má dvě části -- selektor (např. H1) a deklaraci (text-align: center).

Všechny deklarace se skládají ze dvou částí -- z vlastnosti (např. text-align) a z její hodnoty (např. center). Selektory i deklarace lze navzájem různě sdružovat.

Selektor nám zajišťuje vazbu na odpovídající HTML element (např. P, TD, HR, A). Jako selektor mohou být použity všechny elementy HTML. Selektory lze vytvářet i kontextové. Např. pravidlo se selektorem H1 EM se použije pouze na text elementu EM, který je uvnitř nadpisu první úrovně.

Výborný tutoriál k CSS i CSS2 lze nalézt na http://richinstyle.com/guides/css2.html.
Taktéž dobrým zdrojem je http://www.westciv.com/style_master/academy/css_tutorial.
Materiály Microsoftu k dynamickému HTML naleznete na http://msdn.microsoft.com/workshop/author/dhtml/dhtmlovw.asp. Zcela unikátní kolekcí informací o stylech (CSS, CSS2, XSL...) je projekt ZVON.