XCSS – CSS1, CSS2, CSS2.1 úplná přesná referenční příručka

Pavol Mikle

CSS1, CSS2, CSS2.1

úplná pĜesná referenþní pĜíruþka Kaskádové styly CSS v (X)HTML Filtry v (X)HTML Barvy v (X)HTML Písma v (X)HTML CSS Tipy a triky RozšiĜující referenþní tabulky

XCSS – CSS1, CSS2, CSS2.1 – úplná pĢesná referenĀní pĢíruĀka RozšíĜené dynamické HTML, II. þást – Kaskádové styly CSS autor a typografické zpracování: RNDr. Pavol Mikle Copyright © ZONER software s.r.o. Vydání první v roce 2004. Všechna práva vyhrazena. OdpovČdný redaktor: Ing. Pavel Kristián KATALOGOVÉ ýÍSLO: ZR420 Copyright © Foto na obálce: JiĜí Heller, HELLER.CZ s.r.o., www.heller.cz Copyright © Cover: Ing. Pavel Kristián Zoner Press ZONER software s.r.o. Koželužská 7, 602 00 Brno http://www.zonerpress.cz Informace, které jsou v této knize zveĜejnČny, mohou byt chránČny jako patent. Jména produktĤ byla uvedena bez záruky jejich volného použití. PĜi tvorbČ textĤ a vyobrazení bylo sice postupováno s maximální péþí, ale pĜesto nelze zcela vylouþit možnost výskytu chyb. Vydavatelé a autoĜi nepĜebírají právní odpovČdnost ani žádnou jinou záruku za použití chybných údajĤ a z toho vyplývajících dĤsledkĤ. Všechna práva vyhrazena. Žádná þást této publikace nesmí být reprodukována ani distribuována žádným zpĤsobem ani prostĜedkem, ani reprodukována v databázi þi na jiném záznamovém prostĜedku þi v jiném systému bez výslovného svolení vydavatele s výjimkou zveĜejnČní krátkých þástí textu pro potĜeby recenzí. Veškeré dotazy týkající se distribuce smČĜujte na: Zoner Press ZONER software s.r.o. Koželužská 7, 602 00 Brno tel.: 532 190 883, fax: 543 257 245 e-mail: [email protected] ISBN 80-86815-13-7

OBSAH

ÚVOD ...................................................................................................................... 11 VÝVOJ CSS ............................................................................................................ 14 KASKÁDOVÉ STYLY CSS .................................................................................... 16 SYNTAXE A SÉMANTIKA ...................................................................................... 16 Deklarace stylĤ................................................................................................... 17 Specifikace selektorĤ ......................................................................................... 19 Typy a syntaxe selektorĤ..............................................................................................19 Formální kategorizace selektorĤ podle zamČĜení.........................................................22

Pseudoprvky a PseudotĜídy ............................................................................... 23 Specifikace kaskádových stylĤ dokumentu ....................................................... 23 Metody vkládání kaskádových stylĤ do dokumentu......................................................24 Metody specifikace pravidel .........................................................................................25

Slovník základních CSS pojmĤ.......................................................................... 26 ZDROJE STYLOVÝCH PěEDLOH CSS ................................................................ 29 FORMÁLNÍ PRAVIDLA PěIěAZOVÁNÍ HODNOT................................................. 31 Typy hodnot a typy jednotek .............................................................................. 31 PĜiĜazování hodnot, kaskádování a dČdiþnost ................................................... 34 Zadané hodnoty ...........................................................................................................34 Vypoþítané hodnoty......................................................................................................34 SkuteþnČ použité hodnoty ............................................................................................34 DČdiþnost .....................................................................................................................34 Formální pravidla kaskádování ....................................................................................35

MÉDIA ..................................................................................................................... 36 Typy médií.......................................................................................................... 36 Skupiny médií..................................................................................................... 37

