Obsah 3 1: Úvod
9
Dříve než začnete . . . . . . . . . . . . . . . . . . . . . . . . . 9 Co a kde v knize naleznete . . . . . . . . . . . . . . . . . . . . . . . 9 Zdroje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Doporučení pro další studium . . . . . . . . . . . . . . . . . . . . . 11
Historie CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Význam CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Širší formátovací možnosti . . . . . Snadná tvorba a údržba konzistentního Oddělení struktury a stylu . . . . . . Vyšší přístupnost dokumentů . . . . Dynamická práce se styly . . . . . . Formátování XML dokumentů . . . .
. . stylu . . . . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
14 15 15 16 17 17
Strategie použití CSS . . . . . . . . . . . . . . . . . . . . . . . 17 Obohacení formátovacích možností. . . . . . . . . . . . . . . . . . . 17 Veškeré formátování s výjimkou rozmístění (layoutu) prvků . . . . . . . . . 19 Formátování jen pomocí CSS, včetně rozmístění prvků . . . . . . . . . . 20
2: Základní principy CSS
23
Vazba na (X)HTML dokument . . . . . . . . . . . . . . . . . . . 23 Základní metody připojení stylů k (X)HTML . . . . . . . . . . . . . . . 23 Kompatibilita a selekce prohlížečů . . . . . . . . . . . . . . . . . . . 26
Syntaxe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Struktura stylového předpisu Klíčová slova . . . . . . . Povolené znaky . . . . . . Definice . . . . . . . . . At-pravidla . . . . . . . . Sady pravidel . . . . . . . Deklarace a vlastnosti . . . Hodnoty . . . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
28 28 29 29 29 29 30 30
Selektory . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Svazování . . . . Syntaxe selektorů . Univerzální selektor Typové selektory .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
36 37 38 38
4
CSS pro webdesignery
Selektor následníka . . . . . Selektor potomka . . . . . . Selektor sousedních sourozenců Selektor atributu. . . . . . . Selektory ID . . . . . . . . Pseudoprvky a pseudotřídy . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
39 40 41 41 43 45
Přiřazování hodnot, kaskádování a dědičnost . . . . . . . . . . . . . 52 Určené, vypočítané a skutečné hodnoty Dědičnost . . . . . . . . . . . . Pravidlo @import . . . . . . . . . Kaskádování . . . . . . . . . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
52 53 54 55
Média . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Jak definovat stylové předpisy pro určitá média . . . . . . . . . . . . . . 59 Typy médií . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Koncepce boxů . . . . . . . . . . . . . . . . . . . . . . . . . 62 Rozměry boxu . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Vlastnosti okrajů, výplně a orámování . . . . . . . . . . . . . . . . . . 66
Koncepce vizuálního formátování . . . . . . . . . . . . . . . . . . 67 Úvod do koncepce vizuálního formátování . Generování boxů . . . . . . . . . . . Polohování . . . . . . . . . . . . . . Další detaily vizuálního formátování . . . .
3: Referenční přehled CSS
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
67 68 73 91
99
Rozměry . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Výplň . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Orámování . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Okraje. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Pozadí. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Umístění . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Ohraničení . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Písmo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Seznamy a odrážky . . . . . . . . . . . . . . . . . . . . . . . 107 Tabulka . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Generovaný obsah . . . . . . . . . . . . . . . . . . . . . . . 108 Klasifikační vlastnosti a různé . . . . . . . . . . . . . . . . . . . 109 Stránkovaná média . . . . . . . . . . . . . . . . . . . . . . . 109 Hlasový výstup . . . . . . . . . . . . . . . . . . . . . . . . . 110
5
Obsah3
4: Detailní popis vlastností Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost
Background . . . . . Background-attachment Background-color . . . Background-image . . Background-position . Background-repeat . . Border . . . . . . . Border-bottom . . . . Border-bottom-color . Border-bottom-style . . Border-bottom-width . Border-collapse . . . . Border-color . . . . . Border-left . . . . . . Border-left-color . . . Border-left-style. . . . Border-left-width . . . Border-right . . . . . Border-right-color . . . Border-right-style . . . Border-right-width . . Border-spacing . . . . Border-style . . . . . Border-top. . . . . . Border-top-color . . . Border-top-style . . . Border-top-width . . . Border-width . . . . . Bottom . . . . . . . Caption-side . . . . . Clear . . . . . . . . Clip . . . . . . . . Color . . . . . . . . Content . . . . . . . Counter-increment . . Counter-reset . . . .
113 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
113 115 116 118 121 123 125 126 127 128 129 129 132 134 136 137 138 139 140 141 142 142 143 147 148 149 150 151 153 155 157 162 163 164 165 166
6
CSS pro webdesignery
Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost
Cursor . . . . Direction . . . Display . . . . Empty-cells . . Float . . . . . Font . . . . . Font-family . . Font-size . . . Font-size-adjust . Font-stretch . . Font-style . . . Font-variant . . Font-weight . . Height . . . . Left. . . . . . Letter-spacing . Line-height . . List-style. . . . List-style-image . List-style-position List-style-type . Margin . . . . Margin-bottom . Margin-left . . . Margin-right . . Margin-top. . . Marker-offset. . Marks . . . . . Max-height . . Max-width . . . Min-height . . . Min-width . . . Orphans. . . . Outline . . . . Outline-color . . Outline-style . . Outline-width. .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
167 169 169 171 172 176 179 183 186 187 188 189 190 191 193 195 196 198 199 200 205 208 212 213 214 215 216 216 217 218 220 220 221 222 223 224 225
7
Obsah3
Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost Vlastnost
Overflow . . . . Padding . . . . . Padding-bottom . Padding-left . . . Padding-right. . . Padding-top . . . Page . . . . . . Page-break-after . Page-break-before. Page-break-inside . Position . . . . . Quotes . . . . . Right . . . . . . Size . . . . . . Table-layout . . . Text-align . . . . Text-decoration. . Text-indent . . . Text-shadow . . . Text-transform . . Top . . . . . . Unicode-bidi . . . Vertical-align . . . Visibility . . . . . White-space . . . Widows . . . . . Width . . . . . . Word-spacing . . Z-index . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
226 230 234 235 236 237 238 239 239 240 241 242 243 245 246 247 251 252 253 254 255 257 258 261 262 264 265 267 268
A: Slovníček pojmů
271
B: Výchozí stylový předpis pro HTML 4
275
