Eric Meyer o CSS - kompletní průvodce

CSSC

SS

Eric A. Meyer

Eric Meyer je českým čtenářům znám nejenom jako neúnavný zastánce webových stan-dardů, ale také jako autor – v e vydavatelství Zoner Press vyšly již jeho dv ě publikace, které se stejně jako jinde ve světě staly velmi rychle bestsellery i na českém trhu. Kniha Eric Meyer o CSS – K ompletní průvodce se od obou př edchozích knih odlišuje. Ob-

sahuje totiž kompletní popis specifikace CSS 2 a CSS 2.1, takž e je ideálním zdrojem pro všechny tvůrce webových stránek, kteří vytvářejí (nebo chtějí vytvářet) přístupné a použitelné webové stránky v souladu s nejnovějšími webovými standardy.V knize se například dozvíte, co jsou selektor y a k čemu slouží, naučíte se praco vat se strukturou dokumentu, děděním, kaskádou, s hodnotami a jednotkami, bar vami, písmem, vlastnostmi textu, výplněmi, orámováním, okraji atd. Kniha se samozř ejmě věnuje i pokročilým tématům, jako jsou základy vizuálního formátování, plovoucí prvky, pozicování, rozvržení tabulek, seznamy, generovaný obsah, styly uživatelského rozhraní nebo nevizuální média. S oučástí knihy je i r eferenční příručka vlastností a referenční seznam selektorů, pseudotříd a pseudoprvků.

– ko

mpl

etní

prů

vodc

e

kompletní průvodce

Eric

Mey

er o

Eric Meyer o CSS – kompletní průvodce Eric Meyer o

9 7 8 8 0 8 6 8 1 5 6 4 0

ISBN 978-80-86815-64-0KATALOGOVÉ ČÍSLO: ZR628DOPORUČENÁ CENA: 490 KČ

Zoner Press tel.: 532 190 883 fax: 543 257 245e-mail: [email protected]://www.zonerpress.cz

ZONER software, s.r.o., Nové sady 18, 602 00 Brno

E N C Y K L O P E D I E W E B D E S I G N E R A

Pod tímto logem vycházejí publik ace určené pro k aždého, kdo se zajímá o tv orbu webových stránek. Od ryze praktických příruček a průvodců až po komplexní publikace o všem, co potřebuje webdesignér při každodenní práci. Na vydavatelský plán a výhody, které můžete získat, se informujte na adrese vyda-vatelství.

Věrným čtenářům je určen výhodný PRÉMIOVÝ PLUS PROGRAM.

• CSS a dokumenty• Selektory• Struktura a kaskáda• Hodnoty a jednotky• Písma• Vlastnosti textu• Základy vizuálního formátování

• Výplně, orámování a okraje• Barvy a pozadí• Plovoucí prvky a pozicování• Rozvržení tabulek• Seznamy a generovaný obsah• Styly uživatelského rozhraní• Nevizuální média

Eric A. Meyer je mezinárodně uznávaným expertem v oblasti HTML, CSS a webových standardů. S webem pracuje již od roku 1993.

Eric Meyer o CSS

Eric A. Meyer

Kompletní průvodce

CSS: The Definitive Guide, Third EditionEric A. Meyer

© ZONER software, s.r.o., 2007. Authorized translation of the English edition of CSS: The Definitive Guide, 3rd Edition© O'Reilly Media, Inc. This translation is published and sold by permision of O'Reilly Media, Inc., the owner of all rights to publish and sell the same.

No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from O'Reilly Media, Inc.

© ZONER software, s.r.o., 2007. Autorizovaný překlad originálního anglického vydání knihy CSS: The Definitive Guide, 3rd Edition © O'Reilly Media, Inc. Překlad je vydán a prodáván s výslovným svolením O'Reilly Media, Inc., vlastníkem veške-rých práv na vydání i prodej tohoto titulu.

Žádná část této publikace nesmí být reprodukována nebo předávána žádnou formou nebo způsobem, elektronicky ani mecha-nicky, včetně fotokopií, natáčení ani žádnými jinými systémy pro ukládání bez výslovného svolení O'Reilly Media, Inc.

Eric Meyer o CSS – Kompletní průvodce

Autor: Eric A. Meyer.

Copyright © ZONER software, s.r.o. Vydání první v roce 2007. Všechna práva vyhrazena.

Zoner PressKatalogové číslo: ZR628

ZONER software, s.r.o.Nové sady 18, 602 00 Brno

Překlad: RNDr. Jan PokornýOdpovědný redaktor: Miroslav KučeraŠéfredaktor: Ing. Pavel Kristián

DTP: Miroslav Kučera© Ilustrace na obálce: O'Reilly Media, Inc.

Informace, které jsou v této knize zveřejněny, mohou byt chráněny jako patent. Jména produktů byla uvedena bez záruky jejich volného použití. Při tvorbě textů a vyobrazení bylo sice postupováno s maximální péčí, ale přesto nelze zcela vyloučit možnost výskytu chyb. Vydavatelé a autoři nepřebírají právní odpovědnost ani žádnou jinou záruku za použití chybných údajů a z toho vyplývajících důsledků. Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována ani dis-tribuována žádným způsobem ani prostředkem, ani reprodukována v databázi či na jiném záznamovém prostředku či v jiném systému bez výslovného svolení vydavatele, s výjimkou zveřejnění krátkých částí textu pro potřeby recenzí.

Veškeré dotazy týkající se distribuce směřujte na:

Zoner Press ZONER software, s.r.o. Nové sady 18, 602 00 Brno

tel.: 532 190 883, fax: 543 257 245 e-mail: [email protected] http://www.zonerpress.cz

ISBN 978-80-86815-64-0

Mé ženě a dceřiza všechny radosti, které mi přinášejí

Stručný obsahKapitola 1 CSS a dokumenty 23

Kapitola 2 Selektory 47

Kapitola 3 Struktura a kaskáda 87

Kapitola 4 Hodnoty a jednotky 103

Kapitola 5 Písma 121

Kapitola 6 Vlastnosti textu 157

Kapitola 7 Základy vizuálního formátování 189

Kapitola 8 Výplně, orámování a okraje 241

Kapitola 9 Barvy a pozadí 279

Kapitola 10 Plovoucí prvky a pozicování 317

Kapitola 11 Rozvržení tabulek 377

Kapitola 12 Seznamy a generovaný obsah 409

Kapitola 13 Styly uživatelského rozhraní 435

Kapitola 14 Nevizuální média 451

Dodatek A Referenční příručka vlastností 489

Dodatek B Referenční příručka selektorů, pseudotříd a pseudoprvků 535

Dodatek C Ukázkový stylový předpis HTML 4 543

Rejstřík 547

Podrobný obsah Předmluva 17

Konvence používané v knize 17

Konvence týkající se vlastností 17

Použití zdrojových kódů 19

Safari® Enabled 19

Poděkování 19

Sdělte nám svůj názor 21

O autorovi 21

Poznámka k lososům na obálce 22

Kapitola 1 CSS a dokumenty 23

Jak web upadl v nemilost 23

Začátek nepořádku 24

Záchrana – CSS 26

Bohatá výbava pro styly 26

Snadnost použití 27

Styly použité na více stránkách 28

Kaskáda 28

Menší velikost souborů 29

Myslíme na budoucnost 30

Prvky 30

Nahrazované a nenahrazované prvky 30

Zobrazovací role prvku 31

Propojení CSS a XHTML 34

Značka link 36

Prvek style 41

Direktiva @import 41

Konkrétní stylová pravidla 43

Komentáře CSS 44

Inline styly 45

Shrnutí 46

Kapitola 2 Selektory 47

Základní pravidla 47

Struktura pravidla 48

Selektory prvků 48

Deklarace a klíčová slova 50

Seskupování 52

Seskupování selektorů 52

Seskupování deklarací 54

Seskupování obojího 55

Selektory tříd a ID 56

Selektory tříd 57

Třídy s několika názvy 59

Selektory ID 60

Kdy použít selektor třídy a kdy selektor ID 61

Selektory s atributy 62

Prostý výběr atributu 62

Výběr založený na přesné hodnotě atributu 64

Výběr založený na jednom ze slov hodnoty atributu 65

Výběr založený na tvarech slova hodnoty atributu 68

Využití struktury dokumentu 68

Vztah rodič – potomek 69

Selektory následníků 70

Výběr potomků 73

Výběr sousedních sourozeneckých prvků 74

Pseudotřídy a pseudoprvky 76

Selektory pseudotříd 76

Selektory pseudoprvků 83

Shrnutí 86

Kapitola 3 Struktura a kaskáda 87

Specifičnost 87

Deklarace a specifičnost 89

Specifičnost univerzálního selektoru 90

Specifičnost selektoru ID a selektoru s atributy 91

Specifičnost inline stylu 91

Důležitost 92

Dědění 93

Problémy při dědění 95

Kaskáda 96

Třídění podle váhy a původu 97

Třídění podle specifičnosti 98

Třídění podle pořadí 98

Prezentační pokyny, které nepatří do CSS 101

Shrnutí 101

Kapitola 4 Hodnoty a jednotky 103

Čísla 103

Procenta 103

Barva 104

Pojmenované barvy 104

Barvy podle RGB 105

Délkové jednotky 110

Absolutní délkové jednotky 110

Relativní délkové jednotky 112

URL 116

Klíčová slova 118

Jednotky CSS 2 119

Shrnutí 120

Kapitola 5 Písma 121

Rodiny písma 122

Práce s všeobecnými rodinami písma 123

Specifikace rodiny písma 124

Tučnost písma 127

Jak tučnosti fungují 128

Jak dostaneme tučnější písmo 130

Jak dostaneme méně tučné písmo 133

Velikost písma 133

Absolutní velikosti 135

Relativní velikosti 136

Procenta a velikosti 138

Velikost písma a dědění 139

Délkové jednotky a velikost písma 140

Styly a varianty písma 142

Styl písma 142

Varianty písma 144

Roztahování a náhrada písma 145

Vlastnost font 148

Výška řádku 150

Řádné používání zkráceného zápisu 151

Systémové fonty 151

Hledání vhodného fontu 153

Pravidlo font-face 154

Shrnutí 156

Kapitola 6 Vlastnosti textu 157

Odsazení a vodorovné zarovnání 157

Odsazování textu 157

Vodorovné zarovnání 160

Svislé zarovnání 163

Výška řádků 163

Svislé zarovnávání textu 167

Zarovnání nahoru 170

Rozestup mezi slovy a písmeny 172

Rozestup mezi slovy 172

Rozestup mezi písmeny 174

Rozestup a zarovnání 175

Transformace textu 176

Dekorace textu 178

Podivnosti dekoračních efektů 179

Stínování textu 182

Zpracování prázdných znaků 183

Směr textu 186

Shrnutí 187

Kapitola 7 Základy vizuálního formátování 189

Základní boxy 189

Omezující blok 190

Stručná rekapitulace 191

Blokové prvky 192

Vodorovné formátování 193