VLASTNOSTI V KASKÁDOVÝCH STYLECH ........................................................39 Referenþní pĜehled.............................................................................................39 Syntaktické operátory v zápisu definic CSS vlastností................................................. 40 Stylové vlastnosti pro barvu a podklad......................................................................... 41 Stylové vlastnosti pro písmo ........................................................................................ 45 Stylové vlastnosti pro text ............................................................................................ 52 Stylové vlastnosti pro seznamy a výþty, vsuvky, automatické þíslování....................... 61 Stylové vlastnosti pro tabulky....................................................................................... 68 Stylové vlastnosti pro vnitĜní rozmČry obsahu prvku .................................................... 71 Stylové vlastnosti pro rámce (boxy) ............................................................................. 74 Stylové vlastnosti pro vizuální formátování a pozicování ............................................. 84 Stylové vlastnosti pro ovládání zobrazení.................................................................... 89 Stylové vlastnosti pro uživatelský interfejs ................................................................... 91 Stylové vlastnosti pro stránkování................................................................................ 95 Stylové vlastnosti pro ozvuþení.................................................................................... 99 Stylové vlastnosti pro barvení posuvníkĤ (proprietární) ............................................. 109 Stylová vlastnost pro multimediální efekty (proprietární)............................................ 110 Stylová vlastnost pro pĜiĜazení skriptu stylem (proprietární)....................................... 138 at-pravidla .................................................................................................................. 141

CSS a objektový model dokumentu .................................................................145 Dynamické ovládání stylu .......................................................................................... 145 Vlastnosti objektového modelu dokumentu odpovídající CSS vlastnostem ............... 146

Filtry..................................................................................................................149 Použití filtrĤ ................................................................................................................ 150 Aktivaþní skript........................................................................................................... 151 Realizace pĜechodového efektu................................................................................. 151

KLÍý K POCHOPENÍ CSS ....................................................................................153 Vizuální formátovácí model CSS .....................................................................153 Rámce ....................................................................................................................... 154 Typy rámcĤ ................................................................................................................ 156 Obsahující bloky ........................................................................................................ 158 Pozicování ................................................................................................................. 158 Posun ...................................................................................................................... 160 Obtékání.................................................................................................................. 161 ZanoĜení.................................................................................................................. 161

PĜedsazení ..............................................................................................................162 Ukotvení na pĜesnou pozici......................................................................................162 Ukotvení v prĤzoru...................................................................................................163 Urþení vrsty..............................................................................................................164 Základní princip formátovacího modelu CSS .............................................................165

KOMPATIBILITA CSS...........................................................................................166 BARVY V (X)HTML DOKUMENTU ......................................................................168 IMPLEMENTACE BAREV V (X)HTML..................................................................168 KLÍý K POCHOPENÍ BAREV ...............................................................................170 ZÁKLADNÍ PRINCIPY BAREV ........................................................................172 Tradiþní barevný kruh ..............................................................................................172 Primární barvy .........................................................................................................172 Sekundární barvy.....................................................................................................172 Terciální barvy .........................................................................................................173

HARMONIE BAREV (míchání a shoda barev) ................................................173 Monochromatické barvy...........................................................................................173 Analogické (podobné) barvy ....................................................................................174 Komplementární (kontrastní) barvy..........................................................................174 Triáda (trojice barev)................................................................................................175 Tetráda (þtveĜice barev)...........................................................................................176 Teplé / Studené barvy..............................................................................................176 Neutrální barvy ........................................................................................................177 Rozporné barvy .......................................................................................................177 Barevné schéma založené na pĜírodČ .....................................................................177

ZÁKLADNÍ TERMINOLOGIE ...........................................................................178 PSYCHOLOGIE BAREV..................................................................................179 NEPOJMENOVANÉ BARVY V (X)HTML .............................................................180 Všechny barvy (High Color Palette) ...........................................................................180 Vybrané spolehlivé barvy (Web Safe Palette) ............................................................180

POJMENOVANÉ BARVY V (X)HTML ..................................................................186 Standardizované názvy barev..........................................................................186 Pojmenované barvy - Položky základních barev ........................................................187 Pojmenované barvy - Položky barev uživatelského grafického rozhraní ....................188

Vžité (zavedené) názvy barev..........................................................................189 Pojmenované barvy - Modrá paleta ........................................................................... 190 Pojmenované barvy - Modrozelená paleta................................................................. 191 Pojmenované barvy - Zelená paleta .......................................................................... 192 Pojmenované barvy - Žlutá a hnČdá paleta ............................................................... 193 Pojmenované barvy - Oranžová a þervená paleta ..................................................... 194 Pojmenované barvy - Fialová a nachová paleta ........................................................ 195 Pojmenované barvy - Pastelové barvy....................................................................... 196 Pojmenované barvy - Stupnice šedé ......................................................................... 197 Barvy roþních období ................................................................................................. 198

