Obsah Úvod ....................................................................................... 15 1. Základy CSS ....................................................................... 25 1.1 Základem je dobrý dokument ........................................................ 26 1.2 Vytvoření stylopisu ...................................................................... 26 Základní syntaxe ..................................................................................................... 26 Komentáře .............................................................................................................. 27
1.3 Připojení stylopisu k dokumentu XHTML ........................................ 27 Zápis přímo do dokumentu ..................................................................................... 27 Načtení externího stylopisu .................................................................................... 27
1.4 Hodnoty ...................................................................................... 28 Klíčová slova ........................................................................................................... 28 <číslo> , ............................................................................................. 29 , ................................................................................................ 29 Absolutní jednotky .................................................................................................. 29 Relativní jednotky ................................................................................................... 29 <procenta> .............................................................................................................. 29 ................................................................................................................... 30 ..................................................................................................................... 30 <řetězec> ................................................................................................................ 31 <čas> ...................................................................................................................... 31
1.5 Selektory..................................................................................... 31 Selektory typu ......................................................................................................... 31 Univerzální selektor ................................................................................................ 31 Selektory třídy ......................................................................................................... 31 Násobné třídy ......................................................................................................... 31 Selektory ID ............................................................................................................ 32 Selektory s atributy ................................................................................................. 32 Existence atributu ................................................................................................... 32 Atribut hodnoty ........................................................................................................ 32 Atribut obsahující hodnotu ...................................................................................... 32 Atribut obsahující podhodnotu ................................................................................ 32 Vícenásobné selektory s atributy ............................................................................ 33 Selektory následníků .............................................................................................. 33
1.7 Kombinování a seskupování selektorů, pseudotříd a pseudoprvků ... 38 Kombinované selektory .......................................................................................... 38 Seskupování selektorů ........................................................................................... 38
1.8 Média.......................................................................................... 38 Typy médií .............................................................................................................. 38 Určení médií v dokumentu ...................................................................................... 39 Určení médií přímo ve stylopisu ............................................................................. 39
1.9 Dědičnost..................................................................................... 39 Klíčové slovo inherit ................................................................................................ 39
1.10 Vypočítané hodnoty a kaskáda .................................................... 40 Vypočítané hodnoty ............................................................................................... 40 Kaskáda ................................................................................................................. 40 Konkrétnost selektorů ............................................................................................ 40 Pravidlo !important ................................................................................................. 41
1.11 Podpora vlastností v nejběžnějších prohlížečích ............................. 41
2. CSS a JavaScript ................................................................. 45 2.1 Připojení souboru JavaScriptu k dokumentu XHTML ........................ 45 2.2 Identifikace prohlížečů JavaScriptem (příklady) .............................. 46 2.3 Podstrčení vhodného stylu na základě identifikace prohlížeče .......... 47
3. Rozměry prvků a přetékání obsahu ...................................... 49 3.1 Výpočet rozměrů prvků ................................................................ 50 Výpočet rozměrů prvků podle Specifikace W3C (model „pouze obsah“) ............... 50 Výpočet rozměrů prvků podle Microsoftu (model „včetně rámečku a výplně“) ....... 50
Obsah
CSS
Hodnota auto .......................................................................................................... 51 Blokové (nenahrazované) prvky ............................................................................. 51 Řádkové (nenahrazované) prvky ............................................................................ 51 Nahrazované (blokové i řádkové) prvky ................................................................. 52 Absolutně poziciované (nenahrazované) prvky ...................................................... 52 Absolutně poziciované (nahrazované) prvky .......................................................... 52
3.2 Šířka obsahu prvku – vlastnost width ........................................... 52 Problém chybného počítání rozměrů v Internet Exploreru 5–6 .............................. 53 Řešení .................................................................................................................... 56 Starší způsoby řešení ............................................................................................. 56 Řešení pomocí CSS ............................................................................................... 60
3.4 Maximální šířka prvku – vlastnost max-width............................... 66 3.5 Šířka prvku „od hrany rámečku po hranu rámečku“ – vlastnost box-width.................................................................. 67 3.6 Výška obsahu prvku – vlastnost height ......................................... 68 Problém chybného počítání rozměrů v Internet Exploreru 5–6 .............................. 68 Možnosti řešení ...................................................................................................... 70 Starší způsoby řešení ............................................................................................. 70 Řešení pomocí CSS ............................................................................................... 73 Procentní výška prvku umístěného v ......................................................... 74
3.7 Minimální výška prvku – vlastnost min-height ............................... 74 3.8 Maximální výška prvku – vlastnost max-height ............................ 78 3.9 Výška prvku „od hrany rámečku po hranu rámečku“ – vlastnost box-height ................................................................. 78 3.10 Výpočetní model rozměrů prvků – vlastnost box-sizing ................. 79 3.11 Přetékání obsahu – vlastnosti overflow, overflow-x a overflow-y. 80 Přetékání v praxi .................................................................................................... 81
3.12 Viditelná oblast – vlastnost clip ................................................... 84 3.13 Viditelná oblast v CSS 3 – vlastnost overflow-clip ........................ 84 3.14 Viditelná oblast nahrazovaných prvků – vlastnost crop ................. 85 3.15 Podpora vlastností v nejběžnějších prohlížečích ............................. 86
Obsah
7
8
CSS
4. Barvy a pozadí ................................................................... 89 4.1 Barva textu – vlastnost color ....................................................... 89 4.2 Styl pozadí – vlastnost background ............................................... 90 Barva pozadí – vlastnost background-color ............................................................ 90 Obrázek na pozadí – vlastnost background-image ................................................ 90 Opakování obrázku na pozadí – vlastnost background-repeat .............................. 91 Umístění obrázku na pozadí – vlastnost background-position ............................... 91 Ukotvení obrázku na pozadí – vlastnost background-attachment .......................... 92 Sdružená vlastnost – background .......................................................................... 92
4.3 Podpora vlastností v nejběžnějších prohlížečích .............................. 93
5. Okraje, výplně a rámečky .................................................... 95 5.1 Základní koncepce rámů................................................................ 95 Základní podpora v různých prohlížečích ............................................................... 96
5.2 Okraje – vlastnost margin .......................................................... 101 Slučování okrajů ................................................................................................... 102 Hodnota auto – snadné centrování blokových prvků ............................................ 104 Stránka na střed v Mozille .................................................................................... 106
6. Vlastnosti písma ............................................................... 125 6.1 Typ písma – font-family.............................................................. 125 Písma pro starší verze Linuxu .............................................................................. 127 Písma pro Windows 3.x ........................................................................................ 127 Písma pro Mac OS ............................................................................................... 127 Písma pro moderní Linux ...................................................................................... 127 Bezpatková písma ................................................................................................ 127 Patková písma ...................................................................................................... 128 Psaná písma ......................................................................................................... 129 Písma pro Windows 95/98/ME/NT/2000/XP ......................................................... 129 Bezpatková písma ................................................................................................ 129 Ostaní písma ........................................................................................................ 130 Příklady definice písem ......................................................................................... 130 Bezpatkové písmo – malé .................................................................................... 130 Bezpatkové písmo – střední ................................................................................. 131 Bezpatkové písmo – velké .................................................................................... 131 Patkové písmo – malé .......................................................................................... 131 Patkové písmo – větší .......................................................................................... 131 Proložené písmo – menší ..................................................................................... 131 Proložené písmo – větší ....................................................................................... 131 Dekorativní písmo ................................................................................................. 131 „Psané“ písmo ...................................................................................................... 131 Dynamické vkládání fontů ..................................................................................... 131
6.2 Velikost písma – font-size .......................................................... 132 6.3 Styl písma – font-style ............................................................... 133 6.4 Síla písma – font-weight ............................................................ 133 6.5 Kapitálky – font-variant ............................................................. 134 6.6 Výška řádek – line-height........................................................... 134 6.7 Sdružená vlastnost – font........................................................... 135 6.8 Hustota písma – font-stretch ...................................................... 135 6.9 Výška nízkých liter – font-size-adjust ......................................... 136 6.10 Podpora vlastností v nejběžnějších prohlížečích ........................... 137
Obsah
9
10
CSS
7. Vlastnosti textu................................................................ 139 7.1 Odsazení první řádky – vlastnost text-indent .............................. 139 7.2 Rozestup znaků – vlastnost letter-spacing................................... 140 7.3 Rozestup slov – vlastnost word-spacing...................................... 140 7.4 Vodorovné zarovnání – vlastnost text-align ................................ 140 7.5 Svislé zarovnání – vlastnost vertical-align ................................... 141 7.6 Velikost písmen – vlastnost text-transform ................................. 142 7.7 Dekorace textu – vlastnost text-decoration ................................. 142 7.8 Stín kolem textu – vlastnost text-shadow................................... 143 7.9 Rolování textu – vlastnosti marquee ........................................... 144 Styl rolování textu – vlastost marquee-style ......................................................... 144 Směr rolování textu – vlastnost marquee-direction .............................................. 145 Rychlost rolování textu – vlastnost marquee-speed ............................................. 145 Opakování rolování textu – vlastnost marquee-repetition .................................... 145 Sdružená vlastnost – marquee ............................................................................. 146
7.10 Efekty písma – vlastnost font-effect .......................................... 146 7.11 Podpora vlastností v nejběžnějších prohlížečích ........................... 147
8. Typ prvku a viditelnost ...................................................... 149 8.1 Typ prvku – vlastnost display ..................................................... 149 block, inline, none ................................................................................................. 150 inline-block ............................................................................................................ 150 run-in ..................................................................................................................... 152 compact ................................................................................................................ 158 table, table-cell a inline-table ................................................................................ 158 Svislé centrování obsahu pomocí vlastnosti display ............................................. 166
8.2 Viditelnost prvku – vlastnost visibility ........................................ 167 8.3 Podpora vlastností v nejběžnějších prohlížečích ............................ 168
9. Pozice prvku ..................................................................... 169 9.1 Pozice prvku – vlastnosti position, top, right, bottom, right, z-index ................................................................ 169 Pozice prvku – position ......................................................................................... 169 Souřadnice prvku – top, right, bottom, left ............................................................ 170
Obsah
CSS
Pozice prvku ve třetím rozměru – z-index ............................................................ 170 Praktické příklady poziciování .............................................................................. 171 Kompletní rozvržení stránky pomocí position: absolute – pevný třísloupcový layout ................................................................................................ 171 Kompletní rozvržení stránky pomocí position: absolute – pružný třísloupcový layout ................................................................................................ 177 Kompletní rozvržení stránky pomocí position: absolute – částečně pružný třísloupcový layout ................................................................................................ 178 Kompletní rozvržení stránky pomocí position: absolute – částečně pružný třísloupcový layout – rozměry v em. ..................................................................... 185 Kompletní rozvržení stránky pomocí position: fixed – pružný třísloupcový layout s fixně poziciovaným ovládacím menu – rozměry v em ......... 192 Relativní poziciování řádkových prvků .................................................................. 201 Plovoucí „vykřičník“ ............................................................................................... 205 Pružné poznámky ve zdrojovém kódu .................................................................. 207 Svislé centrování obsahu – verze pro Internet Explorer ....................................... 210 Svislé centrování obsahu – kompletní verze (pro všechny prohlížeče) ................ 210
9.2 Plovoucí prvky – vlastnost float ................................................. 213 Praktické příklady použití vlastnosti float .............................................................. 213 Plovoucí nadpisy ................................................................................................... 213 Dva sloupce s obrázkem uprostřed ...................................................................... 217 Tři sloupce s obrázkem uprostřed ........................................................................ 219
9.3 Zrušení obtékání – vlastnost clear .............................................. 222 9.4 Podpora vlastností v nejběžnějších prohlížečích ............................ 225
10. Tabulky ........................................................................... 227 10.1 Tabulky a CSS ........................................................................... 227 10.2 Tabulkový formátovací model CSS .............................................. 228 10.3 Tabulkové prvky ....................................................................... 229 Přehled předdefinovaných hodnot display v XHTML ........................................... 229
10.6 Výška tabulky .......................................................................... 230 10.7 Vodorovné zarovnání obsahu buněk ........................................... 231 Teoretický výsledek: ............................................................................................. 231
Obsah
11
12
CSS
10.8 Svislé zarovnání obsahu buněk – vlastnost vertical-align............. 231 10.9 Formátování sloupců.................................................................. 237 10.10 Dynamické efekty – skrytí či zobrazení řádků a sloupců – vlastnost visibility ................................................. 240 10.11 Slučování rámů buněk – vlastnost border-collapse..................... 245 10.12 Rozestup mezi rámy buněk – vlastnost border-spacing.............. 245 10.13 Zobrazení prázdných buněk – vlastnost empty-cells .................. 246 10.14 Pozice titulku tabulky – vlastnost caption-side ......................... 246 10.15 Praktické příklady formátování tabulek v CSS ........................... 247 Příklad 1 – jednoduchá tabulka ......................................................................... 247 Příklad 2 – trochu složitější tabulka ................................................................... 249 Celý kód opravné funkce ................................................................................... 253 Celé řešení ........................................................................................................ 254
10.16 Automatické nastavení barev v buňkách podle obsahu .............. 256 Základní řešení .................................................................................................. 256
10.17 Podpora CSS v nejběžnějších prohlížečích .................................. 265
11. Generovaný obsah ........................................................... 267 11.1 Generování obsahu – vlastnost content ...................................... 267 <řetězec> ............................................................................................................. 268 attr(X) ................................................................................................................... 270 .................................................................................................................... 271 Čítače a uvozovky ............................................................................................... 272
11.2 Čítače – vlastnosti counter-increment a counter-reset .................. 272 11.3 Uvozovky – vlastnost quotes .................................................... 275 11.4 Podpora vlastností v nejběžnějších prohlížečích ........................... 277
12. Vlastnosti seznamů .......................................................... 279 12.1 Typ odrážky seznamu – vlastnost list-style-type ........................ 279 12.2 Obrázek jako odrážka seznamu – vlastnost list-style-image ........ 283 12.3 Umístění odrážky seznamu – vlastnost list-style-position............ 283 12.4 Sdružená vlastnost list-style...................................................... 284 12.5 Podpora vlastností v nejběžnějších prohlížečích ........................... 285
Obsah
CSS
13. Uživatelské efekty ........................................................... 287 13.1 Tvar kurzoru – vlastnost cursor ................................................. 287 13.2 Průhlednost prvku – vlastnost opacity ....................................... 288 13.3 Podpora vlastností v nejběžnějších prohlížečích ........................... 289
14. Vlastnosti tisku ............................................................... 291 14.1 Zalamování textu – vlastnosti page-break-before, page-break-after, page-break-inside .......................................... 291 14.2 Minimální počet řádků na stránce – vlastnosti orphans a widows 292 14.3 Tisknutelná oblast – pravidlo @page.......................................... 293 14.4 Velikost a orientace tisknutelné oblasti – vlastnost size .............. 293 14.5 Pojmenované stránky – vlastnost page ...................................... 294 14.6 Adresování první, levé a pravé strany – pseudotřídy :first, :left a :right ..................................... 294 14.7 Další tipy k formátování pro tisk................................................ 295 Zrušte tisk zbytečností ......................................................................................... 295 Barvy a pozadí ..................................................................................................... 295 Tisk odkazů .......................................................................................................... 295
14.8 Podpora vlastností v nejběžnějších prohlížečích ........................... 296
15. Odstřižení starých prohlížečů od stylů a skriptů, individualizace stylopisů ................................................... 297 15.1 Individualizace stylů .................................................................. 297 Připojení externích stylů ...................................................................................... 298 Link a import ........................................................................................................ 298 Podmíněné komentáře ........................................................................................ 298 Příklad odříznutí starších prohlížečů od stylu ...................................................... 299 Triky na úrovni pravidel stylů ............................................................................... 299 Triky se selektory ................................................................................................. 299 Další CSS triky ..................................................................................................... 299
Internet Explorer 5.5 a 6 ...................................................................................... 301 Konqueror 3.0-3.5 ................................................................................................ 301 Staré prohlížeče, Mozilla 0, Opera 6, IE 5.0 ........................................................ 302
16. Další tipy a řešení ............................................................ 303 16.1 Režimy prohlížečů ..................................................................... 303 16.2 Zapsání stylu JavaScriptem ....................................................... 306 16.3 Registrace ovladačů událostí ...................................................... 306 16.4 Jak na onload ........................................................................... 311 16.5 Rozbalovací nabídky.................................................................. 314 Svislá rozbalovací nabídka (změna výšky) .......................................................... 314 Svislá rozbalovací nabídka (pomocí display) ....................................................... 319 Víceúrovňová rozbalovací nabídka ...................................................................... 325 Několik poznámek ............................................................................................... 335
16.6 Nejzákladnější styly pište přímo do dokumentu ........................... 336
Úvod CSS (Tabulky kaskádových stylů, Cascading Style Sheets) jsou skutečným přelomem ve způsobu formátování webových prezentací. Protože CSS neovlivňuje obsah dokumentů samotných, umožňuje vytvářet čisté, přísně strukturované dokumenty, vyhovujíci logice i standardům, umožňující bezproblémovou práci s obsahem vašich stránek i jiným aplikacím, než jakými jsou běžné prohlížeče (včetně čtecích zařízení pro nevidomé, mobilních zařízení, XML aplikací, fulltextových vyhledávačů na webu, ale třeba i starých textových prohlížečů).
Jak je tato kniha napsána Tato kniha je psána trochu jinak, než je u většiny podobných knih o CSS zvykem. Najdete tu jen velmi málo teorie, kniha je koncipována spíše jako praktický manuál pro tvůrce webových stránek. Obsahuje základní popis využití CSS, dále detailní popis vlastností s přihlédnutím k praxi, řešení problémů pomocí JavaScriptu, využití spojení CSS a JavaScriptu, kompatibilitu CSS v nejčastěji používaných prohlížečích a další témata.
Úvod
16
CSS
Další rozdíl je v tom, že zde nezatajuji žádné problémy, které vás při vytváření dokumentů za pomoci CSS mohou potkat. Většina publikací o CSS se spokojí s tím, že popíší teorii, popíší stručně jednotlivé vlastnosti a připojí test podpory v jednotlivých prohlížečích v základních konstrukcích, avšak chování prohlížečů ve složitějších situacích příliš nerozebírají, aby čtenáře neodradili od CSS zcela. V této knize je tomu jinak – pokud jsem zjistil v určitých situacích nějaké nekorektní chování prohlížečů, neváhám na problém upozornit a nabídnu případně řešení. Rovněž se snažím nepreferovat žádný prohlížeč, nejsem ani stoupenec tzv. „IE ONLY“, ani bezvýhradný obdivovatel Mozilly, jsem zastáncem hesla „padni komu padni“, jen když to bude užitečné pro čtenáře.
Co byste měli znát Studium této knihy předpokládá, že máte alespoň základní znalosti jazyka HTML či XHTML. Není nutná žádná znalost CSS (...to vás má tato kniha přece naučit...). Vítána je znalost jazyka JavaScript – není však vůbec nutná –, při jeho neznalosti se pouze připravíte o spoustu zajímavých možností.
Struktura knihy Jak již bylo uvedeno výše, tato kniha má posloužit hlavně praktickým potřebám webových tvůrců, proto zde praxe vysoce převažuje nad teorií. Zájemce o studium teorie CSS odkazuji na jinou literaturu či ještě lépe přímo na stránky W3C (www.w3.org), kde naleznete přesné znění všech specifikací (CSS 1, CSS 2, CSS 2,1, jakož i stále ještě rozpracované CSS 3). Největší část obsahu knihy (kapitoly 3 až 14) proto tvoří popis jednotlivých vlastností, návody na jejich praktické použití (a využití), řešení případných problémů s nekompatibilitou v prohlížečích a zajímavé tipy. Na konci každé kapitoly je pak ještě tabulka s detailním popisem podpory vlastností popsaných v této kapitole, a to ve všech běžně používaných prohlížečích (novější verze prohlížečů Mozilla, Opera, Internet Explorer a Konqueror). Popisované vlastnosti jsou do jednotlivých kapitol zařazovány podle toho, v jakých situacích jsou nejčastěji využívány (např. vlastnost font-size spolehlivě najdete v kapitole Vlastnosti písma).
Historie formátování (X)HTML Ve svých počátcích v roce 1990 byla jediným cílem jazyka HTML prezentace obsahu (především textu) v čisté, strukturované formě, pouze s několika značkami. Mělo být pouze zřejmé, co je nadpis, co odstavec apod. Již v těchto dobách se předpokládalo, že způsob zobrazení se bude řídit stylovými předpisy. První webový prohlížeč na světě – NeXT – byl navržen tak, že výsledné formátování dokumentu bylo řízeno jednoduchým stylovým předpisem. Další prohlížeč, Mozaic z roku 1993, však tuto koncepci zcela opustil a možnosti práce se styly dokumentu prakticky znemožnil. Později si začalo mnoho autorů stěžovat, že nemohou nikterak ovlivnit vzhled svých HTML stránek. Proto byl již v roce 1994 vypracován první návrh „Cascading Style Sheets“. Bohužel se však v téže době objevil webový prohlížeč Netscape 1, což s odstupem doby byla pro web katastrofa. Firma Netscape totiž místo podpory stylů zabudovala vlastnosti pro řízení vzhledu přímo do značek HTML. Toto řešení započalo éru nekompatibility webových stránek i prohlížečů, a hlavně zanesení původně čistého a strukturovaného kódu HTML dokumentu různým formátovacím balastem. Postupně přišli na trh webových prohlížečů další výrobci, kteří v tomto trendu pokračovali, a HTML kód se tak zanášel dalšími značkami a jejich atributy, které nesloužili ničemu jinému,
Úvod
nežli k řízení vzhledu dokumentů. V jazyce HTML byly k dispozici i tabulky, a to výhradně k prezentaci tabulkových dat. Jenže autoři brzy přišli na to, že tabulky se dají využít k rozvržení stránek a nalili do buněk sloupce textu a dalšího obsahu. Autoři byli později „obohaceni“ o tzv. rámce, pomocí kterých bylo možno vzhled prezentace na obrazovce (ale pouze na ní) zobrazit do té doby nevídaným způsobem. Tak bylo například možno zajistit, aby v jednom místě obrazovky byly ovládací prvky, které se nerolovaly s ostatní prezentací. Rámce však přinášely spoustu problémů (ukládání, záložky, tisk, čtečky pro nevidomé atd.). Později začalo být i výrobcům prohlížečů jasné, že tudy cesta nevede. Prvním novodobým prohlížečem, který začal styly částečně podporovat, byl Internet Explorer 3. Jelikož v té době CSS však ještě nebyly nikým standardizovány, implementace CSS se v tomto prohlížeči s pozdějšími standardy příliš neshoduje. První verze specifikace standardizačního konsorcia W3C (CSS 1) byla uvedena v roce 1996, těsně po příchodu Internet Exploreru 3. Za otce dnešních CSS je považován Híkon Wium Lie, vývojář (dnes šéfvývojář) Opery. Další prohlížeče firmy Microsoft – verze 4 a 5.0 už měly zabudovánu poměrně slušnou podporu CSS (i když z dnešního pohledu naprosto nedostatečnou). Konkurenční Netscape byl zpočátku ke kaskádovým stylům velmi skeptický. První prohlížeč firmy Netscape, který začal CSS podporovat, byl Netscape 4. Podpora CSS v tomto prohlížeči je však minimální a velmi chybová. Podpora stylů v Netscape byla spíše důsledkem konkurenčního boje než touhy po standardech. V podstatě šlo jen o „z nouze ctnost“. Netscape 4 rozhodně nelze považovat za prohlížeč podporující CSS. Firma Netscape totiž v té době slavila velké úspěchy se svou velkou zbraní – skriptovacím jazykem JavaScript. Velká část programového kódu pro formátování HTML dokumentů již byla v JavaScriptu k dispozici. Vývojářům ve firmě Netscape se tedy zdálo jen přirozené využít JavaScript k práci se styly. Tak vznikl JSS (JavaScript Style Sheets). Tato alternativní technologie se však neujala a nikdy nebyla standarizována. Její podpora byla zabudována pouze do Netscape 4. Netscape později uvolnil svůj kód, který začali pod názvem Mozilla dále rozvíjet nezávislí tvůrci. Jádro Mozilly 0.6 poté zpětně firma Netscape implementovala do svého prohlížeče Netscape 6, a to přesto, že samotní tvůrci Mozilly upozorňovali na její přetrvávající chyby. Dá se říci, že ačkoliv je teoretická podpora standardů CSS, JavaScriptu i XHTML v Mozille 0 / Netscape 6 velmi rozsáhlá, v případě složitých konstrukcí zcela selhává. Další verze – Mozilla 1 / Netscape 7 vrátila firmu Netscape opět na piedestal tvůrce nejlepšího prohlížeče a svého konkurenta – Internet Explorer 6 – s přehledem poráží. Přesněji však nejde ani tak o Netscape, jako spíše o Mozillu a ostatní open source prohlížeče s jádrem Gecko (Phoenix, Firefox, Camino). O místo na slunci se však začíná hlásit další hráč – Opera. Zatímco do verze 6 nebyla považována za nijak oslnivý prohlížeč (pro nás zvláště kvůli problémům se zobrazováním češtiny, slovenštiny a středoevropských jazyků vůbec), verze 6 se stala celkem oblíbenou. Vývojáři Opery však nelenili, a jejich další verze – Opera 7 – byla bomba. Atraktivní design, bohaté možnosti nastavení, výborná podpora webových technologií. Další verze – Opera 7.5 – již v podstatě mírně předehnala Mozillu v podpoře CSS, slabší je však v JavaScriptu, ale jedná se jen o pokročlejší funkce. Současné verze prohlížečů (Mozilla 1.5+, Opera 7.5+, Konqueror 3.2+, Safari 1.2+, s (většími) výhradami i Internet Explorer 6) jsou již z hlediska podpory CSS i JavaScriptu na velmi vysoké úrovni. Není problém vytvořit pro tyto prohlížeče jakkoliv složitý XHTML dokument zcela bez použití HTML formátovacích značek, a pochopitelně i bez použití tabulek a rámů.
Úvod
17
Úvod
CSS
18
CSS
Co dokáže CSS Před nástupem CSS se HTML dokumenty formátovaly pomocí značek a jejich atributů (jmenujme například značky , či
, nebo atributy align či bgcolor). K rozvržení stránky se používaly výhradně tabulky (co se dříve nedělalo pomocí tabulek). S narůstající složitostí HTML dokumentů však narůstaly i problémy. Datový objem různých formátovacích značek a atributů byl často vyšší, než objem vlastního obsahu. Tím docházelo ke zpomalení načítání stránek, zbytečně narůstaly i nároky na servery (jakož i náklady). Formátování stránek pomocí skrytých tabulek pak přinášelo spoustu problémů pro jiná zařízení, nežli běžné prohlížeče. V podstatě byli vyřazeni zrakově handicapovaní, jejichž čtecí zařízení si s takovouto stránkou obvykle nedokáže poradit. Formátování dokumentů pomocí CSS tyto problémy odstraňuje. Umožňuje vytvořit čistý XHTML dokument, plně vyhovující současným standardům (např. velmi přísné normě XHTML 1.1), a hlavně 100% přístupný všem aplikacím – od velmi starých textových prohlížečů, přes zvuková zařízení, až po nejmodernější mobilní telefony. známka Po
Pochopitelně zde záleží na obsahu a účelu prezentace – např. e-obchod s rozsáhlou ukázkou zboží, formuláře řízené JavaScriptem apod., na mobilu či na papírovém výstupu z tiskárny asi nezprovozníte...
Používání CSS vám však přinese mnoho dalších, praktických výhod: širší možnosti formátování, snadnou tvorbu a údržbu stylu, dynamickou práci se styly, dopřednou kompatibilitu, možnosti řízení tisku, formátování XML dokumentů.
Širší možnosti formátování CSS nabízí mnohem širší možnosti formátování oproti HTML. Jeden příklad – seznamy. V HTML se rozlišuje mezi uspořádanými a neuspořádanými
seznamy. Neuspořádanému seznamu lze přiřadit jeden ze tří možných stylů odrážek, uspořádanému jeden z pěti. Pokud chcete změnit styl odrážek ze symbolů třeba na čísla (nebo naopak), musíte změnit i základní značky, a to včetně koncových. CSS mezi značkami a
nerozlišuje, je možno nastavit více druhů odrážek, dále libovolný obrázek či none. Změna je dílem okamžiku. Některé potřebné vlastnosti klasický způsob formátování pomocí HTML ani realizovat neumožňuje (nebo jen ve značně omezené míře) – např vlastnosti okrajů, výplní, orámování, pozadí jiných než tabulkových prvků, nebo poziciování (přesné nastavení polohy). V CSS lze přesně umístit nejen jakýkoliv prvek, ale třeba i obrázek na pozadí.
Úvod
CSS
19
Obtížnost tvorby a především změn patří mezi největší slabiny klasického HTML formátování. Všechny související stránky by měly by měly být formátovány shodně (tzv. zásada konzistentního stylu). Tedy např. barvy, písmo, ale i styl nadpisů, odstavců, odkazů, apod. Toho se při klasickém HTML formátování dociluje jen velmi obtížně. Ještě obtížnější je provést změnu vzhledu celého webu. Znamená to projít všechny HTML dokumenty, nalézt a změnit stovky značek a jejich atributů, či dokonce zcela „překopat“ tabulky užité k poziciování prvků. Naproti tomu změna webu používajícího CSS je snadná a rychlá. Pokud se například rozhodnete změnit barvu nadpisů, stačí jednoduchá úprava v tabulce stylů. Pokud byste chtěli totéž provést u webu formátovaného „postaru“, bylo by třeba projít všechny HTML dokumenty, vyhledat v nich všechny nadpisy a ručně změnit jejich atributy ve značkách . Pokud jsou tyto stránky vytvořeny dokonce pomocí WYSIWYG editoru, bývá balast několikráte se opakujících a vzájemně se „přebíjejících“ formátovacích značek často tak „neproniknutelný“, že jediným východiskem je provést změny zase jen v tomto editoru.
Dynamická práce se styly Pomocí kombinace CSS a JavaScriptu lze vaše stránky obohatit o spoustu efektů, lze však i zcela změnit chování prezentace. Například rozbalovací nabídky či automatické nastavení barvy pozadí tabulkových buněk v závislosti na jejich obsahu.
Dopředná kompatibilita Dopředná kompatibilita znamená, že vaše dokumenty, vytvořené například podle standardu XHTML 1.1, budou zaručeně funční i v budoucích generacích webových prohlížečů, neboť současné verze standardů (XHTML, CSS, JavaScript) budou dozajista platit velmi dlouho, a prohlížeče je tedy budou podporovat, což se o formátování HTML tvrdit nedá. Normy HTML 4.01 a XHTML 1.0 již mnoho starších značek a atributů prohlásily za odmítnuté, a jejich užívání je povoleno pouze v tzv. přechodových verzích těchto norem (Transitional), verze XHTML 1.1 pak většinu formátovacích značek a atributů zakázala zcela. A nejde jen o „jakési standardy, které stejně nikoho nezajímají“, nejmodernější prohlížeče už nyní přestávají zvlášť zastaralé značky podporovat a tento trend bude dozajista pokračovat. Navíc, dokument vytvořený zcela bez formátovacích značek HTML dokáží zpracovat i další aplikace. Můžete sice namítnout, že vytváříte stránku určenou výhradně k prezentaci na počítačovém monitoru, nikoliv kód pro řízení mikrovlnné trouby, avšak: Nikdy nevíte, pro jaké zařízení budete v budoucnu chtít svůj dokument zpřístupnit (třeba mobilní telefon). Tím, že se naučíte vytvářet bezchybné dokumenty XHTML, bude pro vás budoucí přechod k jazyku XML mnohem snazší.
Řízení tisku Pomocí CSS můžete též dokonale ovládat chování dokumentu při tisku. Můžete například určit, že na začátku každé vytištěné stránky bude logo vaší firmy, nebo můžete zakázat tisk ovládacích tlačítek a určit, že po celé šířce tištěné plochy bude pouze vlastní obsah.
Úvod
Úvod
Snadná tvorba a údržba stylu
20
CSS
Formátování XML dokumentů Formátovat pomocí CSS lze nejen tradiční (X)HTML dokumenty, ale též dokumenty XML. Tato možnost je velmi důležitá, protože XML dokumenty sice současné prohlížeče již zobrazit dokáží, avšak bez jakéhokoliv formátování. Nepočítáme-li stylování pomocí XSL, je použití CSS jedinou použitelnou metodou, jak dokument vhodně zobrazit.
Vlastnosti prohlížečů a jejich použitelnost Protože technologie CSS je poměrně nová, starší prohlížeče nedokáží dokumenty stylované pomocí CSS správně zobrazit. V zásadě je možné prohlížeče rozdělit do čtyř skupin: Archaické – tyto prohlížeče používá minimum uživatelů. Žádná podpora CSS, žádná nebo jen symbolická podpora JavaScriptu. Těmto prohlížečům můžeme nabídnout pouze čisté XHTML, jinak se jimi nemusíme zabývat. Příklady těchto prohlížečů: textové prohlížeče, Netscape 1, 2, 3, Internet Explorer 1, 2, 3, Opera 1, 2, 3. Silně zastaralé – tyto prohlížeče se občas ještě provozují, jejich podíl však (naštěstí) rychle klesá. Je pro ně charakteristická nízká podpora CSS i JavaScriptu (především standardní DOM). Také touto skupinou je zbytečné se zabývat, chceme-li, můžeme jim nabídnout pouze pár jednoduchých stylů a JavaScriptových efektů. Složitější styly a skripty by v nich napáchaly více škody než užitku. Příklady těchto prohlížečů: Netscape 4, Opera 4 a 5, Internet Explorer 4 a 5.0. Zastaralé – tyto prohlížeče se vyznačují na jedné straně velmi vysokou podporou CSS i JavaScriptu, na straně druhé však také značnou chybovostí a mezerami. Vzhledem k jejich velkému zastoupení na webu však musíme s těmito prohlížeči vážně počítat, a prezentaci navrhnout tak, aby i těmto prohlížečům byla přístupná v „plné parádě“. Bohužel, chování Mozilly 0 a Opery 6 je však ve složitějších konstrukcích velmi problematické, někdy v nich takovouto složitější prezentaci ani nezprovozníme. O problémech Internet Exploreru se dají psát romány. Příklady těchto prohlížečů: Mozilla 0 / Netscape 6, Opera 6, Internet Explorer 5.5 a 6. Moderní – současné verze kvalitních prohlížečů mají vysokou podporu CSS i JavaScriptu, není problém v nich zprovoznit jakkoliv složitou a efektní prezentaci zcela bez použití HTML formátování, tabulek a rámců. Příklady těchto prohlížečů: Mozilla 1 / Netscape 7, Opera 7,
Úvod
CSS
21
Konqueror 3,
Supermoderní – nejnovější verze prohlížečů jsou zatím ve stadiu betaverzí a prvních subverzí. Mají velmi vysokou podporu CSS i JavaScriptu, není problém v nich zprovoznit jakkoliv složitou a efektní prezentaci zcela bez použití HTML formátování, tabulek a rámců. Příklady těchto prohlížečů: Mozilla 1.75+ / Netscape 8+, Opera 8+, Konqueror 3, 4+.
Nejčastější problémy používaných prohlížečů I novější prohlížeče mají v některých náročnějších konstrukcích problémy. Jde většinou o velmi složité prezentace (e-obchod na straně klienta, skrývání a zobrazování celých bloků, fixní polohování, čtení a zápis formulářových prvků apod.). Nejvážnější problémy těchto prohlížečů uvádím níže. (Kategorie archaických a silně zastaralých prohlížečů zde již nerozebírám.) Mozilla 0 / Netscape 6 – v těchto prohlížečích je teoretická podpora CSS i JavaScriptu velmi vysoká. Bohužel platí, že čím složitější konstrukce a čím vyšší důraz klademe na nejnovější standardy, tím je chování Mozilly 0 / Netscape 6 problematičtější. Do jisté míry lze tyto chyby kompenzovat JavaScriptem, nebo zvolit méně náročnou normu (např. HTML 4.0 Transitional). Pokud se však nehodláme vzdát možností naší prezentace, ani striktního dodržování standardů (samozřejmě za předpokladu, že naše prezentace bez problémů funguje v Mozille 1 – tam „šlapat“ musí, jinak je chyba na naší straně), nezbývá nic jiného, než i tomuto prohlížeči nabídnout pouze základní (X)HTML dokument. Problémy s týkají především JavaScriptu (například standard XHTML 1.1 nepovoluje atribut target u formulářů. Pokud tedy chceme zaslanou odpověd ze serveru zobrazit v novém okně, musíme jej otevřít JavaSciptem. Mozilla 0 toto okno sice otevře, ale odpovědi se nedočkáme. Ve složitých konstrukcích jsem pozoroval i chyby v použítí stylů, například rozměry grafiky, rodina písma nebo zarovnání textu. Samozřejmě šlo o poněkud extrémně složité konstrukce, jež se však v Mozille 1 zobrazily bez problémů). Pokud ovšem tvoříte pouze „běžné“ WWW stránky, problémy se nevyskytují, a můžete se spolehnout na vysokou podporu CSS i JavaScriptu. Platí, že v Mozille 0 / Netscape 6 zprovozníme i velice složitou prezentaci, pokud slevíme z dodržování standardů. Tyto staré verze Mozilly se dnes již téměř nevyskytují.
známka Po
Opera 6 – problémy se týkají CSS a ještě více JavaScriptu. Opera 6 při pokusu číst a zapisovat hodnoty formulářových prvků skrytých vlastností display:none pomocí JavaScriptu končí pádem. Rovněž Opera 7 toto nedokáže, avšak pádem nekončí. Pokud naše prezentace ke své činnosti formulářové prvky nezbytně potřebuje, je nutné dosti složité obcházení tohoto problému opravným kódem JavaScriptu.
Úvod
Úvod
Safari 1.
22
CSS známka Po
Opera 7.5 již popsanými problémy JavaScriptu netrpí.
Internet Explorer 5.5 a 6.0 – největším problémem těchto prohlížečů je chybný výpočet rozměrů, dále absence přetékání, chybné chování selektorů a pseudotříd (nebo absence jejich podpory), chybný výpočet velikosti písma (zadaného klíčovým slovem, procenty, nebo bez zadání), nízká podpora formátování tabulek. Nepříjemným problémem je dále skutečnost, že nepodporují fixní poziciování prvků (position:fixed). Tento typ umísťování prvků na stránce umožňuje docílit podobných efektů, kterých se dříve dosahovalo pomocí tzv. rámců. Pokud tedy hodláme vlastnost position:fixed ve svých webových prezentacích používat, musíme pomocí v této knize popsaných způsobů vlastnost position převést na hodnotu absolute, případně nastavit vzhled zakončení stránky. Není sice problém pro tyto prohlížeče CSS vytvořit, jen dá zbytečnou práci jej pro ně „optimalizovat“. Pro tvůrce webu jde o nejhorší dnes používané prohlížeče.
Vytvoření kompletního vzhledu (layoutu) pomocí CSS Současný trend při tvorbě XTML dokumentů směřuje k tomu, že veškeré rozmístění (polohování) prvků svěříme CSS (nikoliv dříve obvyklým tabulkám a rámcům). Takto formátovaný dokument dokáží bez problémů zobrazit nejen všechny moderní prohlížeče (Mozilla 1+, Opera 7+, Konqueror 3+, Safari 1+, částečně i Internet Explorer 5.5 a 6), ale i prohlížeče o generaci starší. Přístupnost obsahu prezentace pro zastaralé prohlížeče pak vyplývá automaticky z kvalitně strukturovaného dokumentu. Změna vzhledu prezentace, v níž je i rozmístění prvků řízeno CSS, je potom hračkou. Snadno několikerým stiskem kláves na klávesnici změníme zcela vzhled naší prezentace. Nejen barvy, písmo, zarovnání či rozměry prvků, ale i jejich umístění. Přestaly nám vyhovovat tlačítka nahoře – umístíme je tedy vlevo! Zbylý obsah umístíme vpravo. Něco takového, zvláště máme-li celou kolekci dokumentů, by bylo v případě použití tabulek a rámců značně obtížné. Z vlastní zkušenosti si troufám tvrdit, že pokud si jednou vyskoušíte rozvržení dokumentu pomocí CSS, již se nebudete chtít ke starým tabulkám a rámcům vrátit.
Nestandardní vlastnosti v CSS Kromě standardních vlastností, definovaných ve specifikaci CSS, prohlížeče často podporují další (nestandardní) vlastnosti. Všechny možné hodnoty patří do některé z těchto kategorií: Standardní vlastnosti CSS: vlastnosti, jejichž možné hodnoty a možnosti užití odpovídají v současnosti platné specifikaci CSS 2.1. Tato kniha se věnuje především této skupině. Připravované vlastnosti CSS: jedná se o vlastnosti, o nichž se zmiňuje stále ještě nehotová CSS 3, u kterých je dosti velká šance, že nakonec ve specifikaci CSS 3 budou zakomponovány. Ovšem z pohledu CSS 2.1 se jedná o hrubý nestandard, a současná verze validátoru (programu na kontrolu validity) označí tyto za nevalidní (odporující platné specifikaci CSS 2.1). V této knize jsou některé zajímavé vlastnosti popsány, vždy však uvádím, že jde o připravovanou vlastnost CSS 3. Pokud
Úvod
se rozhodnete tyto vlastnosti použít, mějte prosím na paměti, že v době psaní této knihy je CSS 3 ve stadiu rozpracovanosti, proto je možné, že dojde ke změnám. Proto berte popis těchto vlastností spíše jako informativní, a vše si raději ověřte na stránkách W3C (www.w3.org). Odmítnuté vlastnosti CSS: vlastnosti, které byly postoupeny konsorciu W3C ke schválení v rámci specifikace CSS 3, a byly buďto odmítnuty, nebo alespoň „dány k ledu“, a u kterých je mizivá šance, že nakonec ve specifikaci CSS 3 budou zakomponovány (často mi přijde, že je to škoda). Proprietární vlastnosti CSS: hrubě nestandardní rozšíření prohlížečů (přesněji Internet Exploreru). V této knize se jimi nezabývám. Zajímavou podkategorií jsou zkušební vlastnosti Mozilly (moz–něco), simulující CSS 3.
Symboly použité v tabulkách kompatibility Na konci kapitol 3 až 14 je vždy uvedena tabulka představující úroveň podpory vlastností CSS, popsaných v příslušné kapitole, v běžných webových prohlížečích. Jsou v nich použity následující symboly: ++
Prohlížeč danou vlastnost podporuje zcela.
+
Prohlížeč danou vlastnost podporuje pouze částečně.
!+
Prohlížeč danou vlastnost podporuje chybně.
!!!
Prohlížeč danou vlastnost podporuje s vážnými chybami.
--
Prohlížeč danou vlastnost nepodporuje vůbec.
Symboly použité v popisu syntaxe V popisu syntaxe jsou použity následující symboly: [ ... ]
Hranaté závorky uzavírají položky.
[x]*
Hodnota se může vyskytovat v libovolném počtu či vůbec.
[x]?
Hodnota se může vyskytovat (1×), ale nemusí (0×).
[x]+
Hodnota se může vyskytovat v libovolném počtu, nejméně však 1×.
[x](x,y)
Hodnota se může vyskytovat minimálně x-krát a maximálně y-krát.
x|y|z
Alternativy, jedna z těchto položek.
x || y || z
Alternativy, jedna nebo více z těchto položek.
Úvod
23
Úvod
CSS
24
CSS
Testované prohlížeče Hlavní verze prohlížečů:
Testované verze:
Mozilla 0
Mozilla 0.94 WINDOWS
Zobrazené prohlížeče (Operační systém) -–-
Mozilla 0.98 WINDOWS Mozilla 1
Mozilla 1.21 LINUX
Mozilla 1.6 LINUX
Mozilla 1.21 WINDOWS
(Suse Linux 9.1)
Mozilla 1.6 LINUX Mozilla 1.8
Mozilla 1.8b LINUX
-–-
Firefox 1.02 LINUX Opera 6
Opera 6.0 LINUX
Opera 6.06 WINDOWS
Opera 6.0 WINDOWS
(Windovs 98 SE)
Opera 6.06 WINDOWS Opera 6.12 LINUX Opera 7
Opera 8
Opera 7.10 WINDOWS
Opera 7.23 LINUX
Opera 7.23 LINUX
(Suse Linux 9.1)
Opera 7.23 WINDOWS
Opera 7.54 LINUX
Opera 7.54 LINUX
(Suse Linux 9.1)
Opera 8.00 LINUX
Opera 8.00 LINUX (Suse Linux 9.1)
Internet Explorer 5
Internet Explorer 5.01 WINDOWS
-–-
Internet Explorer 5.5
Internet Explorer 5.5 WINDOWS
Internet Explorer 5.5 (Windows 98 SE)
Internet Explorer 6
Internet Explorer 6.0 WINDOWS XP
-–-
Konqueror 3
Konqueror 3.2 LINUX
Konqueror 3.2
Konqueror 3.4 LINUX
(Suse Linux 9.1) Konqueror 3.4 (Suse Linux 9.3)
Elektronická verze knihy na CD Přílohou této knihy je její elektronická verze na CD. To vám umožní nejen přímý přístup k příkladům (naleznete je ve složce kniha/grafika//html), ale také umožní testování příkladů i v prohlížečích, které v době psaní ještě nebyly na světě. Pod většinou příkladů naleznete tlačítko PŘÍKLAD, které vám po stisku umožní posoudit zpracování aktuálně použitým prohlížečem.
Úvod
1. Základy CSS Standardní verze CSS vyvíjí a publikuje organizace W3C (World Wide Web Consortium – www.w3.org). Verze CSS specifikované W3C jsou všeobecně považovány za standardní, pokud se setkáte s pojmy jako „Standardy CSS“, „Specifikace CSS“ apod., je tím míněna právě (většinou nejaktuálnější) verze CSS od W3C. Existují sice i různé jiné verze CSS (typicky od výrobců prohlížečů) s různými proprietárními vlastnostmi, které jsou však vázány pouze na prohlížeče daného výrobce, a jinde většinou nefungují. Pokud se však tyto původně proprietární vlastnosti ukáží jako užitečné, W3C je obvykle časem standardizuje. Organizace W3C sice není zřízena žádným zákonem a porušení jejich specifikací není trestným činem, přesto se to nevyplatí – použijete-li pouze proprietární řešení určitého výrobce (CSS, JavaScript aj.), bude váš dokument funkční pouze v jednom prohlížeči, pro uživatele jiných prohlížečů (či zcela odlišných zařízení) bude nepoužitelný. Proto silně doporučuji (a nejen já) tvořit dokumenty dle standardů W3C, a pro méně schopné prohlížeče pak vše pouze „doladit“. V současné době je aktuální verzí CSS 2.1, což je ovšem pouze mírně vylepšená CSS 2. Nyní se pracuje na CSS 3, která by měla možnosti CSS výrazně rozšířit.
25
Základy CSS
CSS
26
CSS
1.1 Základem je dobrý dokument Pokud to myslíte s tvorbou webových dokumentů „na úrovni“ opravdu vážně, měli byste si nejprve sehnat nějakou dobrou (tlustou) knihu o XHTML (...a učit se, učit se, učit se...). Pro účely této knížky však postačí i základní znalosti HTML. Vždy však platí, že vaše dokumenty by měly být řádně strukturované a bez chyb v kódu. Příklady uvedené v této knize používají hlavičku (XHTML 1.1 , kódování UTF-8), zatímco ve výpisech kódů v knize je to zjednodušeno. V praxi však je nutno tuto ještě rozšířit o různé meta-tagy, linky apod. <meta http-equiv=″content-type″ content=″charset=utf-8″ /> Titulek
1.2 Vytvoření stylopisu Základní syntaxe Styly platné pro celý dokument se zapisují buďto přímo do dokumentu v sekci , nebo do externího souboru s koncovkou .css. Tím dojde k vytvoření stylopisu (anglicky stylesheet). Někdy se používají též názvy tabulka stylů, šablona stylů a jiné. Ve stylopisech pak definujeme pravidla stylů, skládající se minimálně ze tří částí: selektoru, jenž identifikuje prvky, jejichž prezentaci má pravidlo ovlivňovat, názvu vlastnosti a hodnoty. Například po aplikaci následujícího pravidla se všechny odstavce vykreslí červeným písmem: p {color:red;} Dvojice [název vlastnosti:hodnota;] se ukončují středníkem, mezi nimi je dvojtečka. Pravidlo může obsahovat i více takových dvojic, a některé vlastnosti mohou vyžadovat nebo povolovat více hodnot. Za poslední dvojicí [název vlastnosti:hodnota;] je středník volitelný, avšak doporučuji jej zapisovat. Za prvé se tím sníží možnost chyb, za druhé při použití nestandardních vlastností CSS mají některé prohlížeče problémy, nejsou-li ukončeny středníkem. Dvojice [název vlastnosti:hodnota;] se označuje slovem definice stylu. p {color:red; background:yellow; padding:1px 3px 1px 10px; border: thin solid red;} Nebo: p { color: red; background: yellow; padding: 1px 3px 1px 10px; border: thin solid red; }
1. Základy CSS
CSS
27
Oba zápisy jsou rovnocenné, stylopis si můžete zformátovat dle libosti – místo jedné mezery může být libovolný počet mezer nebo odřádkování. Jakýkoliv počet mezer či odřádkování může být rovněž před/za nějakým oddělovačem.
Ve stylopisech lze používat i komentáře (vysvětlující popisky, atd.). Lze je umístit kdekoli, ovšem s touto výjimkou: nelze je vkládat do středu selektorů, názvů vlastností a hodnot. Komentáře se vkládají mezi znaky /* a */ – vše mezi nimi je považováno za komentář a je ignorováno. /* Korektní komentář */ h1 {border: 5px double red;} /* Korektní komentář */ h1 /* Korektní komentář */ {border: /* Korektní komentář */ 5px double red;} h1 {border: 5/* CHYBNĚ */px double red; font/* CHYBNĚ */-size: 200%;}
1.3 Připojení stylopisu k dokumentu XHTML Zápis přímo do dokumentu Pro zápis stylopisu na úrovni dokumentu se používá párová značka <style>, která se umisťuje do sekce . Do značky <style> je nutno zapsat ještě příslušný MIME-typ, tj. type=„text/css“. V XHTML je navíc nutno deklarovat obsah značky <style> jako #CDATA. V XHTML mají značky style a script obsah typu #PCDATA, což znamená, že například znak < bude XML procesorem považován za počátek značky, znak > za její ukončení atd. Kvůli zajištění zpětné kompatibiliy se tato deklarace uzavírá do komentářů CSS – celé to pak vypadá takto: <style type=″text/css″> /* */ Uzavření stylopisu do deklarace #CDATA má ještě další výhodu – staré prohlížeče, vzniklé před příchodem XHTML, s velmi špatnou a chybovou (ne)podporou CSS se k tomuto stylopisu vůbec nedostanou – celý stylopis interpretují jako jim neznámou značku.
Načtení externího stylopisu Základní (a nejčastější) způsob načtení externího stylopisu je pomocí značky . Do této značky je nutno zapsat ještě příslušný MIME-typ, tj. type=„text/css“, a dále musíme prohlížeči (správněji klientu – anglicky přesně “user agent“ – pro zjednodušení používám většinou slovo „prohlížeč“) sdělit, že propojení směřuje na stylopis, tj. uvést atribut rel=„stylesheet“. Celé to pak vypadá takto :
1.3 Připojení stylopisu k dokumentu XHTML
Základy CSS
Komentáře
28
CSS
Druhý způsob zavedení externího stylopisu je použití příkazu @import, zapsaný jako obsah značky <style>. Za slovem @import pak zapíšeme URI, a to buď standardně jako url (URI), nebo jako řetězec. Tento zápis má mnoho variant, a jeho časté využití je „odstřižení“ starších prohlížečů od stylu, který by v nich napáchal jen škodu. Blíže v kapitole 15. Odstřižení starých prohlížečů od stylů a scriptů, individualizace stylopisů. Příklad: <style type=″text/css″> /* */ Pokud použijete výše uvedené pravidlo @import, a zároveň chcete definovat „klasická“ pravidla stylů (je to možné), je nutno pravidla @import uvést vždy před všemi ostatními pravidly. Pravidlo @import lze použít i v externích stylopisech, a připojit tak ke stylopisu jiné tabulky stylů. @import url (″styly.css″) ; body{font-family:sans-serif;} V dokumentech XML se načtení stylů provádí níže uvedenou deklarací. Jelikož podmnožinou XML je i XHTML, je tento způsob možný i zde, ale téměř se nepoužívá.
1.4 Hodnoty Hodnoty jednotlivých vlastností mohou být těchto typů: klíčová slova, číslo, velikost, procenta, barva, URI, řetězec, úhel, čas, frekvence.
Klíčová slova Klíčová slova obvykle vyjadřují nějakou akci (line-through – přeškrtni text), nebo mohou zastupovat jinou hodnotu (často závislou na cílovém zařízení), například thin – tenký. Zapisují se bez uvozovek.
1. Základy CSS
CSS
29
<číslo> , Celá čísla (celé_číslo) se zapisují pomocí číslic 0-9, reálná čísla (číslo) se zapisují stejně, případná desetinná část se odděluje desetinnou tečkou – u nás obvyklý zápis s desetinnou čárkou je chybný. Před každým číslem může být znaménko „+“ nebo „-“. Pokud je celá část desetinného čísla 0, smí se vynechat (0.45 i .45 je stejné číslo).
Délkové hodnoty (, ) určují velikost nebo délku určité vlastnosti. Jedná se v podstatě o číslo (číslo nebo celé_číslo), za kterým bezprostředně (bez mezery) následuje dvoupísmenná zkratka měrné jednotky. Pokud je celé_číslo 0, jednotku je možno vynechat. Měrná jednotka může být absolutní nebo relativní.
Absolutní jednotky Absolutní jednotky lze použít tehdy, jsou-li předem známy rozměry výstupního média (například papíru na tiskárně), jinak je vhodné použít raději jednotky relativní nebo procenta. Absolutní jednotky se ostatně používají zřídka, občas se používají „pt“ ve stylopisech určených k řízení tisku. pt
Typografický bod (0,3528 mm).
pc
Typografická jednotka „pica“ (0,0294 mm).
mm
Milimetry.
cm
Centimetry.
in
Anglické palce (25,4 mm).
Relativní jednotky Relativní jednotky se vždy vztahují k jiné hodnotě. em
Výška aktuálního písma, při použití na vlastnost font-size pak výška písma rodičovského prvku.
ex
Výška písmene „x“ v aktuálním písmu.
px
Jednotka „px“ je velmi zajímavá. Ačkoli je často považována za jednotku absolutní, jde o jednotku relativní. Někteří autoři dokonce vyčleňují tuto jednotku do zvláštní kategorie „pixelová“. Je to tím, že prohlížeče v případě výstupu na monitor chápou 1 pixel jako 1 bod obrazovky, ovšem pokud je koncové zařízení jiného typu (tiskárna, projektor) vynikne relativnost jednotek „px“. Jde tedy o jednotku relativní vzhledem k výstupnímu médiu.
<procenta> Procentuální hodnoty se vždy vztahují k jiné hodnotě. Jedná se v podstatě o číslo (číslo nebo celé_číslo), za kterým bezprostředně (bez mezery) následuje znak procent (%). Pokud je celé_číslo 0, znak % je možno vynechat.
1.4 Hodnoty
Základy CSS
,
30
CSS
Barvy lze zadat jako dekadickou trojici RGB (například rgb(255,255,255)), procentálně (například rgb(100%,100%,100%)), hexadecimálně (například #ff00c4) – pokud jsou složky barvy zapsány vždy dvěma stejnými číslicemi, je možno použít i zkrácený zápis (například #55ffaa=#5fa). Barvy je možno zadat také pomocí těchto klíčových slov: black (#00000 – černá), silver (#c0c0c0 – stříbřitá), gray (#808080 – tmavě šedá), white (#ffffff – bílá), red (#ff0000 – červená), maroon (#800000 – hnědá), purple (#800080 – fialová), fuchsia (#ff00ff – růžová), green (#008000 – tmavě zelená), lime (#00ff00 – světle zelená), olive (#808000 – olivová), yellow (#ffff00 – žlutá), blue (#0000ff – modrá), navy (#000080 – tmavě modrá), teal (#008080 – šedozelená), aqua (#00ffff – tyrkysová). Dále lze použít klíčová slova odpovídající barvám v operačním systému. I když je tento způsob standardizován, osobně jej nedoporučuji. Připadá mi totiž šitý na míru operačnímu systému Microsoft Windows s jeho primitivním pravoúhlým GUI. Proč? V kvalitních systémech si uživatel může nastavit skutečně jakýkoliv vzhled titulku okna – zaoblený, stínovaný, vícebarevný atd. Pokud je použita barva pozadí titulků, pak ve Windows bude odpovídat naší představě, ale například v Linuxu nikoliv. Jiný příklad: „pozadí okna“ a „text okna“. Osobně mám například nastaveno tmavě šedé pozadí a světle šedý text, což však neznamená, že stojím o to, aby se mi touto nepříliš čitelnou kombinací zobrazila nějaká webová stránka...
URI představuje platnou adresu externího zdroje. Zapisuje se ve tvaru url(cesta/soubor), přičemž obsah závorek může být volitelně uzavřen v jednoduchých či dvojitých uvozovkách. Pokud se v URI nacházejí mezery, uvozovky, čárky nebo závorky, musí být nahrazeny escape sekvencemi nebo jednoduše „odraženy“ zpětným lomítkem. V případě relativních adres je třeba pamatovat, že se vztahují k adrese souboru se styly. url(http://www.neco.cz/obrazky/obr-25.png) url(’../obrazky/pozadi.png’)
1. Základy CSS
CSS
31
<řetězec> Řetězcové hodnoty se vždy uzavírají do jednoduchých či dvojitých uvozovek. Pokud se v řetězci nacházejí uvozovky nebo znaky odřádkování, musí být „odraženy“ zpětným lomítkem. Pokud chcete do řetězce vložit platný znak odřádkování, použijte sekvenci \A.
<čas>
Základy CSS
Čas se zadává v sekundách (s) nebo milisekundách (ms).
1.5 Selektory Selektory (česky něco jako „přepínače“) určují, na které prvky dokumentu se mají definice stylu vlastně vztahovat. Pokud jeden či více prvků tomuto selektoru vyhovuje, bude se na něj vztahovat pravidlo stylu.
Selektory typu Tomuto selektoru vyhovují všechny prvky dané značky. Zapisuje se jednoduše názvem značky. h1 { ... }
Univerzální selektor Jde o nejobecnější selektor – vyhovují mu totiž všechny prvky. Zapisuje se znakem „*“. Pokud není univerzální selektor jedinou částí jednoduchého selektoru, může být vynechán. * { ... } *[class~=trida] { ... } /* Možno zapsat i jako [class~=trida] { ... } */ *>ul { ... } /* Zde není možno univerzální selektor vynechat. */
Selektory třídy Tento selektor patří mezi nejčastěji používané. Technicky vzato jde o zjednodušený zápis jednoho ze selektorů atributu. Tomuto selektoru vyhovují prvky, jejichž atribut class obsahuje příslušnou hodnotu. Obsahuje-li atribut class více hodnot oddělených mezerami, stačí, pokud vyhoví jedna z nich. Zapisuje se jako tečka bezprostředně následovaná jménem třídy. *.trida { ... } .trida { ... } p.trida { ... }
/* Možno zapsat i jako [class~=trida] { ... } */ /* Takto je to ještě stručnější */ /* Vztahuje se na odstavce třídy ”trida” */
Násobné třídy V XHTML může být hodnotou atributu class také seznam více tříd (oddělených mezerami). Prvek pak může být současně zařazen v několika třídách. .zelena { color: green; } .kurziva { font-style: italic; }
1.5 Selektory
32
CSS
.....
Zelený text
Kurzíva
Zelená kurzíva
Selektory ID Dokumenty XHTML i XML mohou používat tzv. jedinečné idetifikátory (v XHTML atribut id). Tento atribut musí být unikátní, tedy smí se v celém dokumentu vyskytovat pouze jednou. Jedině tak máme jistotu, že náš styl ovlivní pouze jeden přesně určený prvek. Zapisuje se jako znak (#) bezprostředně následovaný jménem identifikátoru. #xyz { ... }
/* Možno zapsat i jako [id=xyz] { ... } */
Selektory s atributy Značky XHTML i XML mohou obsahovat i nejrůznější atributy, které zase mohou obsahovat nejrůznější hodnoty (například href=“str-2.html“ nebo title=“Titulek“). CSS umožňuje adresovat prvky i na základě těchto atributů. Zapisují se vždy do hranatých závorek, před nimi může být volitelně (bez mezery) název značky (například p[]).
Existence atributu Tomuto selektoru vyhovují prvky, které obsahují určený atribut, přičemž na hodnotě atributu nezáleží. Například selektoru img[title] vyhoví všechny prvky img, které mají definovány atribut title. [atribut] { ... }
Atribut hodnoty Tomuto selektoru vyhovují prvky, jejichž určený atribut má přesně určenou hodnotu. Například selektoru img[title=“Zvětšit“] vyhoví všechny prvky img, jejichž atribut title má hodnotu „Zvětšit“. Hodnoty, které nejsou identifikátory (např. class nebo id) musí být zapsány v uvozovkách. [atribut=hodnota] { ... }
Atribut obsahující hodnotu Tomuto selektoru vyhovují prvky, jejichž určený atribut obsahuje seznam hodnot oddělených mezerou a jedna z těchto hodnot je rovna určené hodnotě. Například selektoru img[class~=def] vyhoví všechny prvky img, jejichž atribut class obsahuje hodnotu „def“ (například ). Hodnoty, které nejsou identifikátory (např. class nebo id) musí být zapsány v uvozovkách. [atribut~=hodnota] { ... }
Atribut obsahující podhodnotu Tomuto selektoru vyhovují prvky, jejichž určený atribut obsahuje seznam hodnot oddělených pomlčkou a první z těchto hodnot je rovna určené hodnotě. Tento selektor je určen zejména k rozlišování jazyka. Například selektoru p[lang|=en] vyhoví všechny prvky p,
1. Základy CSS
CSS
33
jejichž atribut lang obsahuje jako první hodnotu „en“ (například
). Hodnoty, které nejsou identifikátory (např. class nebo id) musí být zapsány v uvozovkách. [atribut|=hodnota] { ... }
Vícenásobné selektory s atributy Atributy mohou být v selektorech uvedeny i vícenásobně. Zapisují se bez mezer.
Selektory následníků Tomuto selektoru vyhovuje prvek X, který je následovníkem (neboli je uvniř) prvku Y. Zapisuje se ve tvaru Y X (operátorem je povinná mezera). div.obsah p { ... }
/* Vyhoví odstavec, který je obsažen v prvku div.obsah */
table.t-1 th { ... }
/* Vyhoví buňka, která je obsažena v tabulce table.t-1 */
Selektory potomků Tomuto selektoru vyhovuje prvek X, který je přímým potomkem prvku Y (neboli prvek Y je jeho rodičem). Zapisuje se ve tvaru Y>X. ..... div.obsah>ul { ... } .....
....
....
/* Vyhoví seznam, který je přímým potomkem prvku div.obsah */
/* Vyhovuje */ /* Nevyhovuje */
Tento selektor nepodporuje prohlížeč Microsoft Internet Explorer, čehož se dá využít k nápravě jeho četných problémů s CSS: p {color:red; }
/* V Internet Exploreru (a jiných zastaralých prohlížečích) bude písmo červené */
*>p { color:blue; }
/* V kvalitních prohlížečích bude písmo modré */
Selektory sourozenců Tomuto selektoru vyhovuje prvek X, který je následujícím sourozencem prvku Y. Zapisuje se ve tvaru Y+X. li+li { ... }