Svislé formátování 201

Položky seznamu 210

Inline prvky 211

Rozvržení řádků 212

Základní termíny a pojmy 214

Inline formátování 216

Nenahrazované inline prvky 217

Účaří a výšky řádků 223

Piktografy versus oblast obsahu 227

Nahrazované inline prvky 227

Historie inline formátování 231

Změna zobrazení prvku 232

Změna zobrazovacích rolí 232

Hybridní prvky s inline-block 234

Hybridní prvky s run-in 237

Shrnutí 239

Kapitola 8 Výplně, orámování a okraje 241

Základní box prvku 241

Výška a šířka 243

Historické problémy 244

Okraje versus výplně 244

Okraje 245

Délkové hodnoty a okraje 246

Procenta a okraje 248

Replikace hodnot 250

Vlastnosti pro okraj jedné strany 251

Záporné a sbalené okraje 252

Okraje a inline prvky 255

Historické problémy s okraji 257

Orámování 257

Orámování a pozadí 258

Styl orámování 258

Šířka orámování 262

Barvy orámování 265

Zkrácený zápis vlastností pro orámování 267

Globální orámování 269

Orámování a inline prvky 271

Výplně 272

Procentuální hodnoty a výplně 275

Výplň jen na jedné straně 276

Výplně a inline prvky 277

Výplně a nahrazované prvky 277

Shrnutí 278

Kapitola 9 Barvy a pozadí 279

Barvy 279

Barvy popředí 281

Nahrazování atributů 283

Vliv barev na orámování 284

Vliv barev na prvky formuláře 285

Dědění vlastnosti color 286

Pozadí 287

Barva pozadí 287

Obrázkové pozadí 290

Opakování zvolenými směry 295

Pozicování pozadí 298

Opakování daným směrem (revize) 307

Zafixovaný obrázek na pozadí 309

Souhrnná vlastnost background 313

Shrnutí 316

Kapitola 10 Plovoucí prvky a pozicování 317

Obtékání 317

Plovoucí prvky 318

Podrobnosti k plovoucím prvkům 320

Chování plovoucích prvků v praxi 326

Plovoucí prvky, obsah, překrývání 331

Vlastnost clear 332

Pozicování 336

Základní koncepce 336

Výška a šířka 342

Přetékání a ořezávání obsahu 346

Viditelnost prvků 352

Absolutní pozicování 353

Fixní pozicování 370

Relativní pozicování 373

Shrnutí 375

Kapitola 11 Rozvržení tabulek 377

Formátování tabulky 377

Vizuální uspořádání tabulky 378

Hodnoty display pro tabulku 379

Anonymní objekty tabulky 384

Vrstvy tabulky 388

Titulky 389

Orámování buněk tabulky 391

Samostatné orámování buněk 391

Model sloučeného orámování buněk 394

Určování velikosti tabulky 398

Šířka 399

Výška tabulky 404

Zarovnání obsahu tabulek 405

Shrnutí 408

Kapitola 12 Seznamy a generovaný obsah 409

Seznamy 409

Typy seznamů 410

Obrázky pro symboly položek seznamu 412

Pozice symbolu pro odrážky 414

Zkrácený zápis stylů pro seznam 415

Rozvržení seznamu 416

Generovaný obsah 418

Pozicování symbolu odrážek 419

Vkládání generovaného obsahu 419

Specifikace obsahu 422

Počítadla 427

Shrnutí 434

Kapitola 13 Styly uživatelského rozhraní 435

Systémové fonty a barvy 435

Systémové fonty 435

Systémové barvy 437

Kurzory 440

Změna kurzoru 441

Obrysy 445

Nastavení stylu obrysů 446

Šířka obrysu 447

Barva obrysu 447

Zkrácený zápis definice obrysu 449

Shrnutí 450

Kapitola 14 Nevizuální média 451

Vyznačení stylových předpisů pro konkrétní média 452

Stránkovaná média 453

Styly pro tisk 453

Projekční styly 467

Aurální styly 470

Mluvení 471

Hlasitost 475

Volba hlasu 477

Změna hlasu 478

Pauzy a upoutávky 480

Zvuky na pozadí 483

Pozicování zvuků 484

Shrnutí 488

Dodatek A Referenční příručka vlastností 489

Vizuální média 489

Tabulky 521

Stránkovaná média 523

Aurální styly 525

Vlastnosti odstraněné z CSS 2.1 531

Dodatek B Referenční příručka selektorů,

pseudotříd a pseudoprvků 535

Selektory 535

Univerzální selektor 535

Selektor typu 535

Selektor následníka 536

Dceřiný selektor 536

Selektor sousedního sourozence 536

Selektor třídy 536

Selektor ID 537

Prostý selektor atributu 537

Selektor přesné hodnoty atributu 537

Selektor části hodnoty atributu 538

Selektor podřetězce od začátku hodnoty atributu 538

Selektor podřetězce na konci hodnoty atributu 538

Selektor libovolného podřetězce hodnoty atributu 538

Selektor atributu jazyka 539

Pseudotřídy a pseudoprvky 539

:active 539

:after 539

:before 540

:first-child 540

:first-letter 540

:first-line 541

:focus 541

:hover 541

:lang 542

:link 542

:visited 542

Dodatek C Ukázkový stylový předpis HTML 4 543

Rejstřík 547

17

PředmluvaJste-li webový designér nebo autor dokumentů a zajímáte se o sofistikované stylování svých strá-nek, chcete zdokonalit jejich dostupnost, a chcete také při tvorbě a správě webových stránek ušetřit svůj čas a úsilí, je pro vás tato kniha jako stvořená. Abyste mohli s knihou začít pracovat, nepotře-bujete nic víc, než se slušně vyznat v HTML 4.0. Samozřejmě – čím lépe HTML ovládáte, tím lépe jste na knihu připraveni. Jinak nepotřebujete téměř nic.

Třetí vydání knihy Eric Meyer o CSS – Kompletní průvodce pokrývá CSS 2 a CSS 2.1 (až k pracov-nímu konceptu ze dne 11. dubna 2006), přičemž ten druhý je v mnoha ohledech pouze vyjasnění a upřesnění toho prvního. I když už v době, kdy jsem tuto knihu psal, dosáhly některé moduly CSS 3 stavu "kandidát na doporučení", raději jsem je do tohoto vydání nezahrnul (s výjimkou ně-kterých selektorů CSS 3). Rozhodl jsem se tak proto, že implementace všech nových modulů stále ještě není kompletní nebo vůbec neexistuje. Považoval jsem za důležité, aby se kniha soustředila na aktuálně podporované a dobře pochopitelné úrovně CSS, přičemž budoucí schopnosti jsem odložil do budoucích vydání.

Konvence používané v knize V knize se používají následující typografické konvence:

Neproporcionální písmo – Indikuje výstup režimu příkazového řádku počítače, výpis zdrojo-vých kódů (jak HTML, tak i CSS), klíče registru, názvy zdrojových souborů a klávesové zkratky.

Takto je zvýrazněna důležitá nebo jinak zajímavá část textu, kterou byste neměli přehlédnout.

Konvence týkající se vlastností V knize narazíte na mnoha místech na rámeček, v němž se popisuje daná vlastnost CSS. Jsou prak-ticky doslovně reprodukované ze specifikací CSS, patří se však k uvedené syntaxi něco vysvětlit.

Povolené hodnoty dané vlastnosti se vypisují touto syntaxí:

Hodnota: [<délka> | thick | thin ]{1,4}

Hodnota: [<název-rodiny>,]* <název-rodiny>

Hodnota: <url>? <barva> [/<barva>]?

Hodnota: <url> | | <barva>

Slova nacházející se mezi "<" a ">" udávají typ hodnoty nebo odkaz na jinou vlastnost. Například – vlastnost font akceptuje hodnoty, které skutečně patří do rodiny písma vlastnosti font-fami-ly. Označuje se to textem <název-rodiny>. Slova psaná neproporcionálním písmem jsou klíčová

18

slova a musejí se uvádět přesně tak, jak jsou napsaná, ale bez apostrofů. Lomítko (/) a čárka (,) se také musejí uvádět doslova.

Je-li napsáno několik klíčových slov za sebou, znamená to, že se musejí uvádět v daném pořadí. Na-příklad – help me znamená, že ve vlastnosti se musejí uvést obě klíčová slova a v tomto pořadí.

Svislice odděluje alternativy (X | Y), musí se tedy uvést jedna nebo druhá. Dvojitá svislice (X || Y) znamená, že se musejí uvést obě alternativy, X i Y, nicméně na jejich pořadí nezáleží. Hranaté zá-vorky ([…]) seskupují (vytvářejí skupinu prvků). Umístění je silnější než dvojitá svislice, ta je zase silnější než jednoduchá svislice. Tedy, "VW | X || YZ" je ekvivalentní s "[VW] | [X | | [YZ]]".

Za každým slovem nebo skupinou v hranatých závorkách může následovat jeden z následujících modifikátorů:

� Hvězdička (*) vyjadřuje, že předchozí hodnota nebo skupina v hranatých závorkách se může opakovat nula nebo vícekrát. Takže košík* znamená, že se slovo košík může vyskytnout libovolněkrát, včetně nulového počtu. Horní limit pro počet opakování není určen.

� Plus (+) vyjadřuje, že se předchozí hodnota nebo skupina v hranatých závorkách může opa-kovat jednou nebo vícekrát. Takže smeták+ znamená, že slovo smeták se musí použít ales-poň jednou, případně víckrát.

� Otazník (?) vyjadřuje, že je předchozí hodnota nebo skupina v hranatých závorkách ne-povinná. Například – [vánoční stromeček]? znamená, že slova vánoční stromeček se použít nemusejí (ovšem – když se použijí, musejí být v uvedeném pořadí).

� Dvojice čísel ve složených závorkách {M,N} vyjadřuje, že se předchozí hodnota nebo skupina v hranatých závorkách opakuje alespoň M krát a zároveň nejvýše N krát. Například – ha{1,3} znamená, že se mohou vyskytnout jedna, dvě nebo tři instance slova ha.

Několik ukázek:

give || me || liberty

Musí se použít alespoň jedno z vedených tří slov, ale v libovolném pořadí. Například – platné jsou give liberty, give me, liberty me give a give me liberty.

[ I | am]? the || walrus

Dá se použít buď slovo I, nebo am, ale nikoliv obě najednou, přičemž obě jsou nepovinná. Pak musí následovat buď the, nebo walrus, nebo obě dvě slova, v libovolném pořadí. Proto jsou platná tato slovní spojení: I the walrus, am the, walrus the a další.

koo+ ka-choo

Za jedním nebo několika výskyty koo musí následovat ka-choo. Proto jsou platné koo koo ka--choo, koo koo koo ka-choo a koo ka-choo. Počet koo není v podstatě nijak omezen, nicméně se bude se vázat na určitý limit, který je specifický pro danou implementaci.

Opravdu {1,4}? [zbožňuji | nesnáším] [Microsoft | Netscape | Opera | Safari]

