Kaskádové styly

Kaskádové styly (CSS – Cascading Style Sheets) pravděpodobně mnoho z vás již zná, protože je lze používat i společně s jazykem HTML. Díky tomu je dnes k dispozici celá řada prohlížečů, které CSS společně s XML podporují. Mezi nejznámější patří nepochybně Internet Explorer 5.0, v mnoha ohledech lepší podporu však nabízí Mozilla a od ní odvozený Netscape Navigator 6.0, na své si přijdou i příznivci prohlížeče Opera v jeho poslední verzi 4.0. Pravdou ovšem je, že úroveň podpory se v jednotlivých prohlížečích liší.

Princip CSS je velice jednoduchý. Do souboru se stylem se zapíše několik pravidel, které definují vzhled jednotlivých částí dokumentu. Zápis pravidla je velice jednoduchý:

nadpis { font-size: 20pt;
         text-align: center;
         color: blue }

První části se říká selektor a slouží k výběru částí dokumentu, na které se má pravidlo použít. V našem případě se pravidlo použije na všechny elementy, které se jmenují nadpis. Za selektorem následuje ve složených závorkách deklarace, která upravuje jednotlivé parametry zobrazení. V našem případě jsme nastavili velikost písma pro nadpis na 20 bodů, zarovnávat se bude na střed a použije se modrá barva písma.

Pro úspěšné použití kaskádových stylů musíme znát vlastnosti, které můžeme nastavovat, a musíme umět vytvářet selektory, které vybírají jednotlivé části dokumentu. Podrobný popis je samozřejmě součástí specifikace kaskádových stylů a naleznete jej i v mnoha knihách zaměřených na tvorbu webových stránek. Skalní příznivci Softwarových novin se mohou podívat do čísel 6, 7 a 8 z roku 1997, kde je o kaskádových stylech článek od Pavla Satrapy.

Omezený prostor časopisu nám neumožňuje podrobně se podívat na jednotlivé vlastnosti a jejich použití, ale v tabulce 1 se alespoň stručně podíváme na nejpoužívanější tvary selektorů. Při použití společně s XML nabízejí totiž selektory větší možnosti než ve spojení s jazykem HTML.

Tabulka 1. Příklady nejpoužívanějších selektorů

SelektorPopis
*Vybere všechny elementy. Hodí se v případech, kdy potřebujeme nějakou vlastnost nastavit u všech elementů v dokumentu.
paraVybere všechny elementy para.
list itemVybere všechny elementy item, které jsou potomkem elementu list. V praxi se často používá například pro víceúrovňové seznamy.
kapitola > nadpisVybere všechny elementy nadpis, které jsou dětmi elementu kapitola, tj. nadpis je přímo vnořen v elementu kapitola. Použití je podobné jako v předchozím příkladě.
para:first-childVybere element para, pokud je to první dítě svého rodiče. Podle některých typografických škol by mělo být například odsazení prvního odstavce v kapitole jiné než u všech ostatních odstavců. K tomu se dá s výhodou využít právě tento selektor.
seznam + tabulkaVybere všechny elementy tabulka, které bezprostředně následují za elementem seznam.
para[zarovnání]Vybere všechny elementy para, které mají nastaven atribut zarovnání na libovolnou hodnotu. Kaskádové styly díky této vlastnosti mohou reagovat i na hodnoty atributů.
para[zarovnání="vlevo"]Vybere všechny elementy para, které mají atribut zarovnání nastaven na hodnotu vlevo.
para[platforma~="Linux"]Vybere všechny elementy para, které mají v atributu platforma seznam hodnot oddělených mezerami a jednou z těchto hodnot je Linux.
kapitola#kap1Vybere element kapitola, který má ID nastaveno na kap1. Tento selektor se používá v případech, kdy potřebujeme u několika málo elementů nastavit odlišný vzhled.

Pro každý element v dokumentu se pak navzájem zkombinují všechna pravidla, která mu podle selektorů vyhovují. Díky této vlastnosti lze styly psát velice rychle.

© Jiří Kosek 2000-2001