Stručný obsah Šablona CSS Pravidla CSS, selektory a deklarace vlastností Formátování textů, nadpisů a odkazů Efekty v textech a odkazech Seznamy Tabulky Barvy, obrázky a obrázková pozadí Navigace a tlačítka Rozměry, okraje a rámečky Pozice elementů a tvorba layoutů Efekty „Hacky“ CSS a obcházení chyb prohlížečů Validace a nástroje pro vývoj CSS Obsah CD
K1675.indd 3
19 31 49 65 83 95 109 133 151 165 195 225 241 263
10.2.2009 7:51:09
K1675.indd 4
10.2.2009 7:51:09
Obsah Úvodem Komu je kniha určena Prohlížeče Knihovna zdrojových kódů Doprovodné CD
Šablona CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
K1675.indd 5
Co to je CSS Co to je pravidlo CSS a z čeho se skládá Jak na řádkové styly ve zdrojovém kódu Jak vytvořit šablonu CSS pouze pro jeden dokument (X)HTML Jak na vloženou šablonu podle pravidel XHTML Jak propojit dokument (X)HTML s externí šablonou CSS Jak propojit dokument XML s externí šablonou CSS Jak do dokumentu (X)HTML importovat styly Jak do šablony CSS importovat jinou šablonu CSS Jak vkládat styly – z šablony, nebo na řádku? Jak na typy výstupního zařízení Jak přidělit styly na základě typu výstupního zařízení – externí šablona Jak přidělit styly na základě typu výstupního zařízení – vložená šablona Jak přidělit styly na základě typu výstupního zařízení – importování šablony Jak na omezení pravidel v šabloně pouze pro určité výstupní zařízení Jak na omezení stylů pro více typů výstupního zařízení – externí šablona Jak na omezení stylů pro více typů výstupního zařízení – vložená šablona Jak na omezení stylů pro více typů výstupního zařízení – importování šablony Jak na omezení stylů pro více typů výstupního zařízení – uvnitř šablony Jak deklarovat kódování znaků externí šablony stylů Jak do šablony CSS vložit komentáře Jak oddělit sady stylů v šabloně CSS Jak nechat uživatele změnit šablonu CSS Jak na přepínač stylů CSS na WWW stránce pomocí JavaScriptu Jak na přepínač stylů CSS na WWW stránce pomocí PHP
15 15 15 16 16
19 19 19 20 20 21 21 22 22 22 23 23 24 24 24 24 25 25 25 25 26 26 27 27 28 29
10.2.2009 7:51:10
6
Obsah
Pravidla CSS, selektory a deklarace vlastností 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
53 54 55 56 57 58 59 60
K1675.indd 6
Jak přiřadit styl určitému elementu Jak přiřadit styl více elementům současně Jak přiřadit styl elementu pomocí třídy Jak přiřadit styl elementu pomocí identifikátoru Jaký je rozdíl mezi třídou a identifikátorem Jak jednomu elementu přiřadit více stylů Jak elementu přiřadit třídu i identifikátor současně Jaké zná CSS vztahy mezi elementy (X)HTML Jak přiřadit styl pouze elementům vnořeným do určitého elementu Jak přiřadit styl pouze prvnímu vnořenému elementu Jak přiřadit styl sousedícímu sourozeneckému elementu Jak přiřadit styl jakémukoli sourozeneckému elementu Jak přiřadit styl podle parametru elementu Jak přiřadit styl podle parametru elementu a jeho hodnoty Jak přiřadit styl podle parametru elementu a některé z jeho hodnot Jak přiřadit styl podle parametru a končící části jeho hodnoty Jak přiřadit styl podle parametru a začínající části jeho hodnoty Jak přiřadit styl podle parametru a některé části jeho hodnoty Jak přiřadit styl pouze prvnímu potomku elementu Jak přiřadit styl pouze poslednímu potomku elementu Co to jsou pseudotřídy a pseudoelementy Jak se počítá specifičnost selektoru Co to je a jak funguje kaskáda Jak zajistit přednost deklarace vlastnosti před jinými deklaracemi Hodnoty jakých vlastností se dědí Jak zdědit hodnotu vlastnosti od nadřazeného elementu Jak deklarovat hodnoty více vlastností najednou
31 31 31 31 32 33 33 33 34 34 35 36 36 37 38 39 39 40 41 41 42 43 43 44 45 45 46 47
Formátování textů, nadpisů a odkazů
49
Jak nastavit typ písma Jak správně přidělit typy písma WWW stránce Jaké lze použít obecné rodiny písma Jaký typ písma pro WWW stránku zvolit Mohu na webové stránce použít vlastní typ písma? Jak použít vlastní font na webové stránce v CSS 3 Jaká nová písma přinesly Windows Vista Jak změnit velikost textu elementu
49 49 50 51 52 52 52 53
10.2.2009 7:51:10
Obsah
61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
Pomocí jakých jednotek CSS nastavit velikosti textů Jak správně nastavit velikosti textů pro WWW stránky Jak nastavit velikost textu, aby hodnota 1em odpovídala 10px Jak na tučný text a odkazy Jak na kurzívu v textu Jak na podtržený a přeškrtnutý text Jak na blikající text Jak převést text na kapitálky Jak převést text na malá nebo velká písmena Jak na horní a spodní index Jak změnit barvu textu Jak změnit mezery mezi písmeny Jak změnit mezislovní mezeru Jak změnit výšku řádku Jak zarovnat text uvnitř elementu Jak odsadit první řádek odstavce Jak zachovat zalomení řádků jako ve zdrojovém dokumentu Jak zajistit, aby se řádek nezalomil za předložkou
Efekty v textech a odkazech 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
K1675.indd 7
Jak vytvořit iniciálu uvnitř odstavce Jak vytvořit obtékanou iniciálu uvnitř odstavce Jak vytvořit iniciálu vně odstavce Jak vytvořit iniciálu na pozadí odstavce Jak na formátování vodorovné čáry – tečkovaná Jak na formátování vodorovné čáry – dvojitá Jak na formátování vodorovné čáry – dvojitá a tečkovaná Jak na obrázkový oddělovač místo vodorovné čáry Jak vytvořit stín za textem Jak na hořící text a jiné efekty pomocí CSS Jak na stín za textem ve všech prohlížečích Jak na obrázkové nadpisy skrytím textu Jak na obrázkové nadpisy zasunutím textu Jak na barevný přechod v textu nadpisu Jak na změnu formátování odkazu při najetí myší Jak na formátování navštívených odkazů Jak na různé podtržení odkazu Jak na podtržení odkazu vlnovkou
7
53 54 55 55 56 56 57 57 58 58 59 59 60 60 61 62 63 63
65 65 65 66 67 68 69 69 70 71 72 72 73 74 74 76 76 77 77
10.2.2009 7:51:10
8
Obsah
97 98 99 100 101
Jak na zvýraznění odkazů v odstavci Jak na změnu formátování odstavce textu po najetí myši Jak na neviditelný text na stránce Jak na barevné označování textu Jak stylovat titulek stránky (element
)<br />
<br />
Seznamy 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117<br />
<br />
118 119 120 121 122 123 124 125 126 127 128 129 130<br />
<br />
K1675.indd 8<br />
<br />
Jak změnit odrážky neuspořádaného seznamu Jak změnit číslování uspořádaného seznamu Jak na různé odrážky ve víceúrovňovém seznamu Jak na obrázkové odrážky seznamů Kde získat hotové obrázkové odrážky Jak vytvořit seznam bez odrážek nebo číslování Jak změnit pozici odrážky nebo číslování seznamu Jak na okraje u neuspořádaného seznamu Jak na okraje u uspořádaného seznamu Jak jednoduše oddělit položky seznamu pomocí čáry Jak doplnit čáru jen první položce seznamu Jak doplnit čáru jen poslední položce seznamu Jak na vlastní označování položek neuspořádaného seznamu Jak na vlastní řazení položek uspořádaného seznamu Jak na vlastní řazení položek víceúrovňového seznamu Jak formátovat definiční výčet jako článek s obrázkem<br />
<br />
78 79 79 80 81<br />
<br />
83 83 83 84 84 85 86 86 86 87 88 88 89 89 90 91 92<br />
<br />
Tabulky<br />
<br />
95<br />
<br />
Jak vytvořit rámeček kolem buněk a tabulky Jak nastavit každou stranu rámečku tabulky jinak Jak zhroutit rámečky tabulky a buněk do sebe Jak na mezeru mezi buňkami tabulky Jak tabulce nastavit pevné vykreslení Jak na skrytí rámečku kolem prázdné buňky Jak změnit umístění titulku tabulky Jak v buňce tabulky zarovnat text horizontálně Jak v buňce tabulky zarovnat text vertikálně Jak na manuální střídání barvy řádků v tabulce Jak na automatické střídání barvy řádků v tabulce Jak formátovat sloupce tabulky Jak na manuální střídání barvy sloupců tabulky<br />
<br />
95 95 95 96 97 98 98 99 99 100 100 101 102<br />
<br />
10.2.2009 7:51:10<br />
<br />
Obsah<br />
<br />
131 132 133 134 135<br />
<br />
Jak na automatické střídání barvy sloupců tabulky Jak na překreslení řádku nebo části tabulky po najetí myší Jak na jednotné formátování částí tabulky Jak na tabulku s pevně umístěnou hlavičkou a posuvníkem Jak vytvořit tabulkový vzhled s netabulkovými elementy<br />
<br />
Barvy, obrázky a obrázková pozadí 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166<br />
<br />
K1675.indd 9<br />
<br />
Jak na jednobarevné pozadí Jak v CSS zapsat barvu klíčovým slovem Jak v CSS zapsat barvu ve formátu RGB Jak na zápis barvy pomocí funkční notace RGB Jak na zápis barvy ve formátu HSL Jak vložit obrázek na pozadí elementu Jak ovlivnit opakování obrázku na pozadí Jak obrázek na pozadí umístit k okraji elementu Jak obrázek na pozadí elementu umístit do přesné pozice Jak na barevný přechod na pozadí Jak na obrázek na pozadí stránky, který se neposouvá Jak nastavit barvu a obrázek na pozadí zápisem jediné vlastnosti Jak na průhledné barevné pozadí pomocí obrázku Jak na průhledné barevné pozadí pomocí CSS – formát RGBA Jak na průhledné barevné pozadí pomocí CSS – formát HSLA Jak na nastavení průhlednosti celého elementu pomocí CSS Jak na obrázek na pozadí odstavce Jak na obrázky s popisky ve fotogalerii Jak vytvořit efektní rámeček kolem obrázků ve fotogalerii Jak v odstavci zarovnat obrázek Jak zastavit řazení obrázků za sebe Jak zrušit nechtěné obtékání obrázku Jak obrázek s popiskem zarovnat mezi dva sloupce textu Jak obrázek s popiskem zarovnat mezi dva sloupce textu – oprava pro IE 6 Jak doplnit navštívený odkaz o obrázek Jak doplnit odkaz o ikonu cílového souboru Jak automaticky nechat doplnit odkaz o ikonu cílového souboru Jak na hlášku „Obrázek se nahrává…“ Jak nechat velké obrázky nahrát dopředu Jak na detail obrázku vyskakující z náhledu po najetí myši Jak na náhled obrázku zvětšující se po najetí myši – obrázek na pozadí<br />
<br />
9<br />
<br />
102 103 104 104 106<br />
<br />
109 109 109 109 110 110 110 111 111 112 112 113 114 114 115 115 116 117 117 118 119 119 120 120 122 123 123 124 124 125 125 127<br />
<br />
10.2.2009 7:51:10<br />
<br />
10<br />
<br />
167 168<br />
<br />
Obsah<br />
<br />
Jak na náhled obrázku zvětšující se po najetí myši – pomocí overflow Jak na vyskakovací detail obrázku – Lightbox<br />
<br />
Navigace a tlačítka 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184<br />
<br />
Jak vytvořit „celoklikací“ tlačítko z odkazu Jak nastavit podobu tlačítka pro stav překreslení Jak na obrázkové tlačítko Jak na neblikající obrázková tlačítka Jak vytvořit svislou tlačítkovou navigaci Jak na tlačítkovou navigaci Jak vytvořit vodorovnou navigaci Jak na záložkovou navigaci Jak na plastický vzhled záložek Jak automaticky označit aktuální část webu v navigaci (efekt Kde jsem?) Jak na drobečkovou navigaci Jak na drobečkovou navigaci v Internet Exploreru 6 Jak na dvouúrovňovou vodorovnou navigaci Jak na vysouvací vodorovnou navigaci Jak na vysouvací svislou nabídku Jak na svislou navigační nabídku s komentáři<br />
<br />
Rozměry, okraje a rámečky 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200<br />
<br />
K1675.indd 10<br />
<br />
Jaké jednotky délky lze v CSS použít K čemu se vztahují procenta při určování rozměrů Co to je blokový model CSS Jaká je skutečná šířka a výška bloku elementu Jak nastavit šířku elementu Jak nastavit výšku elementu Jak nastavit minimální šířku elementu Jak nastavit minimální výšku Jak nastavit maximální šířku elementu Jak nastavit maximální výšku elementu Jak nastavit vnější okraje elementu Jak nastavit vnější okraj elementu pomocí jediné vlastnosti Jak nastavit vnitřní okraje elementu Jak nastavit vnitřní okraje elementu pomocí jediné vlastnosti Jak vytvořit rámeček kolem elementu Jak vytvořit rámeček pouze na jedné straně elementu<br />
<br />
128 129<br />
<br />
133 133 133 134 134 135 136 137 138 139 140 140 141 142 144 146 147<br />
<br />
151 151 151 152 153 153 154 154 154 155 155 155 156 156 157 158 158<br />
<br />
10.2.2009 7:51:11<br />
<br />
Obsah<br />
<br />
201 202 203 204 205 206 207 208 209 210<br />
<br />
Jak nastavit zvlášť šířku rámečku elementu Jak nastavit šířku jedné ze stran rámečku elementu Jak změnit zvlášť styl rámečku Jak změnit styl jedné ze stran rámečku Jak nastavit zvlášť barvu rámečku Jak změnit barvu jedné ze stran rámečku Jak CSS pracuje se základními typy elementů Jak CSS pracuje s pokročilými typy elementů Jak změnit typ elementu Jak vynulovat okraje všech elementů<br />
<br />
Pozice elementů a tvorba layoutů 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236<br />
<br />
K1675.indd 11<br />
<br />
Co to je obsahový blok Jak element umístit relativně Jak element umístit absolutně Jak určit výchozí pozici pro absolutně umísťované elementy Jak řídit překrývání absolutně umístěných elementů Jak element umístit pevně (fixně) Jak element umístit do plovoucího umístění Jak zrušit obtékání elementu v plovoucím umístění Jak zarovnat celou stránku na střed okna prohlížeče Jak na dvousloupcový layout se záhlavím pomocí plovoucího umístění Jak změnit pořadí sloupců v layoutu pomocí plovoucího umístění Jak na zápatí ve dvousloupcovém layoutu pomocí plovoucího umístění Jak na stejně vysoké sloupce v layoutu pomocí plovoucího umístění Jak na dvousloupcový layout se záhlavím pomocí pevného umístění Jak na dvousloupcový layout se záhlavím a zápatím pomocí absolutního umístění Jak změnit pořadí sloupců v layoutu pomocí absolutního umístění Jak na stejně vysoké sloupce v layoutu pomocí pevného umístění Jak absolutně umístěný dvousloupcový layout zarovnat na střed okna prohlížeče Jak na pohyblivý dvousloupcový layout Jak na stejně vysoké sloupce ve dvousloupcovém pohyblivém layoutu Jak na stejně vysoké sloupce v pohyblivém layoutu s obrácenou polohou sloupců Jak na dvousloupcový layout s pohyblivou šířkou sloupce s obsahem Jak na třísloupcový layout s pevnou šířkou Jak na vícesloupcový layout Jak na změnu pořadí sloupců ve vícesloupcovém layoutu Jak na novinový vícesloupcový layout v CSS 3<br />
<br />
11<br />
<br />
159 159 160 161 162 162 163 163 164 164<br />
<br />
165 165 165 166 167 168 168 169 170 171 172 173 173 173 175 176 177 177 178 179 180 181 182 183 184 185 185<br />
<br />
10.2.2009 7:51:11<br />
<br />
12<br />
<br />
237 238 239 240 241 242 243 244 245<br />
<br />
Obsah<br />
<br />
Jak na novinový vícesloupcový layout v CSS 3 – pomocí šířky sloupců Jak na novinový vícesloupcový layout v CSS 3 – počtem sloupců Jak na element se svisle posuvným obsahem Jak na element s vodorovně posuvným obsahem Jak efektivně nastavit vnitřní okraj částem layoutu Jak na zápatí vždy u spodního okraje okna prohlížeče Jak pomocí CSS simulovat rámy Jak pomocí CSS simulovat rámy v Internet Exploreru 6 Kde hledat inspiraci k tvorbě layoutů<br />
<br />
Efekty 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272<br />
<br />
K1675.indd 12<br />
<br />
Jak na dva kulaté rohy bloku s pevnou šířkou Jak na čtyři kulaté rohy bloku s pevnou šířkou Jak na dva kulaté rohy bloku s pohyblivou šířkou Jak na čtyři kulaté rohy bloku s pohyblivou šířkou Jak na kulaté rohy jakéhokoli bloku přímo v CSS Jak na různě kulaté rohy jakéhokoli bloku přímo v CSS Jak na bublinovou nápovědu Jak za blokem vytvořit stín Jak změnit typ kurzoru Jak odstřihnout část elementu Jak element na stránce skrýt Jen element na stránce vůbec nevykreslit Jak zobrazit u elementu posuvník Jak skrýt obsah vytékající z elementu Jak zkrátit článek pomocí odkazu Více Jak automaticky číslovat nadpisy kapitol a podkapitol Jak na obrys elementu Jak deklarovat jednotlivé vlastnosti obrysu Jak na posunutí obrysu od elementu Jak do textu vklínit nepravidelný obrázek Jak na kulatý roh celé stránky Jak na blok s ohnutými rohy Jak na sloupcový graf Jak na horizontální skládací panel pomocí CSS Jak změnit horizontální skládací panel na vertikální Jak na knižní obsah s vodicí linkou Co to jsou filtry Internet Exploreru<br />
<br />
186 186 187 187 188 189 191 192 193<br />
<br />
195 195 196 197 198 200 201 201 202 203 204 205 205 205 206 206 207 209 210 210 211 212 213 214 216 218 219 220<br />
<br />
10.2.2009 7:51:11<br />
<br />
Obsah<br />
<br />
273 274 275 276<br />
<br />
Jak na průhlednost pomocí filtru v Internet Exploreru Jak na otočení a zrcadlení obrázku pomocí filtru Jak na zajímavé efekty s filtrem alpha Jak na stín pomocí filtru v Internet Exploreru<br />
<br />
„Hacky“ CSS a obcházení chyb prohlížečů 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300<br />
<br />
Co to je „hack“ CSS Jak na vlastnost pro Internet Explorer 6 a starší verze Jak na vlastnost pro Internet Explorer od verze 6 Jak na vlastnost pro Internet Explorer od verze 5.5 Jak na různé hodnoty vlastnosti pro různé verze Internet Exploreru Jak na různé jiné hodnoty vlastnosti pro Internet Explorer 5.0x a novější verze Jak na různé hodnoty vlastnosti pro Internet Explorer 5 a 6 Jak na vlastnost pro jakoukoli verzi Internet Exploreru pomocí podmíněného komentáře Jak na vlastnost pouze pro určitou verzi Internet Exploreru pomocí podmíněného komentáře Jak na vlastnost pouze pro Internet Explorer od verze 7 nebo 8 Jak „hacky“ pro Internet Explorer přidělovat z jednoho souboru Jak na podmíněný komentář, který Internet Explorer nevyhodnotí Jak na správnou základní velikost textu v Internet Exploreru 5 Jak zajistit zarovnání stránky na střed v Internet Exploreru 5 Jak na zobrazení rámečku kolem prázdné buňky v Internet Exploreru Jak na minimální výšku v Internet Exploreru 6 Jak na minimální šířku v Internet Exploreru 6 Jak na maximální šířku v Internet Exploreru 6 Jak na maximální výšku v Internet Exploreru 6 Jak na pevné umístění v Internet Exploreru 6 Jak zajistit efekt překreslení (hover) v Internet Exploreru 6 Jak na „celoklikací“ tlačítko v navigaci pomocí seznamu v Internet Exploreru 6 Jak na průhledné obrázky PNG také v Internet Exploreru 6 Jak na průhledné elementy v Internet Exploreru pomocí filtrů<br />
<br />
Validace a nástroje pro vývoj CSS 301 302 303 304 305 306<br />
<br />
K1675.indd 13<br />
<br />
Jak zkontrolovat správnost stylů Co vám řekne výsledek validace kódu Co konkrétně znamenají chyby, které odhalí validátor Kde lze zjistit podporu CSS 2 a 3 u prohlížečů? Jak provést test podpory selektorů CSS 3 v mém prohlížeči Kde hledat referenční přehled prvků CSS<br />
<br />
13<br />
<br />
220 221 221 223<br />
<br />
225 225 225 226 226 226 227 227 228 228 229 230 230 231 231 232 232 233 233 233 234 235 236 237 238<br />
<br />
241 241 242 243 243 244 245<br />
<br />
10.2.2009 7:51:12<br />
<br />
14<br />
<br />
307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333<br />
<br />
Obsah<br />
<br />
Kde hledat inspiraci pro webový design pomocí CSS Jaký použít editor CSS Jak na více verzí Internet Exploreru ve Windows XP Jak na Internet Explorer 7 vedle verze 8 ve Windows XP Jak na více verzí Internet Exploreru ve Windows Vista pomocí virtuálního počítače Jak na více verzí Internet Exploreru ve Windows Vista v programu IETester Jak na prohlížeč Safari ve Windows V jakých prohlížečích ladit kód Kde najít aktuální verze důležitých prohlížečů Jak na doplněk Web Developer Toolbar ve Firefoxu Jak na CSS s lištou Web Developer ve Firefoxu Jak na orámování elementů s lištou Web Developer ve Firefoxu Jak na validaci CSS s lištou Web Developer ve Firefoxu Jak změřit rozměry a polohu elementu na stránce s lištou Web Developer Jak na doplněk Internet Explorer Developer Toolbar Jak zrušit styly CSS v Internet Explorer Developer Toolbaru Jak orámovat vybrané elementy v Internet Explorer Developer Toolbaru Jak validovat CSS pomocí Internet Explorer Developer Toolbar Jak na Web Developer Toolbar & Menu v Opeře Jak orámovat elementy na stránce v liště Web Developer v Opeře Jak na validaci CSS s lištou Web Developer v Opeře Jak zakázat CSS s lištou Web Developer v Opeře Jak na vývojové nástroje v Internet Exploreru 8 Jak zrušit některé nebo všechny styly CSS v Internet Exploreru 8 Jak orámovat vybrané elementy v Internet Exploreru 8 Jak validovat CSS pomocí Developer Tools v Internet Exploreru 8 Jak na favelety pro vývoj v CSS<br />
<br />
Obsah CD Zdrojové kódy Editory Vývojové nástroje Prohlížeče Skripty Odkazy<br />
<br />
Rejstřík<br />
<br />
K1675.indd 14<br />
<br />
245 246 247 248 248 250 250 251 252 252 252 253 254 254 254 255 256 256 257 258 258 258 258 259 260 260 260<br />
<br />
263 263 263 264 264 265 266<br />
<br />
267<br />
<br />
10.2.2009 7:51:12<br />
<br />
Úvodem Kaskádové styly, zkráceně CSS z anglického názvu Cascading Style Sheets, jsou dlouhá léta silnou zbraní webdesignérů. V době vydání publikace tomu je již více než 10 let, kdy jazyk CSS opravdu vstoupil do světa tvorby webových stránek. Trvalo však léta, než se zabydlel v arzenálu webdesignérů. Díky rozvoji moderních prohlížečů v posledních letech se však tvorba webů pomocí CSS stala v tomto tvůrčím odvětví dominantní. Kniha 333 tipů a triků pro CSS přináší velké množství praktických návodů a dílčích i komplexních řešení, s nimiž dostanete z jazyka CSS opravdu maximum. Publikace poskytuje návody k tvorbě webových stránek, stejně jako postupy, s nimiž dosáhnete ojedinělých efektů. Kromě konkrétního postupu najdete u každého článku také vysvětlení, jak řešení funguje. Samozřejmostí je upozornění na případné problémy v určitých prohlížečích nebo jejich konkrétních verzích, stejně tak jako poznámky rozšiřující výklad či odkazující na další zdroje informací.<br />
<br />
Komu je kniha určena Každý tip a trik je v knize označen pomocí jedné za tří úrovní pokročilosti, které po čtenářích buď vyžadují, nebo nevyžadují určité znalosti CSS. Kniha je tak vhodná pro všechny skupiny webdesignérů a své si v ní najdou jak začátečníci, tak pokročilí tvůrci webů. Skuteční znalci zase mohou kromě tipů a triků popisujících velmi pokročilé využití CSS k tvorbě různých efektů či celých layoutů stránek knihu využít i jako referenci jazyka. Nevyžaduje žádné předchozí znalosti CSS. začátečník<br />
<br />
Předpokládá základní znalosti jazyka CSS, které rozšiřuje. pokročilý<br />
<br />
Předpokládá velmi dobrou znalost CSS a popisuje velmi pokročilé a sofistikované postupy. znalec<br />
<br />
Prohlížeče Postupy popsané v knize byly testovány ve všech hlavních prohlížečích. Následující výčet uvádí jejich seznam: <br />
<br />
Internet Explorer 8 Internet Explorer 7 Internet Explorer 6 Firefox 3.0 Opera 9.6 <br />
<br />
K1675.indd 15<br />
<br />
10.2.2009 7:51:12<br />
<br />
16<br />
<br />
Úvodem<br />
<br />
V případě problémů s některým prohlížečem nebo jeho konkrétní verzí je tato skutečnost uvedena ve speciálním odstavci Upozornění. Často je taktéž uvedeno řešení problému.<br />
<br />
Knihovna zdrojových kódů Zdrojové kódy všech tipů a triků najdete na doprovodném CD ve dvou formách: jednak v textové, z níž kód snadno vykopírujete a použijete ve svých projektech, a také dokumenty XHTML s ukázkou. S knihou tak získáváte nejen popis řešení, ale také kompletní knihovnu kódů všech řešení, které můžete ihned použít ve svých webových stránkách.<br />
<br />
Obrázek Ú.1. Knihovna zdrojových kódů a ukázek přístupná na CD<br />
<br />
Doprovodné CD CD obsahuje řadu odkazů, skriptů a užitečného softwaru, který využívají řešení v knize, ale i mnoho dalších utilit a nástrojů. Kompletní seznam obsahu CD najdete na konci knihy. CD stačí vložit do počítače a rozhraní se spustí automaticky. Pokud máte zakázané automatické spouštění, pak přejděte na CD a v kořenovém adresáři otevřete soubor spustit_CD.html. Jestliže otevřete CD v Internet Exploreru, budete z CD moci rovnou instalovat doprovodný software. V případě jiných prohlížečů budete vyzváni k uložení instalátoru na disk. V takovém případě doporučujeme spustit instalaci přímo z CD. Obsah CD najdete ve složce Obsah.<br />
<br />
K1675.indd 16<br />
<br />
10.2.2009 7:51:14<br />
<br />
Úvodem<br />
<br />
17<br />
<br />
V případě doplňků pro určité prohlížeče (Opera, Firefox) je třeba instalaci doplňku spouštět v příslušném prohlížeči. Rozhraní CD tedy otevřete manuálně, jak je popsáno výše.<br />
<br />
Obrázek Ú.2. CD obsahuje řadu skriptů a doprovodného softwaru<br />
<br />
K1675.indd 17<br />
<br />
10.2.2009 7:51:15<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/struny-obsah-ablona-css-pravidla-css-selektory-a-deklarace-v" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Stručný obsah Šablona CSS Pravidla CSS, selektory a deklarace vlastností Formátování textů, nadpisů a odkazů Efekty v textech a odkazech"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