19

Jedná se o univerzální subjektivní názor designéra. Příklad se dá interpretovat jako zbožňuji Ne-tscape, Opravdu zbožňuji Microsoft a podobně. Může se použít nula až čtyři slova opravdu. Také se dá volit mezi zbožňuji a nesnáším, přestože jsme v obou konkrétních ukázkách zvolili zbožňuji.

[[ Alpha || Baker || Cray],]{2,3} and Delphi

To může potenciálně být dost dlouhý a komplikovaný výraz. Platnou ukázkou je třeba Alpha, Cray, and Delphi. Čárka se uvádí proto, že její pozice je uvnitř skupiny definované hranatými závorkami.

Použití zdrojových kódůÚčelem knihy je pomoci vám ve vaší práci. Obvykle budete moci použít kód uvedený v knize ve svých programech a dokumentacích bez dalších komplikací. Nemusíte nás žádat o povolení, pokud nereprodukujete významnou část kódu. Pokud například píšete nějaký program, v němž použi-jete několik kratších úseků kódu z této knihy, žádné povolení k tomu nepotřebujete. Povolení si však musíte vyžádat, chcete-li prodávat nebo distribuovat CD-ROM s příklady z knih vydavatelství O'Reilly. Odpovídáte-li na nějaký dotaz tak, že citujete tuto knihu a přiložíte jako ukázku příklad kódu z knihy, k tomu povolení nepotřebujete. Začleníte-li významné množství kódu příkladů z té-to knihy do dokumentace nějakého vašeho produktu, k tomu už povolení potřebujete.

Oceníme citaci, ale nevyžadujeme ji. Citace obvykle obsahuje titul, autora, vydavatele a ISBN. Na-příklad: "CSS: The Definitive Guide, Third Edition, by Eric. A. Meyer, Copyright 2007 O'Reilly Media, Inc., 978-0-596-52733-4." Chcete-li použít příklady kódu jinak, než vymezují povolení uve-dená výše, kontaktujte nás na e-mailové adrese [email protected].

Safari® EnabledUvidíte-li na obálce své oblíbené technologické knihy ikonu Safari® Enabled, zname-ná to, že je kniha dostupná online prostřednictvím O'Reilly Network Safari Book-shelf.

Safari nabízí řešení, které je lepší než elektronické knihy. Je to virtuální knihovna, kde můžete snad-no prohledávat tisíce předních technologických knih, kopírovat a vkládat příklady kódu, stahovat kapitoly a rychle nacházet odpovědi, potřebujete-li co nejpřesnější a nejaktuálnější informace. Vy-zkoušejte si to zdarma na http://safari.oreilly.com.

PoděkováníRád bych ještě věnoval chvilku na poděkování lidem, kteří mě podporovali po celou dlouhou dobu, než se kniha dostala ke svým čtenářům.

20

Nejprve chci poděkovat všem ve vydavatelství O'Reilly, co pro mě za celá ta dlouhá léta udělali. Prosadili, abych mohl publikovat, a dali mi příležitost vyprodukovat knihu, která má smysl. Co se týče třetího vydání – chci poděkovat Tatianě Apandi za její smysl pro humor, trpělivost a pochope-ní, když jsem pouze taktak zvládal dohodnuté termíny.

Rád bych také vyjádřil své nesmírné díky odborným korektorům. V prvním vydání to byli David Baron a Ian Hickson, přispěli ale také Bert Bos a Håkon Lie. Korektury druhého vydání prová-děli Tantek Çelik a Ian Hickson. Ti milí lidé, kdo dělali odborné korektury třetího vydání – tedy toho, které právě držíte ve svých rukách – byli Darrel Austin, Liza Daly a Neil Lee. Všichni ukázali svoji vysokou odbornost i značnou orientaci v problematice a přiměli mě, abych se k nejnovějším změnám v CSS vyjadřoval otevřeně, upřímně a moderně, a aby mé popisy nebyly ledabylé a má vysvětlení nebyla popletená. Bez jejich kolektivního úsilí by ani jedno z vydání, a především tohle poslední, nebylo zdaleka tak dobré, jaké je. Samozřejmě – všechny chyby, které v textu najdete, padají pouze na mou hlavu, ne na jejich. Sice vím, že je to klišé, nicméně je to pravda.

Obdobně bych rád poděkoval všem, kdo upozornili na nějaké chyby či závady, které bylo zapotře-bí napravit. Možná, že jsem se vám zdál někdy liknavý, protože jsem na vaše e-maily nereagoval neprodleně, ale ujišťuji vás, že jsem všechny vaše otázky přečetl, zabýval se jimi, a pokud to bylo třeba, udělal jsem patřičné opravy. Trvalá zpětná vazba a konstruktivní kritika přispěly k tomu, že tato kniha je lepší, než jaká by byla bez nich.

Dále bych ještě chtěl vyjádřit několik osobních poděkování.

Kolektivu WRUW, 91.1 FM Cleveland, za podporu trvající už devět let, za skvělou muziku a bez-vadnou zábavu. Možná že jednou přitáhnu zpět na vaše vlny Big Bandy, ale možná taky ne – kaž-dopádně dělejte dál, co jste dělali doposud.

Díky zasluhuje nejenom Jeffrey Zeldman, můj skvělý kolega a partner, ale celá Zeldmanovic rodi-na, jsou to skutečně báječní přátelé.

Děkuji "tetě" Molly, že je pořád tím, čím je. "Strejdovi" Jimovi za všechno, profesionálně i osobně. Není žádná nadsázka, když řeknu, že bez tvého vlivu bych nikdy nebyl tam, kde jsem, a náš život by byl o hodně chudší, kdybychom tě neměli kolem sebe.

Personálu Bread and Soup – Jim, Genevieve, Jim, Goini, Ferrett, Jen, Jenn a Molly – za to, jak jedi-nečně vaříte a vtipně konverzujete.

Děkuji své rozšířené rodině za všechnu lásku a podporu, děkuji všem, kterým jsem poděkovat měl, ale nepoděkoval – omlouvám se. A děkuji.

A nakonec mé ženě a dceři – více díků než vůbec dokážu vyjádřit, že učinily mé dny bohatšími, než jsem kdy měl právo očekávat, a že mě zahrnuly větší láskou, než kdy dokážu splatit. I když se samozřejmě stále úpěnlivě snažím.

Eric A. Meyer

Cleveland Heights, Ohio

1. srpna 2006

21

Sdělte nám svůj názorJako čtenáři této knihy se stáváte těmi nejdůležitějšími kritiky a komentátory. Vážíme si vašeho názoru a chtěli bychom vědět, co děláme správně, co bychom mohli dělat lépe, ve kterých oblas-tech bychom měli publikovat a také vaše další podnětné myšlenky, o které jste ochotni se s námi podělit.

Jako odborný redaktor Zoner Press vítám vaše názory. Můžete mi psát – poslat e-mail nebo dopis – a sdělit mi, co se vám v této knize lí bilo nebo nelíbilo, stejně tak, co bychom měli udělat, aby naše další knihy byly lepší. Pokud mi napíšete, nezapomeňte prosím připojit název knihy, ISBN, jméno autora, vaše jméno, telefon, fax nebo e-mail. Pozorně zhodnotím vaše názory a poskytnu je autoro-vi a redaktorům, kteří pracovali na této knize.

Prosím, vězte, že nemohu pomoci s technickými problémy, které se týkají obsahu knihy, a že díky velkému množství e-mailů, které dostávám, nemohu zaručit odpověď na každou zprávu.

E-mail: [email protected] nebo [email protected]

Adresa: Zoner Press

ZONER software, s.r.o

Miroslav Kučera

Nové sady 18

602 00 Brno

O autoroviEric A. Meyer pracuje s webem od roku 1993 a je mezinárodně uznávaným expertem na proble-matiku HTML, CSS a web všeobecně. Je velmi oblíbeným autorem. Je zakladatelem společnosti Complex Spiral Consulting (www.complexspiral.com), mezi jejíž klienty patří America Online, Apple Computer, Wells Fargo Bank nebo Macromedia, kterou Eric označuje za rozhodujícího part-nera v úsilí transformovat Macromedia Dreamweaver MX 2004 v revoluční nástroj pro vytváření designů založených na CSS.

Začátkem roku 1994 působil Eric jako vizuální designér a správce webových stránek univerzity Case Western Reserve. Zde také napsal velmi uznávanou sérii tří tutoriálů pro HTML a podílel se na projektu online verze Encyklopedie clevelandské historie a Slovníku clevelandské biografie – první encyklopedie městské historie, která byla plně publikována na webu.

