Date post: | 13-Mar-2016 |
Category: |
Documents |
Upload: | zoner-software-as |
View: | 229 times |
Download: | 2 times |
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 <FONT COLOR="gray">...</FONT> takto:
<h2><font color="gray">Text záhlaví h2</font></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 <p> (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;}
50 Kapitola 2 – Selektory
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.
51Eric Meyer o CSS – Kompletní průvodce
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.
52 Kapitola 2 – Selektory
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;}
53Eric Meyer o CSS – Kompletní průvodce
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;}
54 Kapitola 2 – Selektory
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.)
55Eric Meyer o CSS – Kompletní průvodce
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 <FONT FACE="...">? 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í
123Eric Meyer o CSS – Kompletní průvodce
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.
124 Kapitola 5 – Písma
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;}
125Eric Meyer o CSS – Kompletní průvodce
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í
126 Kapitola 5 – Písma
(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 */
<!-- následující ukázka je správná (používají se apostrofy) -->
<p style="font-family: 'Century Schoolbook', Times, serif;"> ... </p>
<!--následující ukázka je NESPRÁVNÁ (používají se uvozovky) -->
<p style="font-family: "Century Schoolbook", Times, serif;"> ... </p>
127Eric Meyer o CSS – Kompletní průvodce
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
Aplikuje se na: Všechny prvky
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;}
128 Kapitola 5 – Písma
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.
379Eric Meyer o CSS – Kompletní průvodce
� 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.
380 Kapitola 11 – Rozvržení tabulek
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
Aplikuje se na: Všechny prvky
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
381Eric Meyer o CSS – Kompletní průvodce
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;}
382 Kapitola 11 – Rozvržení tabulek
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