PÍSMA V (X)HTML DOKUMENTU .......................................................................200 IMPLEMENTACE PÍSMA V (X)HTML...................................................................200 Souhrn ..............................................................................................................200 Základní typografický model HTML .................................................................203 RozšíĜený typografický model HTML ...............................................................204 (X)HTML TYPOGRAFIE........................................................................................204 Klíþ k pochopení písem....................................................................................204 Klasifikace písma....................................................................................................... 205 Vlastnosti písma - kvalifikované používání písma...................................................... 205

FONT - poþítaþové písmo ................................................................................206 Deklarace fontu.......................................................................................................... 208 Statická deklarace ................................................................................................... 208 Dynamická deklarace .............................................................................................. 210 Specifikace velikosti písma ........................................................................................ 211

UVOZOVKY V CSS..........................................................................................213 PĜehled uvozovek ...................................................................................................... 213 Typografické užití uvozovek....................................................................................... 214

CSS TIPY A TRIKY...............................................................................................218 Tip þ. 1 Tip þ. 2 Tip þ. 3 Tip þ. 4

Dest hlavních dĤvodĤ proþ používat kaskádové styly............................. 218 Jak omezit reklamu prostĜednictvím CSS ............................................... 218 Jak nastavit uživatelský styl .................................................................... 219 Jak umožnit uživateli zmČnu designu dokumentu ................................... 219

Tip þ. 5 Jak si pomoci s ladČním stylopisu ...........................................................220 Tip þ. 6 Jak se ve stylopisu záhy neztratit ............................................................220 Tip þ. 7 Jak moc záleží na poĜadí struktur ve zdrojovém kódu dokumentu ..........221 Tip þ. 8 V þem je hlavní pointa relativního a absolutního pozicování CSS...........222 Trik þ. 1 Nakreslená funkþní CSS tlaþítka............................................................222 Trik þ. 2 Hypertextové odkazy jinak (pomocí CSS) ..............................................223 Trik þ. 3 Jak vytáhnout do textu hodnotu atributĤ 'alt' nebo 'title'..........................223 MĤj trik: ....................................................................................................................223

SPECIFICKÁ ROZŠÍěENÍ DODAVATELģ (VYHRAZENÉ NÁZVY KLÍýOVÝCH SLOV) .......................................................225 REJSTěÍKY A REFERENýNÍ TABULKY............................................................226 VÝCHOZÍ CSS STYL ............................................................................................226 SEZNAM VYOBRAZENÍ A TABULEK ..................................................................228 REJSTěÍK POJMģ................................................................................................229 REJSTěÍK CSS VLASTNOSTÍ .............................................................................230

ÚVOD