Je autorem knih Eric Meyer on CSS a More Eric Meyer on CSS (obě knihy vyšly i v češtině, viz ad-resa www.zonerpress.cz), dále Cascading Style Sheets: The Definitive Guide (O'Reilly), CSS 2.0 Programmer's Reference (Osborne/McGraw-Hill). Pro O'Reilly Network, Web Techniques a Web Review napsal spoustu článků. Eric také vytvořil tabulku kompatibility CSS v jednotlivých pro-hlížečích (CSS Browser Compatibility Charts). Přednášel v mnoha různých organizacích, včetně Národní laboratoře v Los Alamos (Los Alamos National Laboratory), ve Veřejné knihovně v New

22

Yorku (New York Public Library), Kornellově Univerzitě (Cornell University) či na Univerzitě Se-verní Iowy (University of Northern Iowa). Se svými projevy a technickými prezentacemi vystoupil na různých konferencích – jmenujme např. An Event Apart, IW3C2 WWW, Web Design World, CMP, SXSW. Bylo také jej možné spatřit na mnoha konferencích zabývající se uživatelským rozhra-ním nebo na konferencích zaměřeným na Dreamweaver. Ve volném čase Eric působil jako správce aktivní emailové konference css-discuss (www.css-discuss.org), kterou založil spolu s Johnem Allsoppem z Western Civilisation, a která je nyní podporována společnosti evolt.org.

Eric žije v Clevelandu v Ohiu, což je mnohem hezčí město, než byste věřili. Po devět let uváděl po-řad "Your Father's Oldsmobile", což je bigbandová show, kterou jednou týdně vysílá rádio WRUW v Clevelandu. Více detailních informací o autorovi můžete najít na Ericově osobní webové stránce http://www.meyerweb.com/eric.

Poznámka k lososům na obálceVzhled obálky této knihy je výsledkem poznámek mnoha čtenářů, našeho experimentování a ode-zvy z distribučních kanálů. Výrazné obálky doplňují náš výrazný přístup k technickým námětům, vnášení osobitosti a života do potencionálně nudných témat. Zvířata na obálce knihy Eric Meyer o CSS – Kompletní průvodce (originální název knihy je CSS: The Definitive Guide, Third Edition), jsou lososi (salmonidae), což je rod ryb, jež sestává z mnoha různých druhů. Dva z nejběžnějších lososů jsou losos tichomořský a losos atlantský.

Losos tichomořský žije v severních vodách Tichého oceánu u pobřeží Severní Ameriky a Asie. Na-chází se zde pět poddruhů lososa tichomořského, s průměrnou váhou od 4 do 14 kg. Tichomořští lososi se rodí na podzim ve sladkovodních potocích se štěrkovým dnem, kde se během zimy vylíh-nou jako palec dlouhé rybky. Rok nebo dva žijí v potocích nebo jezerech a pak míří dolů po proudu do oceánu. Zde pár let žijí, než se vrátí proti proudu zpět, přesně do místa, kde se narodili, aby se zde vytřeli a následně zemřeli.

Losos atlantský žije v severních vodách Atlantského oceánu u pobřeží Severní Ameriky a Evropy. Existuje mnoho poddruhů lososa atlantského, včetně pstruha a sivena. Jejich průměrná váha je kolem 4 až 9 kg. Životní cyklus lososa atlantského je podobný cyklu jeho tichomořského bratrance – také cestuje ze sladkovodních štěrkových potoků do moře. Mezi oběma druhy je ovšem jeden velký rozdíl – losos atlantský po tření obvykle neumírá. Vrací se zpět do oceánu a pak zpátky proti proudu se znova třít (obvykle dvakrát, ojediněle až třikrát).

Losos všeobecně je elegantní, stříbřitě zbarvená ryba se skvrnami na zádech a na ploutvích. Jeho potravou je plankton, larvy hmyzu, krevety a menší ryby. Právě jejich neobvykle ostrý čich je tím hlavním smyslem, který je vede z oceánu zpět do místa narození, proti proudu, přes četné překáž-ky. Některé druhy lososa do oceánu nemigrují – zůstávají celý život ve sladkovodních vodách. Lo-sosi jsou důležitou součástí ekosystému, protože jejich rozkládající se těla dodávají živiny říčnímu dnu. Jejich počty se v posledních letech velmi snižují. Ve snižování populace lososů hraje hlavní roli zejména likvidace přirozeného prostředí, rybaření, přehrady, které blokují třecí trasy, kyselé deště, období sucha, záplavy a samozřejmě i stále rostoucí znečišťování vody.

KAPITOLA 2 Selektory

Jednou z primárních předností CSS – konkrétně pro designéry – je jejich schopnost snadno a jed-noduše aplikovat nějakou sadu stylů na všechny prvky téhož typu. Neoslnilo vás to? Zamyslete se nad tímhle: úpravou jediného řádku CSS můžete změnit barvy všech svých záhlaví. Zošklivila se vám ta modrá, kterou používáte? Změníte jediný řádek kódu a všechno může být purpurové, žluté, kaštanové, nebo v jakékoliv jiné barvě. Umožňuje to vám, designérovi, se soustředit pouze na design, a ne se ustavičně dřít s kódem jako otrok. Až budete příště na poradě vedení a někdo si usmyslí, že mají být všechna záhlaví v jiném odstínu zelené, řeknete, že to není problém a upravíte pouze jediný řádek kódu. Voilà! Výsledky jsou otázkou několika sekund a každý je hned uvidí.

CSS samozřejmě nemůže vyřešit všechny vaše problémy – pomocí stylů například nemůžete změ-nit barvu svých obrázků GIF, můžete ovšem mnohem snadněji provádět řadu změn globálního rozsahu. Začneme se selektory a strukturou.

Základní pravidlaJak už jsem konstatoval, základním charakteristickým rysem CSS je jeho schopnost aplikovat jistá pravidla na kompletní sadu prvků v dokumentu. Řekněme například, že chcete mít text všech prv-ků h2 šedý. Ve staromódním HTML byste to museli udělat tak, že byste do všech svých prvků h2 vložili značky ... takto:

<h2>Text záhlaví h2</h2>

Je evidentní, že toto je únavný proces, obsahuje-li váš dokument hodně prvků h2. Horší ovšem je, že pokud se později rozhodnete, že bude lepší, když budou všechny typ prvky h2 zelené, nikoliv šedé, budete muset všechno ručně předělat.

CSS umožňuje vytvářet pravidla, která se snadno mění, upravují i aplikují na všechny textové prv-ky, pro které je definujete (to, jak tato pravidla fungují, probereme v příštím oddílu). Například pravidlo, které učiní všechny vaše prvky h2 šedé, stačí napsat pouze jednou:

48 Kapitola 2 – Selektory

h2 {color: gray;}

Až budete potřebovat, aby veškerý text v prvcích h2 měl jinou barvou – řekněme stříbrnou – jed-noduše jen změníte dané pravidlo:

h2 {color: silver;}

Struktura pravidla Abych ilustroval pojem pravidlo podrobněji, rozpitvejme jeho strukturu.

Každé pravidlo má dvě základní části – selektor a blok deklarací. Deklarační blok se skládá z jedné nebo několika deklarací, přičemž každou deklaraci tvoří vlastnost (property) a hodnota (value). Každý stylový předpis tvoří série pravidel. Jednotlivé části pravidla vidíte na obrázku 2-1.

Obrázek 2-1. Struktura pravidla.

Selektor, který vidíte na levé straně pravidla, určuje, kterou část dokumentu pravidlo ovlivní. Na obrázku 2-1 jsou to prvky h1. Kdyby selektorem byl p, vybraly by se prvky (odstavec).

Na pravé straně pravidla je deklarační blok skládající se z jedné nebo několika deklarací. Každou deklaraci tvoří kombinace vlastnosti CSS a její hodnoty. Na obrázku 2-1 obsahuje deklarační blok dvě deklarace. První deklarace zajišťuje, že ovlivněné části textu (text v nadpisu h1) budu mít čer-venou barvu (color má hodnotu red), druhá deklarace prohlašuje, že ovlivněné části dokumentu budou mít žluté pozadí (background má hodnotu yellow). Takže všechny prvky h1 (což je určeno selektorem) v dokumentu budou ostylované tak, že text bude červený na žlutém pozadí.

Selektory prvkůSelektorem je nejčastěji nějaký prvek HTML, ale nemusí tomu tak být vždy. Například – pokud soubor CSS obsahuje styly pro dokument XML, mohou selektory vypadat takhle:

CITAT {color: gray;}

49Eric Meyer o CSS – Kompletní průvodce

BIBLIOGRAFIE {color: red;}

NAZEVKNIHY {color: purple;}

MUJPRVEK {color: red;}

Jinak řečeno – prvky XML dokumentu slouží jako základní selektory. V XML může být selektorem cokoliv, protože XML umožňuje vytvářet nové značkovací jazyky, v nichž se může za název prvku považovat téměř cokoliv. Stylujete-li oproti tomu dokument HTML, obvykle bude selektorem je-den z mnoha prvků HTML, jako jsou p, h3, em, a nebo dokonce prvek html samotný. Například:

html {color: black;}

h1 {color: gray;}

h2 {color: silver;}

Účinek těchto stylů stylizace vidíte na obrázku 2-2.

Obrázek 2-2. Prostá stylizace prostého dokumentu.

Jakmile globálně aplikujete nějaké styly na prvky, můžete je "přesunout" na jiné prvky. Řekněme například, že jste se rozhodli, že šedé mají být texty odstavců z obrázku 2-2, nikoliv prvky h1. Hrač-ka. Prostě ve stylovém předpisu změníte selektor h1 na p:

html {color: black;}

p {color: gray;}

h2 {color: silver;}


Obrázek 2-3. Přesun stylu z jednoho prvku na jiný.

Deklarace a klíčová slova Deklarační blok obsahuje jednu nebo několik deklarací. Deklarace je vždy v tomto formátu: vlast-nost, pak dvojtečka, pak hodnota, a nakonec středník. Za dvojtečkou i středníkem se mohou uvá-dět mezery. Téměř ve všech případech je hodnota buď jediné klíčové slovo, nebo seznam několika klíčových slov, které jsou pro danou vlastnost povolené (oddělují se mezerou). Uvedete-li v dekla-raci nesprávnou vlastnost nebo hodnotu, bude se celá deklarace ignorovat. Proto ani jedna z násle-dujících dvou deklarací nebude funkční:

velikost-mozku: 2cm; /* neznámá vlastnost */

color: ultrafialova; /* neznámá hodnota */

Když jako hodnotu vlastnosti uvedete několik klíčových slov, obvykle se oddělují mezerami. Ně-které vlastnosti nemohou přijímat více klíčových slov, mnohé jiné ano (jako například font). Řek-něme například, že chcete pro text odstavců použít středně velké písmo Helvetica, jak je to vidět na obrázku 2-4.


Obrázek 2-4. Výsledek hodnoty vlastnosti složené z několika klíčových slov.

Toto pravidlo byste napsali ve tvaru:

p {font: medium Helvetica;}

Všimněte si mezery mezi medium a Helvetica, obě to jsou klíčová slova (první určuje velikost fon-tu, druhé název fontu). Mezera umožňuje uživatelskému agentovi, aby obě klíčová slova správně rozpoznal a aplikoval. Středník sděluje, že deklarace končí.

Těmto slovům oddělovaných mezerami se říká klíčová proto, že dohromady formují hodnotu dané vlastnosti. Podívejte se například na následující fiktivní pravidlo:

duha: red orange yellow green blue indigo violet;

Žádná vlastnost duha samozřejmě neexistuje (a také dva z názvů barev nejsou platné), nicméně tento příklad nám dobře poslouží jako ilustrace. Hodnota vlastnosti duha je red orange yellow green blue indigo violet, přičemž těchto sedm klíčových slov dohromady formuje jedinečnou hodnotu. Hodnotu vlastnosti duha bychom mohli předefinovat třeba takto:

duha: infrared red orange yellow green blue indigo violet ultraviolet;

Nyní máme pro vlastnost duha novou hodnotu, tentokrát se skládá z devíti klíčových slov. Přestože je název obou vlastností stejný, jejich hodnoty jedinečné a liší se od sebe jako nula a jedna.

Jak jste sami viděli, klíčová slova CSS se oddělují mezerami – s jednou výjimkou. V CSS vlastnosti font je přesně jedno místo, kde se dají dvě konkrétní klíčová slova oddělit lomítkem (/). Ukázka:

h2 {font: large/150% sans-serif;}

Lomítko odděluje klíčová slovo, jimiž se nastavuje velikost fontu prvku a výška řádku. Je to jediné mís-to, kde je v deklaraci font povolené lomítko. Všechna ostatní klíčová slova, která jsou povolena pro vlastnost font, se oddělují mezerou.


Toto byly pouze základní prosté deklarace, protože mohou být mnohem složitější. V příštím oddílu se začnete postupně dozvídat, jak mohutné mohou stylové předpisy CSS být.

SeskupováníProzatím jste se naučili jen zcela jednoduché techniky – zatím jste aplikovali jediný styl na jediný selektor. Co když ale chcete aplikovat stejný styl na několik prvků? V takovém případě můžete po-užít více než jeden selektor, nebo na prvek (nebo skupinu prvků) aplikovat více stejných stylů.

Seskupování selektorůŘekněme, že potřebujete, aby měly prvky h2 a odstavce šedý text. Nejjednodušeji se s tím vypořá-dáte pomocí následující deklarace:

h2, p {color: gray;}

Tím, že jste na levou stranu pravidla uvedli selektory h2 a p a oddělili je čárkou, definovali jste pra-vidlo, ve kterém se styly uvedené napravo ({color: gray;}) aplikují na prvky odkazované oběma selektory. Čárka říká prohlížeči, že v pravidlu jsou dva různé selektory. Kdybyste čárku neuvedli, mělo by pravidlo úplně jiný význam. Vysvětlím to později v oddílu " Selektory následníka".

V podstatě neexistuje žádný limit na to, kolik selektorů můžete seskupit dohromady. Chcete-li na-příklad zobrazit velký počet prvků šedou barvou, mohli byste použít pravidlo podobné tomuto:

body, table, th, td, h1, h2, h3, h4, p, pre, strong, em, b, i {color: gray;}

Seskupování umožňuje autorům drasticky zredukovat některé druhy přiřazování stylů, takže se stylový předpis podstatně zkrátí. Následující alternativy produkují totéž, ale určitě je na první po-hled jasné, co se napíše rychleji:

h1 {color: purple;}

h2 {color: purple;}

h3 {color: purple;}

h4 {color: purple;}

h5 {color: purple;}

h6 {color: purple;}

h1, h2, h3, h4, h5, h6 {color: purple;}

Seskupování také umožňuje některé zajímavé volby. Například – všechny tři skupiny pravidel v ná-sledujícím výpisu jsou ekvivalentní – každá z nich v podstatě jen ukazuje jiný způsob, jak se dají seskupovat selektory a jejich deklarace:

/* skupina 1 */

h1 {color: silver; background: white;}


h2 {color: silver; background: gray;}

h3 {color: white; background: gray;}

h4 {color: silver; background: white;}

b {color: gray; background: white;}

/* skupina 2 */

h1, h2, h4 {color: silver;}

h2, h3 {background: gray;}

h1, h4, b {background: white;}

h3 {color: white;}

b {color: gray;}

/* skupina 3 */

h1, h4 {color: silver; background: white;}

h2 {color: silver;}

h3 {color: white;}

h2, h3 {background: gray;}

b {color: gray; background: white;}

Každá ze skupin vede na výsledky, které vidíte na obrázku 2-5. (Ve stylech se používají seskupené deklarace – ty podrobně vysvětlím v nadcházejícím oddílu "Seskupování deklarací".)

Obrázek 2-5. Ať už použijete kterýkoliv z těchto tří stylových předpisů, výsledek bude stejný.

Univerzální selektorCSS 2 zavedlo nový jednoduchý selektor, kterému se říká univerzální selektor. Značí se hvězdičkou (*). Odpovídá všem prvkům – je to tedy něco jako zástupný symbol. Například – chcete-li mít v dokumentu všechny prvky červené, napište toto:

* {color: red;}


Tato deklarace je ekvivalentní skupině selektorů, kde byste vypsali všechny prvky, které se vyskytují ve vašem dokumentu. Univerzální selektor umožňuje v naší ukázce přiřadit vlastnosti color hod-notu red pro všechny prvky v dokumentu pomocí krátkého pravidla. Dávejte si ale pozor: přestože je univerzální selektor pohodlný, může mít nečekané důsledky. Probereme to v příští kapitole.

Seskupování deklaracíProtože můžete selektory seskupovat do jediného pravidla, plyne z toho, že můžete také seskupovat deklarace. Předpokládejme, že chcete, aby byly všechny prvky h1 purpurové, s textem 18 pixelů vy-sokým ve fontu Helvetica a s pozadím aqua (chcete čtenáře oslnit a je vám jedno, zdali oslepnou). Pak byste své styly mohli napsat takhle:

h1 {font: 18px Helvetica;}

h1 {color: purple;}

h1 {background: aqua;}

Ale takhle je to těžkopádné – představte si, že byste měli vytvářet takovéhle seznamy pro prvek, který si nese 10 či 15 stylů! Lepší je seskupit deklarace dohromady:

h1 {font: 18px Helvetica; color: purple; background: aqua;}

Má to přesně stejný efekt jako styl se třemi řádky výše. Připomínám, že středníky na konci jed-notlivých deklarací jsou nezbytné, když deklarace seskupujete. Prohlížeče ignorují ve stylových předpisech prázdné znaky a uživatelský agent musí dostat korektní syntaxi, jinak nebude schopen stylový předpis správně analyzovat. Bez obav ovšem můžete – kvůli lepší přehlednosti – stylové předpisy všelijak graficky rozvrhnout:

h1 {

font: 18px Helvetica;

color: purple;

background: aqua; }

Pokud zapomenete na druhý středník, bude uživatelský agent stylový předpis interpretovat takto:

h1 {

font: 18px Helvetica;

color: purple background: aqua; }

Protože background není platná hodnota pro color, a protože pro color se může uvádět jen je-diné klíčové slovo, bude uživatelský agent celou deklaraci color ignorovat (včetně background: aqua;). Některé prohlížeče možná vybarví text všech prvků h1 purpurově, bez světle-zelenomod-rého pozadí (barva aqua), nicméně je mnohem více pravděpodobnější, že prvek h1 se purpurovou barvou nezbarví vůbec. Budou zobrazeny výchozí barvou (což je obvykle černá) a bez barevného pozadí. (Deklarace font: 18px Helvetica; nicméně fungovat bude, protože byla řádně ukonče-na středníkem.)


Přestože není povinné uvádět středník za poslední deklarací pravidla, je dobrým zvykem to dělat. Zapr-vé – vypěstujete si návyk ukončovat každou svoji deklaraci středníkem, protože jeho opominutí bude jednou z nejčastějších chyb při realizaci. Zadruhé – rozhodnete-li se přidat do pravidla další deklara-ci, nemusíte se strachovat, že na ten středník v původně poslední deklaraci zapomenete. A konečně, některé starší prohlížeče (jako je Internet Explorer 3.x) vykazují značnou tendenci, že je poplete, když není v pravidle uveden středník za poslední deklarací. Všem uvedeným potenciálním potížím snadno předejdete – stačí vždy na konec deklarace doplnit středník.

Podobně jako seskupování selektorů, je i seskupování deklarací pohodlným způsobem, jak docílit, aby stylové předpisy byly krátké, výmluvné a snadno se udržovaly.

Seskupování obojíhoUž víte, že se selektory dají seskupovat, a rovněž umíte i seskupovat deklarace. Zkombinujete-li v pravidlech oba druhy seskupování, dokážete definovat velmi složité styly s několika málo příkazy. Co když třeba chcete přiřadit všem záhlavím v dokumentu nějaké komplikované styly a navíc si přejete, aby se na všechna záhlaví aplikovaly stejné styly? Uděláte to podle následujícího vzoru:

h1, h2, h3, h4, h5, h6 {color: gray; background: white; padding: 0.5em;

border: 1px solid black; font-family: Charcoal, sans-serif;}

Selektory jste seskupili, takže styly na pravé straně pravidla se budou aplikovat na všechny uvedené nadpisy. Kromě toho jste seskupili i deklarace, což znamená, že všechny uvedené styly se budou aplikovat na všechny selektory uvedené na levé straně pravidla. Výsledek vidíte na obrázku 2-6.

Obrázek 2-6. Seskupení selektorů i deklarací.

KAPITOLA 5 Písma

Autoři specifikace CSS bez diskuse uznávají, že výběr nejpříhodnějšího písma je oblíbenou (a zá-roveň klíčovou) schopností. Ostatně – kolik stránek je zaneřáděno desítkami, či dokonce stovkami značek ? A skutečně – sekce "Font Properties" specifikace CSS začíná větou: "Nastavování vlastností písma je jedním z nejběžnějších využití stylových předpisů".

Navzdory této důležitosti není v současné době k dispozici žádný způsob, který by zaručoval kon-zistentní práci s fonty na webu, protože neexistuje jednotný způsob pro popis fontů a jejich variant. Například písma Times, Times New Roman a TimesNR si mohou být velmi podobná nebo dokon-ce stejná, ale jak to má chudák uživatelský agent vědět? Autor sice může v dokumentu specifikovat "TimesNR", ovšem co se stane, když si bude dokument prohlížet uživatel, na jehož stroji není tento konkrétní font nainstalovaný? A pokud je náhodou na počítači nainstalovaný Times New Roman, uživatelský agent nemá žádnou šanci se dozvědět, že tyhle dva fonty jsou vzájemně zaměnitelné. A věříte-li, že se dá u čtenáře nějaký konkrétní font vynutit, tak na to rychle zapomeňte.

Přestože CCS2 definovalo výbavu pro fonty, které bude možné stahovat, webové prohlížeče je ne-implementovaly uspokojivě, a kromě toho čtenář může vždy stahování fontů zamítnout, když chce získat co nejvyšší výkon. CSS tak neposkytuje žádnou definitivní kontrolu nad fonty – nemá ji o nic větší než nějaký textový editor: když někdo načte dokument Microsoft Office, který jste vytvořili, jeho zobrazení závisí na tom, jaké fonty má dotyčná osoba nainstalované. Nemá-li stejné fonty jako vy, bude dokument vypadat jinak. Totéž platí pro dokumenty navrhované pomocí CSS.

S názvy písem začnou vznikat zmatky tehdy, vstoupíte-li do světa variant písma, jako jsou tučný text nebo kurzíva. Většina lidí sice ví, jak vypadá text psaný kurzívou (italic), ale jen málo z nich dokáže vysvětlit, jak a čím se liší od nakloněného textu, i když jsou mezi nimi rozdíly. "Nakloně-ný" (slanted) není jediný další termín pro text psaný kurzívou – existuje řada dalších, mj. oblique, incline (nebo inclined), cursive či kursiv (v češtině to vyjadřují slova šikmý, kosý, skloněný apod.). Takže – jedno písmo má variantu, která se dejme tomu jmenuje TimesItalic, ale jiné písmo zase po-užívá název GeorgiaOblique. Ačkoliv jsou obě varianty možná více či méně ekvivalentní s kurzívou (italic), v názvech jsou označeny zcela odlišně. A obdobně – tučné písmo se může nazývat bold, black nebo heavy, přičemž tyto termíny mohou, ale nemusejí znamenat totéž.

122 Kapitola 5 – Písma

CSS se pokouší poskytnout jistý mechanismus pro vyřešení všech těchto otázek spojených s pís-mem, kompletní řešení však poskytnout nemůže. Nejkomplikovanějšími částmi ohledně zpraco-vání písma v CSS je soulad rodin písma a soulad tučnosti písma, přičemž z hlediska obtížnosti úlohy jsou na třetím místě výpočty velikosti písma. Další aspekty písma, k nimž se obrací CSS, jsou řezy písma, jako je kurzíva (italics), a různé varianty písma, jako jsou kapitálky – tohle jsou ovšem věci, které jsou docela bezproblémové. Různé aspekty řezů písma je možné hromadně nastavovat pomocí jediné vlastnosti font, kterou probereme v této kapitole později. Nejprve ale prodiskutu-jeme pojem rodina písma, protože je to ten nejzákladnější krok k výběru správného písma pro váš dokument.

Rodiny písmaJak jsme prodiskutovali výše, existuje řada způsobů, jak označit různými názvy to, co ve skuteč-nosti znamená jedno a totéž písmo. CSS se udatně pokouší pomoci uživatelským agentům, aby se v tom zmatku lépe vyznali. Ostatně – to, co my chápeme jako "písmo", se může skládat z mnoha různých variant, jimiž se popisuje tučné písmo, text kurzívou atd. Například asi dobře znáte písmo Times. Ovšem Times je ve skutečnosti kombinace mnoha variant, mezi něž patří TimesRegular, TimesBold, TimesItalic, TimesOblique, TimesBoldItalic, TimesBoldOblique a další. Každá z těch-to variant písma Times je skutečným existujícím řezem písma, nicméně my pod pojmem Times chápeme všechny tyto varianty dohromady. Jinak řečeno – Times je ve skutečnosti rodina písma, nikoliv pouze jediné písmo. Toto je velmi důležité pro zapamatování.

Kromě jednotlivých rodin písem, jako jsou Times, Verdana, Helvetica nebo Arial, definuje CSS pět všeobecných rodin písem:

� Písma patková (serif)

Tato písma jsou proporcionální a mají patky. Písmo je proporcionální, mají-li jednotlivé zna-ky písma různou šířku, protože jsou různě veliká. Například – malé písmeno "i" a malé pís-meno "m" jsou různě široké. (I tento odstavec knihy je napsaný proporcionálním písmem.) Patky jsou ozdoby na konci tahů, z nichž se skládá daný znak, například ty malinké čárečky nahoře a dole u písmene "l", nebo konce obou nožiček velkého písmene "A". Mezi patková písma patří například Times, Georgia a New Century Schoolbook.

� Písma bezpatková (sans-serif)

Tato písma jsou proporcionální a nemají patky. Patří mezi ně Helvetica, Geneva, Verdana, Arial a Univers.

� Neproporcionální písma (monospace)

Jak jejich název říká, nejsou proporcionální. Obvykle se pomocí nich simuluje podoba tex-tu vytvářeného na psacím stroji, výstup ze zastaralých jehličkových tiskáren, nebo dokonce zobrazení na stařičkých terminálech. V těchto písmech jsou všechny znaky přesně stejně široké, takže malé písmeno "i" a malé písmeno "m" mají stejnou šířku. Některá z písem mají


patky, jiná ne. Má-li písmo jednotnou šířku znaků, klasifikuje se jako neproporcionální (mo-nospace), bez ohledu na to, má-li patky nebo ne. Mezi neproporcionální písma patří Courier, Courier New a Andale Mono. V této knihy je pro výpisy zdrojových kódu použito právě neproporcionální písmo.

� Kurzívní písma (cursive)

Tato písma se pokoušejí emulovat text psaný rukou. Znaky se obvykle většinou skládají z kři-vek a jsou bohatěji zdobená než patková písma. Například velké písmeno "A" může mít dole na nožičkách malé kudrlinky, nebo je rovnou celé tvořeno vlnovkami a kudrlinkami. Mezi kurzívní písma patří Zapf Chancery, Author a Comic Sans.

� Ozdobná písma (fantasy)

Jedná se o písma, které nelze rozumě definovat pomocí jediné charakteristiky kromě té, že se nedají zařadit ani do jedné z rodin uvedených výše. Není jich mnoho a patří mezi ně Wes-tern, Woodblock a Klingon.

Teoreticky by měla každá rodina písem, kterou si uživatel může do počítače nainstalovat, spadat do jedné z těchto pěti všeobecných rodin. V praxi to ovšem může být jinak, i když výjimek je málo a jsou od sebe daleko.

Práce s všeobecnými rodinami písmaKteroukoliv z těchto rodin písma můžete začlenit do svého dokumentu vlastností font-family.

font-familyHodnoty: [[<název-rodiny> | <všeobecná-rodina> ],]* [<název-rodiny> | <všeo-

becná-rodina> ] | inherit

Výchozí hodnota: Specifická pro jednotlivé uživatelské agenty

Aplikuje se na: Všechny prvky

Dědí se: Ano

Vypočtená hodnota: Jak je specifikována

Chcete-li ve vašem dokumentu používat nějaké písmo bez patek, přičemž je vám jedno, které kon-krétní písmo bude použito, pak je vhodná tato deklarace:

body {font-family: sans-serif;}

Toto způsobí, že uživatelský agent vybere nějakou rodinu proporcionálního písma bez patek (jako je Helvetica) a bude ji aplikovat na prvek body. Díky dědění se stejná volba písma bude aplikovat i na všechny prvky, které jsou následníky prvku body – pokud toto nastavení samozřejmě nepotlačí nějaký specifičtější selektor.


I pouze s těmito všeobecnými rodinami písma může autor vytvořit poměrně sofistikovaný stylový předpis. Například následující sadu pravidel ilustruje obrázek 5-1.

body {font-family: serif;}

h1, h2, h3, h4 {font-family: sans-serif;}

code, pre, tt, span.input {font-family: monospace;}

p.signature {font-family: cursive;}

Obrázek 5-1. Různé rodiny písem.

Tento stylový předpis zajistí, že většina dokumentu bude zobrazena v nějakém písmu s patkami (jako je Times), kromě těch odstavců, které mají atribut class nastavený na signature, protože tyto odstavce se budou realizovat nějakým kurzívním písmem, mezi něž patří Author. Nadpisy prvních čtyř úrovní budou nějakým písmem bez patek, jako je Helvetica, zatímco prvky code, pre, tt a span.input budou zobrazeny nějakým neproporcionálním písmem, jako je Courier (mimo-chodem – neproporcionálním písmem jsou v této knize vysázeny všechny zdrojového kódy).

Specifikace rodiny písmaAutor ovšem může chtít mnohem konkrétněji vyjádřit své preference, co se týče písem, v nichž se mají zobrazovat texty prvků z jeho dokumentu. V obdobném duchu může chtít uživatel vytvořit svůj vlastní stylový předpis, v němž bude definovat zcela konkrétní fonty, v nichž se mají zobrazo-vat dokumenty, které si prohlíží. V obou případech stále mluvíme o vlastnosti font-family.

Předpokládejme na chvíli, že chce mít všechny nadpisy h1 zobrazeny písmem Georgia. Nejjedno-dušší pravidlo, jak toho docílit, vypadá takhle:

h1 {font-family: Georgia;}


Toto způsobí, že uživatelský agent zobrazí v dokumentech všechny nadpisy h1 v písmu Georgia, jak to ukazuje obrázek 5-2:

Obrázek 5-2. Prvek nadpisu h1 v písmu Georgia.

Toto pravidlo samozřejmě předpokládá, že uživatelský agent bude mít rodinu písma Georgia k dis-pozici. Pokud ne, uživatelský agent nebude schopen použít toho písmo. Pravidlo jako takové se ovšem nebude ignorovat. Nepodaří-li se agentovi najít font s názvem "Georgia", nezbude mu nic jiného, než zobrazit prvky h1 ve výchozím fontu uživatelského agenta.

Ale všechno ještě není ztraceno. Když zkombinujete názvy konkrétních fontů s názvy všeobecných rodin, dají se vytvořit vyhovující dokumenty, které mohou do značné míry splňovat vaše záměry. Pokračujme v předchozím příkladu. Následující značkování sdělí uživatelskému agentovi, aby po-užil rodinu Georgia, je-li dostupná, a pokud není, aby použil nějaký jiný patkový font:

h1 {font-family: Georgia, serif;}

Nemá-li čtenář nainstalovanou rodinu písma Georgia, ale má Times, bude moci uživatelský agent použít pro nadpisy h1 rodinu Times. Přestože Times není přesně totéž co Georgia, obě rodiny písem se sobě dost podobají.

Z tohoto důvodu vás důrazně vybízím, abyste vždy uvedli – jako součást každé deklarace font-fa-mily – nějakou všeobecnou rodinu písma. Tím poskytnete uživatelskému agentovi mechanismus zpětné vazby, který mu umožní vybrat alternativu, když nemá k dispozici přesně shodný font. Ta-kové záložní opatření je prospěšné zejména v prostředí sahajícím přes několik platforem, protože v něm nemáte žádnou šanci zjistit, kdo má nainstalované jaké fonty. Je jasné, že na každém stroji s Windows budou po celém světě nainstalované písma Arial a Times New Roman, ale na někte-rých (zejména starších) strojích Macintosh určitě nebudou. Totéž pravděpodobně platí pro stroje s Unixem. A naopak – zatímco na všech novějších strojích Macintosh jsou běžné fonty MarkerFelt a Charcoal, není pravděpodobné, že by některý z těchto fontů měli k dispozici uživatelé Windows a Unix, a ještě mnohem méně pravděpodobné je, že by měli rovnou oba. Několik ukázek:

h1 {font-family: Arial, sans-serif;}

h2 {font-family: Charcoal, sans-serif;}

p {font-family: TimesNR, serif;}

address {font-family: Chicago, sans-serif;}

Vyznáte-li se alespoň trochu v písmech, určitě vás napadla řada obdobných rodin, jimiž se dá zob-razit daný typ prvku. Řekněme, že chcete mít všechny odstavce v dokumentu zobrazené pomocí Times, nicméně v případě nutnosti byste akceptovali i TimesNR, Georgia, New Century School-Book a New York (všechny zmíněné písma mají patky). Takže nejprve rozhodněte o jejich pořadí


(tedy to, které písmo se má hledat jako první, které jako druhé, až když to první písmo není k dis-pozici atd.), pak je sestavte do řetězce a oddělte pomocí čárek:

p {font-family: Times, TimesNR, 'New Century Schoolbook',

Georgia, 'New York', serif;}

Na základě tohoto seznamu bude uživatelský agent hledat fonty v tom pořadí, v jakém jste je uved-li. Nenajde-li žádný z nich, jednoduše použije takový patkový font, který je k dispozici.

Apostrofy v názvech rodin písmaMožná jste si v předchozím příkladu všimli, že názvy některých rodin jsou v apostrofech. Apo-strofy jsou v deklaraci font-family nutné tehdy, když se název rodiny skládá z několika slov, jako je písmo "New York", nebo když se v názvu vyskytují symboly, jako # nebo $. V obou případech by měl být celý název písma v apostrofech, aby uživatelský agent nezmatkoval, protože jinak mu nemusí být jasné, co vlastně tvoří název fontu. (Možná si myslíte, že by stačily čárky, ale nestačí.) Takže – pokud bychom měli písmo s názvem Karrank%, musíte dát jeho název do apostrofů:

p {font-family: Wedgie, 'Karrank%', Klingon, fantasy;}

Jestliže apostrofy neuvedete, existuje nebezpečí, že uživatelský agent bude tento konkrétní název zcela ignorovat, přestože bude schopen zpracovat zbytek pravidla. Připomínám, že v současné době není ve specifikaci CSS 2.1 stanoveno jako povinné dávat do apostrofů názvy, které obsahují symboly – pouze se to doporučuje, což je v CSS velmi blízko tomu, čemu se tam říká "nejlepší prak-tiky". Dále se doporučuje vkládat do apostrofů názvy fontů, které obsahují mezery. Jediný povinný požadavek na apostrofy je u fontů, jejichž názvy se shodují s klíčovými slovy. Takže – voláte-li nějaký font, jehož skutečný název je cursive, musíte dát tento název do apostrofů.

Je evidentní, že názvy fontů, které jsou tvořeny jediným slovem – takové, které nekolidují s ně-jakým klíčovým slovem pro font-family – se nemusejí dávat do apostrofů. Všeobecné názvy rodin (jako jsou serif, monospace atd.) by se nikdy neměly dávat do apostrofů, odkazují-li se na skutečné názvy všeobecných rodin. Dáte-li do apostrofů všeobecný název rodiny, bude uživatelský agent předpokládat, že požadujete konkrétní font s tímto názvem (například font s názvem "serif "), a nikoliv všeobecnou rodinu patkových písem.

Místo apostrofů se dají také použít uvozovky. Je potřeba ale dávat pozor, pokud umisťujete pravidlo font-family do atributu style, protože tam musíte použít jiné oddělovače, než jaké jste použili pro samotný atribut (obvykle uvozovky). A proto – pokud jste uzavřeli pravidlo font-family do uvozovek, musíte uvnitř pravidla použít apostrofy, jako je tomu v následujícím značkování:

p {font-family: sans-serif;} /* nastaví odstavce na bezpatkový font */



 ... 



 ... 


Použijete-li uvozovky za těchto okolností, narušíte syntaxi atributu, jak to předvádí obrázek 5-3:

Obrázek 5-3. Nebezpečí skrývající se za nesprávnými oddělovači.

Tučnost písmaI když si to možná neuvědomujete, tučnost písma důvěrně znáte už nyní – nejběžnějším příkladem zdůrazněného textu je tučný řez písma (tučný text). CSS ovšem nabízí mnohem větší kontrolu (přinejmenším teoreticky) nad tučností textu pomocí vlastnosti font-weight.

font-weightHodnoty: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |

700 | 800 | 900 | inherit

Výchozí hodnota: normal


Dědí se: Ano

Vypočtená hodnota: Jedna z číselných hodnot (100 atd.) nebo jedna z číselných hodnot plus jedna z relativních hodnot (bolder nebo lighter)

Všeobecně řečeno – čím je písmo tučnější, tím je tmavší a vypadá "macatější". Existuje mnoho způsobů, jimiž se označuje tučnější písmo. Například rodina písma Zurich má řadu variant, jako jsou Zurich Bold, Zurich Black, Zurich UltraBlack, Zurich Light a Zurich Regular. Každá z těchto variant je založena na tomtéž základním písmu, nicméně každá varianta má jinou tučnost.

Takže řekněme, že chcete v nějakém dokumentu použít všechny úrovně tučnosti písma Zurich. Dá se na ně odkazovat přímo (prostřednictvím vlastnosti font-family), nicméně v praxi tento způ-sob pravděpodobně vůbec nebudete používat. Ostatně by nebylo nijak příjemné, kdybyste museli psát svůj stylový předpis takto:

h1 {font-family: 'Zurich UltraBlack', sans-serif;}

h2 {font-family: 'Zurich Black', sans-serif;}

h3 {font-family: 'Zurich Bold', sans-serif;}

h4, p {font-family: 'Zurich', sans-serif;}

small {font-family: 'Zurich Light', sans-serif;}


Pokud pomineme, že je poměrně pracné psát stylový předpis v tomto duchu, je důležité vědět, že tento stylový předpis bude fungovat pouze u těch uživatelů, kteří mají nainstalované patřičné fonty. Klidně se s vámi vsadím, že většina uživatelů je mít nebude. Mnohem rozumnější by bylo, kdybychom mohli pro celý dokument specifikovat pouze jedinou rodinu písma, a pak přiřadit jed-notlivým prvkům různé tučnosti. Toto je možné teoreticky udělat – pomocí hodnot vlastnosti font-weight. Podívejte se na následující triviální deklaraci font-weight:

b {font-weight: bold;}

Tato deklarace říká, že prvek b se má zobrazovat pomocí tučného řezu písma, nebo – pokud to mám říci jinak – nějakým písmem, které je tučnější než normální písmo dokumentu. Na to jsme zvyklí, protože b opravdu způsobí, že text se zobrazí tučným řezem písma.

Ve skutečnosti se ale stane to, že pro zobrazení prvku b se použije nějaká tučnější varianta písma. Tedy – máte-li nějaký odstavec, který je zobrazen písmem Times, a část textu z odstavce je uza-vřena ve značkách b, v odstavci vlastně používáte dvě varianty téhož písma: Times a TimesBold. Normální text se zobrazí písmem Times, text ve značkách b pak písmem TimesBold.

Jak tučnosti fungujíAbyste porozuměli tomu, jak uživatelský agent určuje tučnost dané varianty písma (nemluvě o tom, jak se tučnost dědí), bude nejjednodušší, když začneme hovořit o klíčových slovech 100 až 900. Tato klíčová slova (resp. čísla) byla definovaná proto, aby zmapovala relativně běžnou schop-nost návrhu písma, kdy je písmu přiděleno devět úrovní tučnosti. Například – OpenType používá číselnou škálu devíti hodnot. Má-li nějaký font v sobě zabudované tyto úrovně tučnosti, pak se výše uvedená čísla mapují přímo na předdefinované úrovně, kdy 100 je nejméně tučná (nejlehčí) varianta, přičemž 900 je nejtučnější (nejtěžší).

A skutečně – za těmito čísly není žádná konkrétní tučnost. Specifikace CSS říká jen to, že každému číslu odpovídá nejméně taková tučnost, jaká je asociována s předchozím číslem. Takže tučnosti 100, 200, 300 a 400 se mohou mapovat na stejnou (relativně málo tučnou) variantu. Hodnoty 500 a 600 mohou odpovídat nějaké tučnější variantě písma. A konečně – zbývající hodnoty 700, 800 a 900 mohou produkovat stejnou, ovšem velmi tučnou variantu písma. Nebude-li žádné klíčové slovo odpovídat variantě, které je méně tučná než je ta, kterou jsme uváděli výše, bude vše v nej-lepším pořádku.

Často se stává, že tato čísla se specifikují tak, že jsou ekvivalentní s určitými běžnými pojmenova-nými variantami (nemluvě o dalších hodnotách pro font-weight). 400 může být ekvivalentem pro normal, 700 odpovídá bold. Zbývající čísla nemusejí odpovídat žádné z ostatních hodnot pro font-weight, mohou však odpovídat běžným názvům variant. Existuje-li nějaká varianta písma nazvaná třeba Normal, Regular, Roman nebo Book, sdruží se s ní číslo 400, přičemž jakákoliv va-rianta s názvem "Medium" se sdruží s číslem 500. Je-li však varianta "Medium" jedinou dostupnou variantou, nepřiřadí se k 500, ale k 400.

KAPITOLA 11 Rozvržení tabulek

Asi jste nyní knihu tuto otočili, abyste se podívali na její titul, protože nevěřícně zíráte. Kapitola pojmenovaná jako "Navrhování tabulek? Tomu jsme se přeci chtěli za každou cenu vyhnout!" Tahle kapitola ovšem není o tom, jak se používají tabulky pro potřeby layoutu. Je o způsobech, jimiž se používají tabulky uvnitř CSS, což je mnohem komplikovanější záležitost, než by se mohlo na první pohled zdát. To je také důvod, proč si této téma zasloužilo samostatnou kapitolu.

Tabulky jsou jedinečné, pokud je porovnáme se zbývajícími částmi dokumentu. Od CSS 2.1 patří do výbavy samotných tabulek možnost sdružovat velikost prvků s jinými prvky – aby všechny buň-ky v daném řádku měly stejnou výšku, bez ohledu na to, jak mnoho (nebo naopak málo) obsahu jednotlivé buňky obsahují. Totéž platí pro šířky buněk daného sloupce. V rozvržení dokumentu neexistuje žádná taková jiná situace, kdy by prvky z různých částí stromu dokumentu mohly tímto způsobem přímo ovlivňovat rozměry a rozvržení jiných prvků.

Jak ostatně sami uvidíte – za tuto jedinečnost se platí se dodatečnými náklady, spoustou rozdílného chování a pravidly, která se aplikují pouze na tabulky. V průběhu této kapitoly se podíváme, jak se tabulky vizuálně sestavují, dozvíte se dva způsoby, jimiž se vytváří orámování buněk, a také se seznámíte s mechanismy, které ovlivňují výšku a šířku tabulek a jejich interních prvků.

Formátování tabulkyNež se začneme starat o to, jak se orámují buňky a určí rozměry tabulky, musíme nejprve probrat nezbytné základy, například to, jak se tabulky sestavují a jaké jsou vzájemné vztahy mezi jednotli-vými prvky uvnitř tabulky. Tomuto se říká formátování tabulky (table formatting), a je to něco úpl-ně jiného než rozvržení tabulky (table layout) – to druhé je možné až poté, co proběhlo to první.

378 Kapitola 11 – Rozvržení tabulek

Vizuální uspořádání tabulkyNejprve si musíme ujasnit, jak CSS vykresluje orámování buněk a určuje rozměry tabulek. I když mohou někomu tyto vědomosti připadat jako až příliš základní, jsou tím hlavním klíčem k pocho-pení toho, jak co nejlépe ostylovat tabulky.

CSS rozlišuje mezi prvky tabulky a interními prvky tabulky. V CSS generují interní prvky tabulky pravoúhlé boxy, které mají obsah, výplň a orámování, ale nemají okraje. Proto nejde buňky tabulky od sebe oddělit tak, že jim přidělíte nějaké okraje. Prohlížeč, který pracuje v souladu s CSS, by měl ignorovat všechny pokusy o přidělení okraje buňkám, řádkům nebo jakýmkoliv jiným interním prvkům tabulky (výjimkou jsou titulky, captions, které probereme v této kapitole později.)

Uspořádání tabulek ovlivňuje šest pravidel uvedených dále. Jejich základem je "mřížka buněk", což je oblast mezi čarami mřížky, kde se vykresluje tabulka. Podívejte se na obrázek 11-1, kde jsou dvě tabulky obsahující různě pojmenované buňky. Mřížku buněk vyznačují přerušované čáry.

Obrázek 11-1. Základ rozvržení tabulky formuje mřížka buněk.

V prosté tabulce o rozměrech dvakrát dvě buňky, jako je tabulka na obrázku 11-1 vlevo, odpovídá mřížka buněk samotným buňkám. U komplikovanějších tabulek, jako je ta na obrázku 11-1 na-pravo, odpovídají hrany mřížky buněk případnému orámování buněk, přičemž také protínají ty buňky, které se klenou přes několik řádků nebo sloupců.

Mřížky buněk jsou v podstatě pouze teoretickou konstrukcí a nedají se stylovat. Přes objektový model dokumentu se k nim dokonce ani nedá přistupovat. Prostě se jimi pouze popisuje, jak se tabulky sestavují pro ostylování.

Pravidla pro uspořádání tabulky � Každý řádkový box obsahuje jediný řádek s buňkami. Všechny řádkové boxy v tabulce na-

plní tabulku zeshora dolů v pořadí, v jakém jsou uvedeny ve zdrojovém HTML dokumentu. Výjimkou jsou řádkové boxy záhlaví (resp. zápatí tabulky), které přijdou na začátek (resp. na konec tabulky). Tabulka tedy obsahuje tolik řádků, kolik je použito prvků pro řádky.

� Box skupiny řádků obsahuje stejné buňky jako řádkové boxy, které tato skupina obsahuje.

� Sloupcový box obsahuje buňky jednoho nebo několika sloupců. Všechny sloupcové boxy se kladou vedle sebe v pořadí, v jakém jsou uvedeny v kódu. První sloupcový box je v jazycích psaných zleva doprava vlevo, v jazycích psaných zprava doleva je vpravo.

� Box skupiny sloupců obsahuje stejné buňky jako sloupcové boxy, které skupina obsahuje.


� Přestože se buňky mohou klenout přes několik řádků nebo sloupců, CSS nedefinuje, jak se to má provést. Toto definuje jazyk samotného dokumentu. Každá buňka, která se klene přes několik řádků (nebo sloupců), vytváří pravoúhlý box mřížky jedné nebo více buněk na šíř-ku a na výšku. Horní řádek tohoto obdélníku je v řádku, který je rodičem buňky. Obdélník buňky musí být v jazycích psaných zleva doprava umístěn co nejvíce nalevo, ale nesmí pře-krývat žádný box jiné buňky. V těchto jazycích musí být rovněž vpravo od všech buněk téhož řádku, které jsou v dokumentu uvedené před ním. V jazycích psaných zprava doleva musí být buňka klenoucí se přes více řádků (nebo sloupců) co nejvíce napravo (ale nesmí překrýt žádnou jinou buňku), a musí být nalevo od všech buněk téhož řádku, které za ním následují ve zdrojovém dokumentu.

� Box buňky nemůže sahat za box posledního řádku tabulky nebo skupiny řádků. Když struk-tura tabulky vytvoří takovou situaci, musí se buňka zkrátit tak, aby se vešla do tabulky nebo do skupiny řádků, do které patří.

Specifikace CSS vás sice odrazuje od pozicování buněk tabulky a jiných interních prvků tabulky, nic-méně to nezakazuje. Ovšem pozicování nějakého řádku, který obsahuje buňky klenoucí se přes něko-lik řádků, může dramaticky pozměnit rozvržení tabulky např. tím, že tento řádek se z tabulky zcela od-straní. To znamení, že v rozvržení ostatních řádků by se neměly brát v úvahu ty buňky, které do těchto řádků zasahovaly z odstraněného řádku.

Podle definice jsou buňky pravoúhlé, ale nemusejí mít stejnou velikost. Všechny buňky v nějakém sloupci musí mít stejnou šířku, všechny buňky v nějakém řádku musí mít stejnou výšku, ovšem výška buněk může být u jednotlivých řádků různá. Obdobně mohou být buňky různých sloupců různě široké (jeden sloupec tak může být široký 1em, jiný naopak 2em).

Vezmete-li výše uvedená pravidla v úvahu, možná se nyní ptáte, jak přesně se dozvíte (nebo uživa-telský agent), které prvky tabulky fungují jako buňky a které ne? To zjistíte následujícím oddílu.

Hodnoty display pro tabulkuV HTML se snadno zjistí, které prvky jsou součástí tabulky, protože zpracování různých tabulko-vých prvků (jako tr a td) je již zabudované do samotných prohlížečů. Ovšem v XML není žádný způsob, jak se interně dozvědět, které prvky jsou součástí tabulky (a které by se tudíž měly chovat odpovídajícím způsobem). A tehdy vstupuje do hry kolekce hodnot vlastnosti display, které jsou určeny pro práci s tabulkami.


displayHodnoty: none | inline | block | inline-block | list-item | run-in | table |

inline-table | table-row-group | table-header-group | table--footer-group | table-row | table-column-group | table-co-lumn | table-cell | table-caption | inherit

Výchozí hodnota: inline


Dědí se: Ne

Vypočtená hodnota: Různě pro plovoucí (obtékané), pozicované a kořenové prvky (viz CSS 2.1, sekce 9.7); jinak tak, jak je specifikována.

Poznámka: V CSS 2 se objevily hodnoty compact a marker, které ovšem byly z CSS 2.1 zase vyhozeny, protože se nedočkaly širší podpory.

V této kapitole se soustředíme pouze na hodnoty vztahující se k tabulkám, protože ostatní (block, inline, inline-block, run-in a list-item) se probírají v jiných kapitolách. Takže nyní násle-duje pouze přehled hodnot vztahujících se k tabulce.

� table

Hodnota specifikuje, že prvek definuje tabulku jako blokový prvek. Takže definuje pravoúhlý blok, který generuje blokový box. Odpovídajícím prvkem v HTML, což není žádným pře-kvapením, je table.

� inline-table

Hodnota specifikuje, že prvek definuje tabulku jako inline prvek. To znamená, že prvek defi-nuje pravoúhlý blok, který generuje inline box. Nejbližší analogická hodnota, která se netý-ká tabulek, je inline-block. Nejbližším prvkem HTML je table, i když tabulky v HTML standardně nebývají inline prvky.

� table-row

Specifikuje, že prvek slouží jako řádek s buňkami. Odpovídajícím prvkem v HTML je tr.

� table-row-group

Hodnota specifikuje, že prvek tvoří skupina jednoho nebo více řádků. Odpovídajícím prv-kem v HTML je tbody.

� table-header-group

Skupina řádků záhlaví. Tato hodnota je něco velmi podobného jako table-row-group, ovšem z hlediska vizuálního formátování se tato skupina řádků záhlaví vždy zobrazí před všemi ostatními řádky a skupinami řádků, a také za všemi horními titulky. Při tisku – pokud tabulka potřebuje k vytištění více než jednu stránku – může uživatelský agent řádky záhla-ví zopakovat na každé stránce nahoře. Specifikace ovšem neřeší, co se má stát, přiřadíte-li


table-header-group více prvkům. Skupina záhlaví může obsahovat více než jeden řádek. Ekvivalentní prvek v HTML je thead.

� table-footer-group

Skupina řádků zápatí. Tato hodnota je něco velmi podobného jako table-header-group, ovšem skupina řádků zápatí se vždy zobrazí až za všemi ostatními řádky a skupinami řádků, a před všemi dolními titulky. Při tisku – pokud tabulka potřebuje k vytištění více než jednu stránku – může uživatelský agent zopakovat řádky zápatí na každé stránce dole. Specifikace ovšem neřeší, co se má stát, přiřadíte-li table-footer-group více prvkům. Skupina záhlaví může obsahovat více než jeden řádek. Ekvivalentní prvek v HTML je tfoot.

� table-column

Hodnota deklaruje, že prvek popisuje sloupec s buňkami. V termínech CSS se prvky s touto hodnotou vlastnosti display vizuálně nerealizují (jako kdyby měly hodnotu none). Jejich primárním účelem je vám usnadnit práci, když definujete, jak se mají buňky ve sloupci pre-zentovat. Ekvivalentní prvek v HTML je col.

� table-column-group

Hodnota deklaruje, že prvek tvoří skupina jednoho nebo více sloupců. Podobně jako u prv-ků table-column, se ani prvky table-column-group vizuálně nerealizují, tato hodnota je však užitečná, když definujete, jak se mají prezentovat prvky ve skupině sloupců. Odpovída-jícím prvkem v HTML je colgroup.

� table-cell

Hodnota specifikuje, že prvek definuje jedinou buňku tabulky. Odpovídajícími prvky v HT-ML jsou td a th.

� table-caption

Tato hodnota definuje titulek tabulky. CSS sice nedefinuje, co se má stát, bude-li mít hodnotu caption více prvků, ale explicitně varuje, že "…autoři by neměli dovnitř prvku table či inline-table klást více než jeden prvek s display: caption".

Rychlý přehled o obecných účincích těchto hodnot si uděláte, když se podíváte na výtah z ukázko-vého stylového předpisu HTML 4.0, který najdete v dodatku C:

table {display: table;}

tr {display: table-row;}

thead {display: table-header-group;}

tbody {display: table-row-group;}

tfoot {display: table-footer-group;}

col {display: table-column;}

colgroup {display: table-column-group;}

td, th {display: table-cell;}

caption {display: table-caption;}


V XML, kde prvky standardně nemají sémantiku display, jsou tyhle hodnoty dost užitečné. Vez-měme například značkování:

<hodnoceni>

<zahlavi>

<popisek>Tým</popisek>

<popisek>Skóre</popisek>

</zahlavi>

<hra sport="Fotbal" uroven="Extraliga">

<tym>

<jmeno>Sparta</jmeno>

<skore>1</skore>

</tym>

<tym>

<jmeno>Slavia</jmeno>

<skore>3</skore>

</tym>

<hra>

</hodnoceni>

Do tabulkové podoby se dají tyto prvky naformátovat pomocí následujících stylů:

hodnoceni {display: table;}

zahlavi {display: table-header-group;}

hra {display: table-row-group;}

tym {display: table-row;}

popisek, jmeno, skore {display: table-cell;}

Jednotlivé buňky je samozřejmě možné stylovat podle potřeby – například dát prvky popisek tučně a prvky skore jako zarovnané doprava.

I když je teoreticky možné přiřazovat hodnoty vlastnosti display vztahující se k tabulkám jakémuko-li prvku v HTML, Internet Explorer včetně IE 7 tuto funkcionalitu nepodporuje.

Nadřazenost řádkůCSS definuje model tabulky s "nadřazeností řádků" (row primacy). Jinak řečeno – tento model předpokládá, že budou vytvářeny takové značkovací jazyky, v nichž se explicitně deklarují řádky. Sloupce se pak budou odvozovat z rozvržení řádků buněk. To znamená, že první sloupec bude skládat z prvních buněk všech řádků, druhý sloupec z druhých buněk všech řádků atd.

V HTML nedělá nadřazenost řádků prakticky žádné problémy, protože se jedná o značkovací jazyk orientovaný na řádky. Větší dopad to ovšem má v XML, protože model nadřazenosti řádků všelijak

Documents

Eric Meyer o CSS - kompletní průvodce