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∙
| Selektor | Popis |
|---|---|
| * | Vybere vÜechny elementy. Hodφ se v p°φpadech, kdy pot°ebujeme n∞jakou vlastnost nastavit u vÜech element∙ v dokumentu. |
| para | Vybere vÜechny elementy para. |
| list item | Vybere vÜechny elementy item, kterΘ jsou potomkem elementu list. V praxi se Φasto pou₧φvß nap°φklad pro vφce·rov≥ovΘ seznamy. |
| kapitola > nadpis | Vybere 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-child | Vybere 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 + tabulka | Vybere 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#kap1 | Vybere 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.