Referenþní pĜíruþka kaskádových stylĤ pro tvorbu WWW dokumentĤ podle specifikací CSS1 a CSS2(2.1) Tato publikace je kompletní referenþní pĜíruþkou aktuálního stavu jazyka kaskádových stylĤ WWW dokumentĤ známého jako CSS, který se po letech vývoje blíží k tĜetímu vydání. Jedná se o standardy CSS1 a CSS2. CSS (Cascading Style Sheet) narozdíl od HTML není jazykem v pravém slova smyslu v nČmž lze vytvoĜit klasický dokument, ale spíše sadou pravidel pro zápis vlastností k uspoĜádání a zpĤsobu provedení WWW dokumentu v jazyce (X)HTML (stylopisem, kaskádovým stylopisem). Slouží k oddČlení prezentaþní vrstvy WWW dokumentĤ od jejich vrstvy obsahové. CSS je vynikající nástroj pro popis formátování dokumentových struktur. Význam CSS je však širší. KromČ rozšíĜených formátovacích možností umožĖuje oddČlení struktury a stylu dokumentu dynamickou zmČnu stylu dokumentu (dynamickou práci se styly) a podstatné je, že je to prakticky jediný nástroj k formátování XML dokumentĤ. PĜestože se mĤže jevit, že kaskádové styly vznikly dodateþnČ a oddČlenČ od jazyka HTML, opak je pravdou. OddČlení struktury dokumentu od jeho formátování bylo cílem HTML od samých poþátkĤ. Již Tim Berners-Lee, který je považován za otce WWW, navrhl svĤj první prohlížeþ tak, že formátování dokumentu bylo Ĝízeno jednoduchým zabudovaným stylovým pĜedpisem. Jazyk tohoto stylového pĜedpisu však nikdy nepublikoval a spoléhal na autory prohlížeþĤ, že tuto koncepci sami dále rozvinou. To, že se situace na WWW vyvíjela bez stylĤ, je souhrou historických okolností a událostí. OpoždČní stylových pĜedpisĤ WWW dokumentĤ vĤþi HTML jazyku je ale pochopitelné. Stylopis ve své podstatČ není jednoduchý, a pĜi dĤsledné aplikaci je tvorba dokumentu (jakéhokoliv, nikoliv pouze WWW dokumentu) podstatnČ pracnČjší než tvorba dokumentu metodou "formátování na místČ". Vlastní myšlenka stylĤ je triviálnČ pochopitelná, ale její aplikace v autoringu je pracná. PĜi absolutnČ dĤsledné aplikaci mĤže být u rozsáhlejších dokumentĤ až úmornČ pracná, pĜiþemž výsledný efekt je na první pohled od nestylovČ vytvoĜeného dokumentu prakticky nepoznatelný. A tak v poþátcích WWW a internetu (kdy nebyly k dispozici ani dokonalé zobrazovací jednotky, ani barevné tiskárny, ani osobní organizéry a mobilní telefony s možností bezprostĜedního pĜístupu do internetu) byla dána pĜes všechny negativní dĤsledky pĜednost jednoduchosti.

12

CSS stylopis

Sama skuteþnost, že vzhled stylového dokumentu lze okamžitČ totálnČ zmČnit nemusí ještČ být pro zvýšenou pracnost dostateþnČ pĜesvČdþivým argumentem. Vtírá se otázka, zda tento pracný stylopis není samoúþelný, ale pouze do okamžiku než pochopíme smysl. V CSS1 to ještČ nybylo tak zĜejmé jako v CSS2, které CSS1 rozšiĜuje o rĤzné typy médií, vþetnČ napĜ. zvukových. A tak je nasnadČ, že zvýšená pracnost v jejímž dĤsledku pak z jednoho a téhož dokumentu lze okamžitČ vykouzlit (pouhou zmČnou stylu!) z prezentaþní varianty variantu pro tisk, nebo zvukový výstup, již smysl nepostrádá. Dalším dobrým dĤvodem a argumentem je snadná pĜevoditelnost dokumentu a možnost dalšího automatizovaného zpracování. Systematicky se kaskádové styly pro WWW dokumenty zaþaly rozvíjet až se vznikem W3C konzorcia, které zaþalo pracovat v roce 1995 a kaskádové styly vzalo pod svá kĜídla jako nedílnou souþást rozvoje jazyka HTML. Jeho pĜíslušná pracovní skupina, pak kaskádové styly rozvíjí dodnes. Pomalejší opoždČný nástup kaskádových stylĤ není ani tak dĤsledkem nepĜipravenosti standardu, jako spíše praktickými dĤvody. CSS standard z dnešního pohledu pĜedbíhá dobu. Pokud nebude svČt zaplaven pĜístroji, které budou potĜebovat prezentovat WWW dokumenty podle svých schopností (hlasové pĜístroje, webové tiskárny, slepecké pĜístroje, webové televize, … ) pak tvĤrci prohlížeþĤ pravdČpodobnČ nebudou plýtvat energií na absolutní a dĤslednou implementaci CSS, když to stejnČ zatím není na þem ĜádnČ vyzkoušet (problémem však zĤstává, že tvĤrci prohlížeþĤ s implementací stylĤ nespČchají ani pro dostateþnČ rozšíĜená zaĜízení jakými jsou obrazovky poþítaþĤ a tiskárny). Tato referenþní pĜíruþka obsahuje zcela aktuální pĜehled stylopisu CSS. Klade si za cíl umožit rychlou orientaci ve vlastnostech stylopisu - pochopit je, aplikovat a vytváĜet vlastní stylopisy dokumentĤ podle aktuálních potĜeb. CSS je základním neodluþitelným standardem pro vytváĜení WWW dokumentĤ. DĜíve nebo pozdČji se uživatelé s CSS stylopisem chtČ nechtČ setkají. PĜíruþka umožní rozpoznat a pochopit jednotlivé vlastnosti a na základČ uvedené syntaxe CSS styly modifikovat pĜímo ve zdrojové struktuĜe bez nutnosti znát složky a syntaxi vlastností nazpamČĢ. CSS je vyvíjející se stylopis. O standardizaci stylopisu CSS se stará W3C konzorcium (World Wide Web Consortium), které jako jediný vrcholový orgán specifikuje a oficiálnČ vydává nové definice (verze) stylopisu. Poslední oficiální specifikací kaskádovitého stylopisu je CSS2 (z bĜezna 1998) s poslední revizí z února 2004 oznaþenou jako CSS 2.1. Tato pĜíruþka se opírá o CSS 2.1. Neexistují dvČ (þi více) specifikací CSS. CSS2 je založeno na CSS1 a až na nČkolik málo výjimek jsou všechny platné pĜedpisy stylĤ CSS1 platnými pĜedpisy stylĤ CSS2. CSS2 rozšiĜuje množinu selektorĤ, zavádí podporu stylĤ závislých na prezentaþním médiu, jakož i podporu zvukových atributĤ a rozšiĜuje možnosti v oblastech textĤ a fontĤ, okrajĤ a obrysĤ, urþování vizuální polohy, internacionalizace, stránkovaných médií, uživatelského rozhraní, tabulek, vsuvek a Ĝízení obsahu. Od okamžiku vzniku specifikace CSS2 je CSS2 jedinou platnou specifikací kaskádových stylĤ (i když lze aplikovat pouze podmnožinu vztahující se k první specifikaci CSS1 a vytváĜet tím dojem uplatĖování samostatné specifikace). Všeobecné informace o CSS zahrnující poslední stav a zámČry pro nové verze kaskádových stylĤ lze nalézt na mnoha místech Internetu. ZaruþenČ spolehlivé a þerstvé informace o specifikacích CSS jsou na webovském sídle W3C konzorcia

