Eric Meyer o CSS Kompletní průvodce
Eric A. Meyer
CSS: The Definitive Guide, Third Edition Eric 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škerý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 mechanicky, 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 Press Katalogové čí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 distribuová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: knihy@zoner.cz http://www.zonerpress.cz
ISBN 978-80-86815-64-0
Mé ženě a dceři za všechny radosti, které mi přinášejí
Stručný obsah Kapitola 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
Ukázkový stylový předpis HTML 4
543
Dodatek C 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
Základní pravidla
47 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í
Kapitola 3
86
Struktura a kaskáda
Specifičnost
87 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í Kaskáda
95 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 Shrnutí
Kapitola 4
101 101
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
Rodiny písma
121 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 Velikost písma
133 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í
Kapitola 6
156
Vlastnosti textu
Odsazení a vodorovné zarovnání
157 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í
Kapitola 7
187
Základy vizuálního formátování
Základní boxy
189 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í
Kapitola 8
239
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í
Kapitola 9
278
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í
Kapitola 10
316
Plovoucí prvky a pozicování
Obtékání
317 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í
Kapitola 11
375
Rozvržení tabulek
Formátování tabulky
377 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í
Kapitola 12
408
Seznamy a generovaný obsah
Seznamy
409 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í
Kapitola 13
434
Styly uživatelského rozhraní
435
Systémové fonty a barvy
435
Systémové fonty
435
Systémové barvy
437
Kurzory Změna kurzoru Obrysy
440 441 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í
Dodatek A
488
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ů
Selektory
535 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 Rejstřík
Ukázkový stylový předpis HTML 4
543 547
17
Předmluva Jste-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řebujete 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 pracovní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 zdrojový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 prakticky 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-family. 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í. Napří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 opakovat jednou nebo vícekrát. Takže smeták+ znamená, že slovo smeták se musí použít alespoň jednou, případně víckrát.
Otazník (?) vyjadřuje, že je předchozí hodnota nebo skupina v hranatých závorkách nepovinná. 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 Netscape, 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žijete 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. Napří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í uvedená výše, kontaktujte nás na e-mailové adrese permissions@oreilly.com.
Safari® Enabled Uvidíte-li na obálce své oblíbené technologické knihy ikonu Safari® Enabled, znamená to, že je kniha dostupná online prostřednictvím O'Reilly Network Safari Bookshelf. Safari nabízí řešení, které je lepší než elektronické knihy. Je to virtuální knihovna, kde můžete snadno 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. Vyzkouš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 pochopení, 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řebí 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 bezvadnou 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 rodina, 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 jedineč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ázor Jako č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 oblastech 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 autorovi 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: miroslav.kucera@zoner.cz nebo knihy@zoner.cz Adresa: Zoner Press ZONER software, s.r.o Miroslav Kučera Nové sady 18 602 00 Brno
O autorovi Eric A. Meyer pracuje s webem od roku 1993 a je mezinárodně uznávaným expertem na problematiku 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 partnera 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 adresa 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 prohlíž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ě Severní 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 rozhraní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álce Vzhled obálky této knihy je výsledkem poznámek mnoha čtenářů, našeho experimentování a odezvy 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. Nachá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íhnou 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. Lososi 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 jednoduš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í pravidla Jak 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 prvků 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é prvky, 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 – jednoduš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 červenou 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;}
Eric Meyer o CSS – Kompletní průvodce
49
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 jeden 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: vlastnost, 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 deklaraci nesprávnou vlastnost nebo hodnotu, bude se celá deklarace ignorovat. Proto ani jedna z následují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). Řekně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.
Eric Meyer o CSS – Kompletní průvodce
51
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 fontu, 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ísto, 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 použí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 pravidlo, 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 napří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í pohled 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;}
Eric Meyer o CSS – Kompletní průvodce
53
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í selektor CSS 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 hodnotu 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ů vysoký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 jednotlivý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 jediné 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-zelenomodré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čena středníkem.)
Eric Meyer o CSS – Kompletní průvodce
55
Přestože není povinné uvádět středník za poslední deklarací pravidla, je dobrým zvykem to dělat. Zaprvé – 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ší deklaraci, 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ího Už 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 konzistentní 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 dokonce 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 neimplementovaly 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 použí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ísmem, kompletní řešení však poskytnout nemůže. Nejkomplikovanějšími částmi ohledně zpracová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 prodiskutujeme 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ísma Jak 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ěchto 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é znaky písma různou šířku, protože jsou různě veliká. Například – malé písmeno "i" a malé písmeno "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 textu 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í
Eric Meyer o CSS – Kompletní průvodce
123
patky, jiná ne. Má-li písmo jednotnou šířku znaků, klasifikuje se jako neproporcionální (monospace), 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řivek 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ě Western, 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ísma Kteroukoliv z těchto rodin písma můžete začlenit do svého dokumentu vlastností font-family.
font-family Hodnoty:
[[<název-rodiny> | <všeobecná-rodina> ],]* [<název-rodiny> | <všeobecná-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é konkré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 (mimochodem – neproporcionálním písmem jsou v této knize vysázeny všechny zdrojového kódy).
Specifikace rodiny písma Autor 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í zobrazovat 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. Nejjednodušší pravidlo, jak toho docílit, vypadá takhle: h1 {font-family: Georgia;}
Eric Meyer o CSS – Kompletní průvodce
125
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 dispozici. 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 použ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-family – 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. Takové 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ěkterý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á zobrazit 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 SchoolBook 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 dispozici 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 uvedli. Nenajde-li žádný z nich, jednoduše použije takový patkový font, který je k dispozici.
Apostrofy v názvech rodin písma Možná jste si v předchozím příkladu všimli, že názvy některých rodin jsou v apostrofech. Apostrofy 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ší praktiky". 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>
Eric Meyer o CSS – Kompletní průvodce
127
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ísma I 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-weight Hodnoty:
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 jednotlivý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 uzavř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 schopnost 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 nejlepším pořádku. Často se stává, že tato čísla se specifikují tak, že jsou ekvivalentní s určitými běžnými pojmenovaný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 varianta 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í tabulky Než 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 jednotlivými prvky uvnitř tabulky. Tomuto se říká formátování tabulky (table formatting), a je to něco úplně 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í tabulky Nejprve 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 pochopení 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 napravo, 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 naplní 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.
Eric Meyer o CSS – Kompletní průvodce
379
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řekrý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ž struktura 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, nicméně to nezakazuje. Ovšem pozicování nějakého řádku, který obsahuje buňky klenoucí se přes několik řádků, může dramaticky pozměnit rozvržení tabulky např. tím, že tento řádek se z tabulky zcela odstraní. 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živatelský agent), které prvky tabulky fungují jako buňky a které ne? To zjistíte následujícím oddílu.
Hodnoty display pro tabulku V HTML se snadno zjistí, které prvky jsou součástí tabulky, protože zpracování různých tabulkový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.
Kapitola 11 – Rozvržení tabulek
380
display Hodnoty:
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-column | 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ásleduje 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řekvapením, je table.
inline-table Hodnota specifikuje, že prvek definuje tabulku jako inline prvek. To znamená, že prvek definuje 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 prvkem 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áhlaví zopakovat na každé stránce nahoře. Specifikace ovšem neřeší, co se má stát, přiřadíte-li
Eric Meyer o CSS – Kompletní průvodce
381
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 prezentovat. Ekvivalentní prvek v HTML je col.
table-column-group Hodnota deklaruje, že prvek tvoří skupina jednoho nebo více sloupců. Podobně jako u prvků 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ídajícím prvkem v HTML je colgroup.
table-cell Hodnota specifikuje, že prvek definuje jedinou buňku tabulky. Odpovídajícími prvky v HTML 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ázkové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;}
Kapitola 11 – Rozvržení tabulek
382
V XML, kde prvky standardně nemají sémantiku display, jsou tyhle hodnoty dost užitečné. Vezmě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émukoli 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