CSS stylopis

13

http://www.w3.org/Style . Tyto dokumenty jsou podrobné a pĜestože se jedná o definice standardĤ, jsou napsány dobĜe a jsou dobĜe þitelné a užiteþné. VysvČtlivky ke zkratkám používaným v pĜíruþce a uspoĜádání pĜíruþky: CSS je zkratka pro kaskádovité styly WWW dokumentĤ v poslední oficiální specifikaci, takže všude tam, kde je uvedena symbolická zkratka CSS je mínČna vždy poslední specifikace CSS (v rámci této pĜíruþky specifikace CSS 2.1). (X)HTML, (X)DHTML nejsou nic jiného než písmenové hĜíþky sloužící výhradnČ pro potĜeby této pĜíruþky a vyjadĜují skuteþnost, že podstata XHTML a HTML je stejná a že tyto specifikace stojí na identické sadČ znaþek daných specifikací HTML - jiná jsou pouze aplikaþní pravidla. DHTML je prakticky také pouze písmenová hĜíþka, byĢ obecnČ vžitá a malinko odlišného druhu. DHTML (Dynamické HTML) není W3C standard, nýbrž abstraktní pojem zastírající balíþek standardĤ HTML / CSS / DOM. XCSS je výslovnČ písmenová hĜíþka nevžitá a ani nikde oficiálnČ nepoužívaná – v této pĜíruþce má má pouze opticky formální význam naznaþující, že pĜíruþka obsahuje "rozšíĜené" CSS v pojetí standardu CSS rozšíĜeného-doplnČného o nČkteré v autoringu oblíbené proprietární vlastnosti a o praktické vlastnosti barev a písem. Pod termínem autoring je mínČna tvorba WWW dokumentĤ.

Tato pĜíruþka je souvislým pokraþováním prvního dílu: Jazyk HTML (Pavol Mikle: XDTHML RozšíĜené dynamické HTML, úplná pĜesná referenþní pĜíruþka HTML, DHTML, XML) K prvnímu dílu "Jazyk HTML" patĜí druhý díl "Stylopis CSS" a obrácenČ. Místo jediné všeobsahující referenþní publikace jsou referenþní pĜíruþky rozdČleny do praktické formy tematicky ucelených þástí rozložených do samostatných pĜíruþek tak, aby s každou pĜíruþkou bylo možno pracovat odČlenČ i souþasnČ, protože každá z nich bude pĜi práci pravdČpodobnČ otevĜena na jiné stránce (což by v jedné obĜí publikaci bylo obtížné). Tato pĜíruþka si klade za cíl stát se prĤvodcem stylopisu CSS. MČjte ji vždy pĜi ruce, její pĜítomnost oceníte pĜi autoringu v mnoha situacích. PĜestože autoĜi CSS vytvoĜili velmi logický, velmi dobĜe pochopitelný a dokonce i zapamatovatelný model stylových vlastností, je obtížné si rychle vybavit mezi spoustou vlastností a pravidel, právČ tu kterou v okamžiku autoringu nevyhnutnČ potĜebujete. Tato knížka Vám v tom pomĤže. PĜíruþka již svojí povahou není urþená primárnČ k prĤbČžnému þtení, zkuste se ale náhodnČ vracet k rĤzným jejím þástem. Zjistíte, že pĜíruþka zdaleka není pouhým výtahem z akademicky znČjících technických specifikací, ale obsahuje zajímavé souvislosti, které jen tak nČkde nenajdete. Jsem pĜesvČdþen, že Vám pomĤže vytváĜet stylové WWW dokumenty i bez pomoci uþebnic. PĜeji Vám radost z tvorby stylových WWW dokumentĤ. Pavol MIKLE

14

CSS stylopis

VÝVOJ CSS 1989

1994

•

•

•

oddČlení struktury WWW dokumentu od jeho formátování bylo cílem HTML od samých poþátkĤ (otec WWW Tim Berners-Lee navrhl svĤj první prohlížeþ NeXT tak, že formátování dokumentu bylo Ĝízeno jednoduchým zabudovaným stylovým pĜedpisem) tČsnČ pĜed historicky první mezinárodní konferencí vČnovanou pouze systému WWW, publikoval Hakon Wium Lie první koncept "Cascading HTML Style Sheets", který se stal základem, z nČhož vycházejí kaskádové styly dodnes na jaĜe zakládá autor programu Mosaic (první grafický prohlížeþ) Marc Andreseen spoleþnost Mosaic Communications Corp., která zakrátko uvádí nový prohlížeþ pod názvem Netscape v nČmž místo implementace stylového jazyka Netscape zabudoval základní formátovací prostĜedky pĜímo do jazyka HTML

CSS, která nejsou souþástí doporuþení CSS1 a CSS2 a jsou funkþní výhradnČ ve zmínČném prohlížeþi) 1999

•

konsorcium W3C pracuje na doporuþení CSS3

2004

•

ani pĜes delší historii zatím neexistuje UA program / prohlížeþ, který by mČl dotaženou implementaci CSS (CSS1 / CSS2) do zdárného konce ze všech prohlížecích programĤ se implementace CSS nejvíce shodují se standardem CSS1 CSS2 standard neimplementuje úplnČ žádný z prohlížecích programĤ zþásti i proto, že tento standard je orientován na obecné použití pro všechny typy médií (vþetnČ napĜíklad zvuku)

• •

• •

1995

•

tČsnČ pĜed historicky první mezinárodní konferencí vČnovanou pouze systému WWW, publikoval Hakon Wium Lie první koncept "Cascading HTML Style Sheets", který se stal základem, z nČhož vycházejí kaskádové styly dodnes

1996

•

prosinec - uveden jazyk pro definici stylu CSS Level 1 (verze umožĖující definovat styl dokumentu pro jeho vizuální podobu)

1998

•

kvČten – uvedena druhá verze jazyka pro definici stylu CSS Level 2 (verze umožĖující definovat i styl dokumentu pro další média jako hlasový výstup, tisk, atd.)

1999

•

leden – poslední revize CSS1 (nejrozšíĜenČjší prohlížeþe podporují valnou vČtšinu z doporuþení CSS1, i když jsou mezi jednotlivými prohlížeþi jisté implementaþní rozdíly, které zpĤsobují rĤzný vzhled stejné stránky v rĤzných prohlížeþích; prohlížeþ MSIE implementoval další rozšíĜení

CSS level 2 revision 1, jako CSS 2.1 Specifikace doporuþení z 25.2.2004, W3C Kandidát (pĜinejmenším do 1.9.2004) CSS 2.1 opravuje nČkolik chyb v CSS2 (nejdĤležitČjší je nová definice výšky/šíĜky absolutnČ pozicovaných prvkĤ, více úþinná pro HTML "style" atribut a nový výpoþet 'clip' vlastnosti), a pĜidává nČkolik velmi žádaných vlastností, které byly už dĜíve široce realizované; celé CSS 2.1 však vČtšinou pĜedstavuje "sestĜih" z praktického užití CSS: skládá se ze všech CSS vlastností, které jsou univerzálnČ implementovány k datu vydání doporuþení

15

Cascading Style Sheets

CSS Level 1 (1996) CSS Level 2 (1998) CSS Level 2 revision 1 (2004)

Standardy: W3C CSS LEVEL 1 W3C CSS LEVEL 2 W3C CSS LEVEL 2 revision 1

http://www.w3c.org/TR/REC-CSS1 http://www.w3c.org/TR/REC-CSS2 http://www.w3.org/TR/CSS21

(CSS je jazyk pro specifikaci stylu. CSS1 je specifikace vizuální podoby dokumentĤ, CSS2 rozšiĜuje specifikaci stylu pro další média - hlasový výstup, tisk, atd.)

16

Kaskádové styly CSS

KASKÁDOVÉ STYLY CSS SYNTAXE A SÉMANTIKA CSS (Cascading Style Sheets) jsou "Kaskádovité pĜedpisy stylĤ" jednodušeji pak "Kaskádové styly". Jde o možnost popsání vzhledu (v širším slova smyslu prezentace) dokumentu nČkolika základními parametry podobnými DTP (zapsanými pĜímo v tČle dokumentu nebo v oddČleném samostatném textovém souboru). CSS pro zápis tČchto parametrĤ stanovuje jednoduchou formu – tzv. deklaraci stylĤ. Termín "kaskádovité pĜedpisy stylĤ" vyjadĜuje jednoduchý princip v nČmž nejde ani tak o vyjádĜení hierarchiþnosti stylĤ ale o metodu aplikace stylĤ: jako pomyslnou kaskádou se skrze styly v dokumentu prochází shora nadol pĜiþemž na každém stupni "kaskády" platí pouze výsledek toho, co se cestou nabalilo þi vytratilo (vþetnČ aktuálního stupnČ kaskády). To je kaskádovitost. Vlastní styly jsou prezentaþní vrstvou pro dokumenty (strukturované dokumenty) a jsou to parametry zapsané pro prezentaci prvkĤ dokumentu. Prezentaþní vrstvy se vyvíjely tak, jak se vyvíjely a vyvíjejí prezentaþní zaĜízení (obrazovky, tiskárny, mobilní zaĜízení,… ).

Existují tĜi samostatné doplĖující se specifikace kaskádových stylĤ – CSS1, CSS2 (CSS 2.1) a CSS3. Z hlediska užití se však vždy jedná o jedinou postupnČ se rozvíjející specifikaci (nejedná se tedy o žádné tĜi samostané specifikace kaskádových stylĤ). ZjednodušenČ se poslední oficiální specifikace oznaþuje jako CSS. V souþasnosti (rok 2004) se tedy pod CSS všude tiše pĜedpokládá specifikace CSS 2.1 PĜi aplikaci CSS se WWW dokument typicky skládá ze dvou þástí: z vlastního HTML kódu vyjadĜujícího pouze strukturu dokumentu a z definice stylĤ pĜedstavující zpĤsob prezentace dokumentu. To je hlavní myšlenka a podstata CSS: oddČlení vzhledu strukturovaného dokumentu od jeho obsahu. Tím je mimo jiné možné: • používat stejnou sadu stylĤ pro více dokumentĤ (ucelený vzhled/chování webového sídla, standardy institucí) • zmČnit vzhled dokumentu bez zásahu do jeho informaþního obsahu • archivovat pouze informaþní obsah dokumentu • udržovat dokumenty ve tvaru zpracovatelném datovými analyzátory

Definice stylĤ (stylových pĜedpisĤ) mohou být do dokumentu zaþlenČny tĜemi odlišnými zpĤsoby: 1. <prvek style="stylový_pŏedpis" > ... <span style="stylový_pŏedpis" > ...