XCSS

E N C Y K L O P E D I E

W E B D E S I G N E R A

kaskádové styly v praxi

XCSS úplná

přesná referenční příručka CSS 1 CSS 2 CSS 2.1 www.zonerpress.cz

© Foto: Jiří Heller

Pavol Mikle

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: knihy@zoner.cz 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" > ... <div style="stylový_pŏedpis" > ...

2. <style type="text/css" media="cílové_médium">

stylová_pravidla

</style> 3. <link

rel="stylesheet" href="uri_stylu_dokumentu" type="text/css" [t title="titulek/pojmenování"] [m media="cílové_médium"] /> >

jako souþást každé znaþky HTML prostĜednictvím atributu style; mezi všemi ostatními HTML znaþkami, mají pro zaþlenČní stylopisu prioritní význam znaþky <SPAN> a <DIV> <SPAN > (k zaþlenČní stylopisu pro zmČnu/nastavení stylu krátkého úseku, napĜ. jen nČkolika znakĤ) <DIV > (k zaþlenČní stylopisu pro zmČnu/nastavení stylu vČtšího úseku, napĜ. bloku) definicí stylĤ jako souþásti zdrojového kódu dokumentu prostĜednictvím kontejneru <STYLE> (v záhlaví dokumentu, nikoliv v tČle) uložení definic stylĤ v samostatném externím souboru s doporuþovanou pĜíponou .CSS; v tomto pĜípadČ musí být uložení definic v dokumentu oznámeno prostĜednictvím znaþky <LINK /> (aby prohlížeþ / UA program poznal, že se jedná o externí definice stylĤ)

Kaskádové styly CSS

17

DEKLARACE STYLģ Základem stylových pĜedpisĤ jsou pravidla tvaru: individuální deklarace uvedené jako pĜímá hodnota atributu style libovolného prvku jazyka: style="deklarace1[;deklarace2[; ...]]" definice prostĜednictvím identifikátorĤ pravidel (selektorĤ) v obsahu prvku STYLE nebo v externím souboru (stylového pĜedpisu):

selektor1[,selektor2[, ...]] { deklarace1[;deklarace2[; ...]] } kde deklarace selektor

je dvojice vlastnost:{hodnota|inherit}[!important] jednoduchý_selektor | ĜetČz_jednoduchých_selektorĤ | kombinované_selektory - jednoduchý_selektor

význam atributových operátorĤ

typový selektor | [*]obecný selektor - typový selektor jméno prvku v jazyce dokumentu (v HTML jazyce jméno HTML prvku) - obecný selektor selektor atributu | id selektor | selektor pseudotĜídy; znak * je všeobecný kvalifikátor (univerzální selektor), mĤže být uveden osamocenČ nebo jako bezprostĜednČ první znak obecného selektoru [atribut] selektor atributu

= rovná se (exaktnČ) ~= vyskytuje se (exaktnČ) v seznamu mezerou oddČlených hodnot |= zaþíná (exaktnČ) v seznamu pomlþkou oddČlených hodnot

id selektor selektor pseudotĜídy

[atribut="hodnota"] [atribut|="hodnota"] [atribut~="hodnota"] .tŏída

#identifikátor :link | :visited | :hover | :active | :focus | :first-child | :lang(c)

- ĜetČz_jednoduchých_selektorĤ typový_selektor | obecný_selektor bezprostĜednČ následovaný žádným nebo více obecnými selektory; k poslednímu jednoduchému selektoru v ĜetČzu mĤže být pĜipojen jeden selektor pseudoprvku selektor pseudoprvku :after | :before | :first-line | :first-letter - kombinované_selektory

selektor " "|">"|"+" selektor; znaky mezera,>,+ se nazývají kombinátory: A B kontextový kombinátor mezera: následník (B je obsažen v A) A>B kontextový kombinátor vČtší než: potomek (B je potomkem svého rodiþe A) A+B kontextový kombinátor plus: nejbližší sourozenec (A a B jsou obsaženy ve stejném prvku právČ v tomto poĜadí (tj. mají stejného rodiþe a A je bezprostĜední pĜedchĤdce B) )

18

Kaskádové styly CSS

Poznámky: 1. þárkou oddČlený seznam selektorĤ selektor1[,selektor2[, ...]] umožĖuje skupinČ v seznamu uvedených selektorĤ pĜiĜadit stejný stylový pĜedpis (tj. stejnou Ĝadu vlastností); toho lze použít napĜ. i k zestruþnČní zápisu v pĜípadČ, kdy Ĝada selektorĤ má mít spoleþné jen nČkteré vlastnosti a v ostatních se liší; podle pravidel kaskádování lze v takovém pĜípadČ nejdĜíve zapsat v seznamu selektorĤ spoleþné vlastnosti následované samostatnými doplĖujícími specifikacemi pro jednotlivé selektory, napĜ. následující pravidla:

jsou ekvivalentní zápisu ve tvaru spoleþného seznamu a doplĖkĤ:

h1 { margin: 1em; background: navy; color: white } h1, h2, h3 { margin: 1em; background: navy; color: white } h2 { margin: 1em; background: navy; color: white; font-size:160%; font-weight:bold} h2 {font-size:160%; font-weight:bold } h3 { margin: 1em; background: navy; color: white; font-size:120% } h3 {font-size:120% } 2. ve dvojici vlastnost:hodnota, nemusí dvojteþka následovat bezprostĜednČ za názvem vlastnosti a hodnota nemusí následovat bezpostĜednČ za dvojteþkou a mohou být oddČleny libovolným poþtem bílých znakĤ (a mĤže se zde vyskytnout i poznámka /* */ ) napĜ. zápis:

je ekvivalentní se zápisem : h1 { font-weight: bold; font-size:12px }

h1 { font-weight : bold ; font-size :12px /* záhlaví */ }

3. s ohledem na zpĤsob vyhodnocování selektorĤ, mĤže být pro jeden a tentýž selektor zapsáno více pravidel a pak to je to totéž jako zápis jednoho pravidla pro daný selektor, v nČmž jsou deklarace organizovány do tvaru stĜedníkem (;) oddČleného seznamu deklarací, napĜ. následující pravidla:

jsou ekvivalentní zápisu jednoho pravidla: h1 { font-weight: bold } h1 { font-size: 12px } h1 { line-height: 14px } h1 { font-family: Helvetica } h1 { font-variant: normal } h1 { font-style: normal }

h1 { font-weight: bold; font-size: 12px; line-height: 14px; font-family: Helvetica; font-variant: normal; font-style: normal }

4. syntaxe umožĖuje selektory zapsat jako ĜetČz jednoduchých selektorĤ, tj. selektory sdružit; sdružený zápis pak slouží k souþasnému podmínČní na více možných hodnot daného atributu nebo na více atributĤ daného prvku; napĜ. sdruženému pravidlu span[title][attr1="Prague"][attr2="Brno"] vyhoví všechny ty prvky SPAN, které mají použit atribut title a souþasnČ mají použit atribut attr1 s hodnotou "Prague" a attr2 s hodnotou "Brno" 5. sdružené selektory musí být zapsány jako souvislý ĜetČzec, tj. v ĜetČzu jednoduchých selektorĤ se nesmí mezi jednoduchými selektory vyskytnout jako oddČlovaþ bílý znak napĜ. H1.trida { color: green } je správný zápis ale H1 .trida { color: green } je chybný zápis 6. syntaxe umožĖuje selektory kombinovat; metodou kombinování a sdružování selektorĤ umožĖuje CSS specifikace vytváĜet i velmi složité a podrobné selektory 7. pro ID selektor nelze použít HTML atribut name, napĜíklad pravidlo h1#kapitola1 { text-align: center } se v HTML kódu bude aplikovat na prvek zapsaný ve tvaru <h1 id="kapitola1">...</h1> nikoliv však na prvek zapsaný jako <h1 name="kapitola1">...</h1>

Kaskádové styly CSS

19

SPECIFIKACE SELEKTORģ TYPY A SYNTAXE SELEKTORģ typ selektoru

vzor

vztahuje se na

všeobecný kvalifikátor

*

každý prvek

typový selektor

X

typový selektor následník

X

typový selektor potomek

X > Y

každý prvek Y který je pĜímým potomkem prvku X (prvek X je rodiþem prvku Y)

typový selektor sourozenec

X + Y

každý prvek Y bezprostĜednČ pĜedcházený sourozeneckým prvkem X

ID selektor

X#identifikátor

prvek X jehož ID atribut má hodnotu "identifikátor" dokumentové jazyky mohou obsahovat atributy typu identifikátor (v HTML jazyce mají identifikaþní atributy jméno id); to co dČlá identifikátor výjimeþným je unikátnost jeho hodnoty (žádné dva id atributy nemohou mít stejnou hodnotu); to umožĖuje v dokumentových jazycích jednoznaþnou identifikaci prvkĤ (XML mají identifikaþní atributy odlišné, ale se stejným významem)

selektor atributu

X[atribut]

každý prvek X který má nastaven atribut "atribut" (s libovolnou hodnotou)

selektor atributu

X[atribut="hodnota"]

každý prvek X jehož hodnota atributu "atribut" je exaktnČ rovna hodnotČ "hodnota"

selektor atributu

X[atribut|="hodnota"]

každý prvek X jehož hodnota atributu "atribut" je seznam pomlþkami oddČlených hodnot zaþínající (zleva) hodnotou "hodnota"

selektor atributu

X[atribut~ ~="hodnota"]

každý prvek X jehož hodnota atributu "atribut" je seznam mezerou oddČlených hodnot z nichž jedna je exaktnČ rovna hodnotČ "hodnota"

selektor atributu tĜída

X.tŏída

jazykovČ specifická forma ( pro HTML je vzor X.tĜída identický se vzorem X[class~="tĜída"] pĜi práci v HTML mohou autoĜi pro reprezentaci tĜídy používat teþkovou notaci jako alternativu k ~= notaci; UA programy mohou teþkovou notaci aplikovat i v XML dokumentech)

pseudotĜída link

X:link X:visited

každý prvek X který je odkazem jehož cíl ještČ nebyl navštíven (:link) každý prvek X který je odkazem jehož cíl již byl navštíven (:visited)

pseudotĜída lang()

X:lang(c)

každý prvek X který má pĜirozený jazyk c (zpĤsob urþení pĜirozeného jazyka c specifikuje znaþkový jazyk dokumentu)

pseudotĜída first-child

X:first-child

každý prvek X který je prvním potomkem nČjakého jiného prvku (prvním potomkem svého rodiþe)

pseudotĜída interactivity

X:hover X:active X:focus

každý prvek X který pĜes nČjž právČ pĜechází kurzor (:hover) každý prvek X který byl právČ vybrán (:active) každý prvek X který má právČ focus (:focus)

každý prvek X (tj. každý prvek typu X) Y

každý prvek Y který je následníkem prvku X (je obsažen v prvku X)

20

Kaskádové styly CSS

typ selektoru

vzor

vztahuje se na

pseudoprvek first-line

X:first-line

pseudoprvek ':first-line' aplikuje speciální styl na první formátovaný Ĝádek odstavce;

pseudoprvek first-letter

X:first-letter

pseudoprvek ':first-letter' slouží k vytvoĜení iniciály (zvýraznČné první písmeno) a zapuštČné iniciály (zvýraznČné první písmeno pĜesahující více ĜádkĤ), které jsou obecnými typografickými efekty;

pseudoprvek vsuvka

X:before X:after

pseudoprvky ':before' a ':after' lze použít k vložení generovaného obsahu pĜed nebo za obsah prvku (typicky þíslování kapitol, upoutávka); Poznámka: kombinují-li se pseudoprvky ':first-letter' a ':first-line' s pseudoprvky ':before' a ':after', pak se vztahují na první písmeno, resp. první Ĝádek prvku vþetnČ vloženého textu

Ilustrace možností zápisu kombinovaných selektorĤ: následník

X Y

napĜ.:

h1 em { color: blue } div * p div p *[href]

potomek

X > Y

napĜ.:

body > P { line-height: 1.3 } div ol>li p { line-height: 1.3 }

nejbližší sourozenec

X + Y

napĜ.:

h1 + h2 { margin-top: -5mm }

Ilustrace možností zápisu jednoduchého selektoru: jméno prvku

X

napĜ.

H1 { font_family:inherit; color:red !important } H1, H2, H3, H4, H5 { color:blue }

jméno atributu

X[title]

napĜ. jako:

h1[title] { color: green; }

atribut s hodnotou

X[atribut="hodnota"] X[atribut|="hodnota"] X[atribut~="hodnota"]

napĜ. jako:

a[href="http://www.w3.org/"] [lang|="cs"] { color : red } *[lang=fr] {display:none} a[rel~="copyright"] span[attr1="Prague"][attr2="Brno"] { color:green; }

Kaskádové styly CSS

153

KLÍý K POCHOPENÍ CSS PorozumČní základním principĤm kaskádových stylĤ CSS je pro webový design zásadní a pĜitom mĤže být snadné. Pro úspČšnou implementaci kaskádových stylĤ je sice postaþující zvládnutí uživatelsky pĜátelsky navržených, snadno zapamatovatelných a jednoduše aplikovatelných definic CSS vlastností, avšak porozumČní nČkolika základním principĤm CSS mĤže vést k naprosté kontrole nad webovými dokumenty jak po stránce strukturální tak po stránce prezentaþní.

Klíþem k pochopení kaskádových stylĤ je pochopení koncepce vizuálního formátování, v originálu nazvaná "Visual formatting model". PĜestože je tato koncepce vizuálního formátování urþena pĜedevším výrobcĤm UA programĤ / prohlížeþĤ (vzhledem k tomu, že prakticky detailnČ popisuje algoritmy a postupy vedoucí ke správnému vykreslení stylovaných dokumentĤ), má pro autory dokumentĤ a bČžné uživatele CSS znaþný význam, neboĢ na základČ její znalosti mohou CSS vlastnosti aplikovat s naprostou pĜesností a také pochopit chování prohlížeþĤ v rĤzných situacích.

Výchozím pĜedpokladem je, že dokumenty jsou jejich uživateli vnímány smyslovČ – zrakem, sluchem nebo hmatem, pĜiþemž pro tyto zpĤsoby vnímání jsou UA programy / prohlížeþi zpracovány podle použitého média. Na základČ tohoto pĜedpokladu vizuální formátovací model rozdČluje média do tĜí hlavních skupin: vizuální, zvuková, hmatová.

Aþkoli se nČkteré CSS vlastnosti u tČchto skupin médií liší, koncepce vizuálního formátování považuje vizuální média za hlavní typ média, na který vztahuje všechny specifikace postupĤ, podle nichž UA programy / prohlížeþe zpracovávávají strom dokumentu. Je to proto, že vizuální média jsou pro zpracování webových dokumentĤ médii typickými a pĜizpĤsobení pro zvuková a hmatová média je snadno proveditelné prostĜednictvím nČkolika rozšiĜujících CSS vlastností (v každé skupinČ médií existuje sada vlastností vztahující se pouze k danému typu média nebo k urþitému typu zaĜízení) a jednak proto, že dokument musí být teoreticky stejnČ pĜed prezentací nejdĜíve vždy vykreslen (a tedy napĜ. i pro ryze zvuková média), byĢ na virtuální ploše.

Poznámky: 1. je tĜeba si uvČdomit, že koncepce vizuálního formátování nepostihuje absolutnČ všechny aspekty formátování a UA programĤm / prohlížeþĤm poskytuje i volný prostor pro vlastní interpretaci pravidel a tedy nelze

oþekávat, že rĤzné, plnČ v souladu se specifikací sestrojené prohlížeþe zobrazí tentýž dokument zcela shodnČ 2. koncepce vizuálního formátování vychází z toho, že UA programy / prohlížeþe pĜiĜadí hodnoty všem vlastnostem všech prvkĤ podle pravidel kaskády již bČhem vytváĜení stromu dokumentu a mají tedy pĜed prezentací dokumentu k dispozici jednak všechny prvky, které se mají na stránce prezentovat, uspoĜádané ve stromu dokumentu a jednak všechny vlastnosti popisující jejich zpĤsob ztvárnČní; posledním krokem je pak jejich prezentace, které UA programy / prohlížeþe provedou podle postupĤ urþených vizuálním formátovacím modelem 3. stylové vlastnosti pro zvukovou prezentaci mohou být použita souþasnČ s vizuálními vlastnostmi (mixovaná média) nebo jako zvuková alternativa k vizuální prezentaci; hmatová zaĜízení patĜí do skupiny vizuálních médií

VIZUÁLNÍ FORMÁTOVÁCÍ MODEL CSS Podle koncepce vizuálního formátování dokumentu: 1. se dokument vždy vykresluje na nČjaké zobrazovací ploše („plátnČ“), pĜiþemž: - u prĤbČžných médií (typicky okno prohlížeþe) je touto plochou jedna souvislá plocha neomezené délky a šíĜky, k níž UA programy / prohlížeþe zpravidla poskytují uživateli prĤzor, kterým lze dokument prohlížet (nejþastČji okno, þi þást obrazovky); pĜi zmČnČ velikosti prĤzoru mohou UA programy / prohlížeþe rozložení dokumentu v prĤzoru zmČnit a je-li prĤzor menší než poþáteþní rámec dokumentu, UA programy / prohlížeþe by mČly uživateli poskytnout prostĜedky k posunu prĤzoru nad dokumentem (nejþastČji posuvníky, ale i jiný zpĤsob odpovídající typu zaĜízení, konvencím grafického uživatelského rozhraní, operaþnímu systému þi technickým možnostem) - u stránkovaných médií (typicky tiskárna, projektor,...) je touto plochou sada jednotlivých stránek, mezi nČž je obsah dokumentu rozdČlen a s každou stránkou se pak pracuje jako se samostatnou plochou 2. každý prvek ve stromu dokumentu vytváĜí žádný a více rámcĤ

154 Kaskádové styly CSS 3. vzhled a umístČní rámcĤ na zobrazovací ploše jsou závislé na: - rozmČrech rámcĤ - poziþním schematu (normální pozicování, obtékající pozicování, absolutní pozicování) - vzájemných vztazích prvkĤ ve stromu dokumentu - vnČjších okolnostech (velikost prĤzoru, skuteþné rozmČry objektĤ,... ) 4. v CSS je každý rámec umístČn v trojrozmČrném prostoru, kde tĜetím rozmČrem je osa z probíhající ve smČru pohledu pozorovatele, takže rámce se mohou na sebe vrstvit

sousedních blokĤ se sluþují, pĜiþemž slouþený volný prostor (okraj) odpovídá vČtšímu z obou sousedních volných prostorĤ (okrajĤ) 6. rozmČry všech oblastí popisují pĜíslušné vlastnosti CSS a také odpovídající typ formátování (blokové nebo Ĝádkové formátování) 7. pro rozmČry (výšku a šíĜku) všech oblastí kolem obsahu (odsazení, rámeþek, volný prostor) existují samostatné vlastnosti, takže jejich velikost mĤže být na každé stranČ jiná Všechny oblasti rámce vytváĜené ve vizuálním formátovacím modelu CSS pro prvek znázorĖuje následující obrázek: výška rámce

RÁMCE CSS popisuje rámce specifikované koncepcí vizuálního formátování, podle které se výsledek ztvárnČní každého prvku umisĢuje do jednoho nebo nČkolika pravoúhlých oblastí – tzv rámcĤ (boxĤ).

Základní vlastností pro vizuální formátovací model CSS je vlastnost 'display' pro vizuální formátování aplikovatelná na všechny prvky. Tato vlastnost popisuje, jak je prvek zobrazen na „plátnČ“ (obrazovka poþítaþe, tisková stránka, apod.). Implicitní hodnotou vlastnosti 'display' je hodnota inline, což znamená, že prvek vytváĜí jeden nebo více Ĝádkových rámcĤ, avšak pravidla výchozího CSS stylu UA programu / prohlížeþe mohou tuto hodnotu u rĤzných prvkĤ pĜebít a pak se implicitní hodnotou vlastnosti 'display' tČchto prvkĤ stává hodnota urþená výchozím stylem UA programu / prohlížeþe.

Všechny rámce mají základní jádro vytvoĜené obsahem prvku s volitelnými okolními oblastmi mezery, rámeþku a okraje takto: 1. každý rámec je oblast tvaru pravoúhlého þtyĜúhelníku (tzv. box) 2. vnČjší hranice každého rámce jsou vždy neviditelné a vymezují plochu, kterou rámec obsazuje 3. jádrem každého rámce je oblast obsahu (text, obrázek atd.)

4. kolem obsahu mohou být další dvČ oblasti: - viditelný rámeþek (oblast rámeþku - border) - mezera, tj. odsazení obsahu od rámeþku (oblast odsazení - padding) 5. mezi rámeþkem a vnČjší hranicí rámce mĤže být volný prostor (oblast okraje – margin), který zaruþuje, že viditelné oblasti sousedních blokĤ se nebudou dotýkat; platí pĜitom pravidlo, že volné prostory (okraje)

výška obsahu

šíĜka rámce šíĜka obsahu Poznámky: 1. rozmČry volného prostoru, rámeþku a mezery se nastavují prostĜednictvím vlastností 'margin' (volný prostor), 'border' (rámeþek) a 'padding' (mezera) 2. celkový rozmČr rámce (výška a šíĜka) jsou dány souþtem rozmČrĤ velikosti obsahu prvku (napĜ. zformátovaného textu nebo obrázku), mezery, rámeþku a volného prostoru

Kaskádové styly CSS

155

3. neexistuje žádná možnost jak nastavit explicitnČ celkové rozmČry rámce 4. volný prostor je vždy prĤhledný, takže rodiþovský prvek je skrze nČj viditelný 5. oblast mezery používá stejné pozadí jako prvek sám (nastavené vlastností 'background') 6. neexistuje žádná možnost jak samostatnČ zmČnit pozadí mezery þi volného prostoru 7. každý rámec je umístČn vzhledem k (tzv.) obsahujícímu rámci, pĜiþemž poþáteþní rámec vytváĜí koĜen dokumentu

margin

border

padding

border-top

ŠíĜku a výšku oblasti obsahu prvku nastavují vlastnosti width a height. Pomocí vlastností min-width, max-width a min-height, max-height lze zadat doporuþenou šíĜku a výšku obsahu prvku.

Pro nastavení každé z jednotlivých okolních souþástí oblasti obsahu prvku (okraj, rámeþek, mezera) jsou k dispozici þtyĜi vlastnosti: okraj margin-top margin-right margin-bottom margin-left

rámeþek border-top-width border -right-width border -bottom-width border -left-width

mezera padding-top padding -right padding -bottom padding -left

které nastavující pĜíslušné velikosti. Integrujícími vlastnostmi margin (pro okraj), border-width (pro rámeþek) a padding (pro mezeru) lze zapsat najednou hodnotu všech þtyĜ vlastností. Hodnotou integrující vlastnosti je vždy jeden až þtyĜi údaje, udávající pĜíslušnou šíĜku v poĜadí ve smČru hodinových ruþiþek poþínaje horním. Je-li þísel ménČ, chápou se stejnČ, pouze se rozmČry chybČjících hodnot doplní vždy podle rozmČru hodnoty protilehlé. Je-li uveden jediný rozmČr, bude platit pro všechny þtyĜi strany.

width

b o r d e r

h e i g h t

b o r d e r r i g h t

l e f t border-bottom

U rámeþku lze navíc nastavit vlastnosti border-color (barva rámeþku) a border-style (provedení rámeþku). Implicitní hodnotou rámeþku je hodnota "none", pĜi níž rámeþek není viditelný. Integrujícími vlastnostmi border-top, border-bottom, border-left, border-right lze nastavit kompletní provedení pĜíslušné hrany rámeþku (tloušĢku, barvu a styl, napĜ. border-left: 3px #00F double). NejvČtším zjednodušením je vlastnost border, kterou lze použít když mají všechny þtyĜi strany rámeþku stejné vlastnosti.

Obrázek vpravo znázorĖuje, které rozmČry nastavují jednotlivé vlastnosti.

Obrázek A – Prvky formátovacího modelu kaskádových stylĤ

156 Kaskádové styly CSS TYPY RÁMCģ

Poznámky: 1. vlastnosti 'width' a 'height' definují šíĜku a výšku obsahu prvku (vnitĜní rozmČry prvku) – rozmČry rámce explicitnČ nelze zadat a jsou vždy rozmČry vypoþítanými na základČ ostatních hodnot oblastí rámce 2. hodnotu vlastností vizuálního formátovacího modelu lze zadat absolutnČ nebo v procentech vzhledem k aktuální šíĜce obsahu prvku nebo povolit hodnotou 'auto' a ponechat na prohlížeþi, aby si daný rozmČr pĜizpĤsobil podle potĜeby 3. je-li nČkterý z rozmČrĤ nČkteré oblasti nulový, odpovídající hrany sousedních oblastí splynou 4. okraje mohou mít i zápornou hodnotu; mají-li okraje zápornou hodnotu, hrana okraje se posune až dovnitĜ oblasti rámeþku, odsazení þi obsahu; ostatní oblasti tak pĜesahují vnČjší hranu prvku; umístČní prvku se však stále Ĝídí touto vnČjší hranou - záporné okraje tak zpĤsobí, že obsah prvku mĤže pĜesahovat svĤj obsahující blok Doporuþení: AlespoĖ jedna z vlastností urþujících šíĜku/výšku obsahu prvku ve vizuálním formátovacím modelu by mČla být ponechána na hodnotČ 'auto' (implicitní hodnota). To umožĖuje prohlížeþi lépe se vypoĜádat se zobrazením prvku v rĤzných situacích. Ve vČtšinČ pĜípadĤ se jako volná ponechává výška obsahu prvku. pro absolutnČ pozicovaný prvek je obsahující blok tvoĜen hranicí oblasti odsazení obsahu prvku (viz však dále) pro všechny ostatní prvky je obsahující blok tvoĜen vnitĜní hranicí obsahu prvku

Obrázek B – Ilustrace k obsahujícím blokĤm

Specifikace CSS definuje nČkolik typĤ rámcĤ, které mohou být dle CSS vytváĜeny. Typ rámce je urþen vlastností 'display' (viz str. 84), která ve vizuálním formátovacím modelu CSS ovlivĖuje chování rámce. V zásadČ se všechny prvky dokumentu dČlí do dvou kategorií: •

blokové prvky jsou ty prvky zdrojového dokumentu, které jsou vizuálnČ formátovány jako víceĜádkové bloky (napĜ. odstavce) v CSS se prvek stává blokovým, má-li jeho vlastnost 'display' jednu z hodnot: block, list-item, compact a run-in (þásteþnČ), table blokové prvky vytváĜejí blokové rámce (boxy)

•

Ĝádkové prvky jsou ty prvky zdrojového dokumentu, které nevytváĜejí bloky obsahu (jejich obsah se nachází v Ĝádku, napĜ. obrázek <img > nebo zdĤraznČná þást textu <em> v odstavci) v CSS se prvek stává Ĝádkovým, má-li jeho vlastnost 'display' jednu z hodnot: inline, inline-table, compact a run-in Ĝádkové prvky vytváĜejí Ĝádkové rámce (boxy); obsahem Ĝádkového prvku nesmí být nikdy blokový prvek (napĜ. uvnitĜ prvku span se nesmí nacházet prvek div )

V CSS prvky jejichž obsah se nachází ve znaþce typu kontejner vytváĜí tzv. neanonymní rámce. V (X)HTML mají všechny prvky, které nejsou samostatnými znaþkami (jako BR) pro vlastnost 'display' (urþující typ rámce) svoji pĜirozenou hodnotu, kterou není tĜeba implicitnČ urþovat (napĜ. znaþky P, DIV, FORM, H1, UL, OL,... jsou blokové; blokovým prvkem je i prvek LI jehož hodnota vlastnosti 'display' je list-item a TABLE jehož hodnota vlastnosti 'display' je table ).

V CSS úseky obsahu, které se nenachází v žádném kontejneru vytváĜí tzv. anonymní rámce. Takové úseky obsahĤ typicky vznikají kdy nČjaký prvek obsahuje v sobČ jiný prvek a v tom pĜípadČ úseky obsahu pĜed a za ním vytváĜejí úseky neležící v kontejneru.

Neanonymní a anonymní rámce mohou vznikat jak uvnitĜ blokových prvkĤ tak uvnitĜ Ĝádkových prvkĤ.

Typy a charakteristiky CSS rámcĤ uvádí souhrnnČ následující tabulka.

Kaskádové styly CSS

157

Typy a charakteristiky rámcĤ (boxĤ) CSS neanonymní

neanonymní blokové rámce vytváĜejí blokové prvky jejichž obsah se nachází v kontejneru prvku a v jejich obsahu se nenachází jiný prvek (obsah není smíšený)

anonymní

anonymní blokové rámce vznikají je-li obsah blokového prvku smíšený, tj. jsou v nČm jak blokové prvky, tak Ĝádkové úseky obsahu, a ty se sjednotí tak, že se Ĝádkové úseky „zabalí“ do virtuálního anonymního kontejneru, napĜ. <div>nęjaký text<p>text odstavce</p>další text</div> se sjednotí do virtuální konstrukce <div> <anonymní kontejner>nęjaký text</anonymní kontejner> <p>text odstavce</p> <anonymní kontejner>další text</anonymní kontejner> </div> vlastnosti anonymního kontejneru se dČdí od jeho rodiþovského prvku, nedČdiþné vlastnosti mají své výchozí hodnoty

neanonymní

neanonymní Ĝádkové rámce vytváĜejí Ĝádkové prvky jejichž obsah se nachází v kontejneru prvku a v jejich obsahu se nenachází jiný prvek (obsah není smíšený)

anonymní

anonymní Ĝádkové rámce vznikají je-li obsah Ĝádkového prvku smíšený, tj. je v nČm nČkolik Ĝádkových úsekĤ tvoĜených Ĝádkovými prvky a úseky jimž neodpovídá žádný Ĝádkový prvek a ty automaticky vytváĜejíí anonymní Ĝádkové rámce, napĜ. <p>nęjaký text<strong>text odstavce</strong>další text</p> se sjednotí do virtuální konstrukce <p> <anonymní ŏádkový úsek>nęjaký text</anonymní ŏádkový úsek> <strong>text odstavce</strong> <anonymní ŏádkový úsek>další text</anonymní ŏádkový úsek> </p> vlastnosti anonymní Ĝádkového úseku se dČdí od jeho rodiþovského prvku, nedČdiþné vlastnosti mají své výchozí hodnoty

blokové

Ĝádkové rámce

zanoĜené

prvky s vlastností 'display: run-in' vytvoĜí specifické rámce, které prvek „zanoĜí“ na zaþátek následujícího rámce, protože run-in rámec (box) se chová takto: • následuje-li za run-in rámcem blokový rámec, který není plovoucí a není absolutnČ pozicován, stane se run-in rámec prvním Ĝádkovým rámcem blokového rámce • v ostatních pĜípadech se z run-in rámce stane blokový rámec run-in prvky dČdí vlastnosti po svých rodiþích ve stromu dokumentu, nikoli po prvku, jehož se stanou souþástí typickým použitím run-in prvkĤ je vytváĜení „zatahovaných“ nadpisĤ

kompaktní

prvky s vlastností 'display: compact' vytvoĜí specifické rámce, které prvek umístí na levém nebo pravém okraji vnČ prvního Ĝádkového rámce následujícího bloku, protože compact rámec (box) se chová takto: • následuje-li za compact rámcem blokový rámec, který není plovoucí a není absolutnČ pozicován, je kompaktní rámec formátován jako Ĝádkový rámec na jedné Ĝádce jehož výsledná šíĜka se porovnává s jedním z postranních okrajĤ blokového rámce; o tom, zda s pravým, þi levým, rozhoduje vlastnost 'direction' prvku tvoĜícího obsahující blok a je-li Ĝádkový rámec stejnČ široký, nebo užší než okraj, je umístČn na tomto okraji • v ostatních pĜípadech se z compact rámce stane blokový rámec prvky, které nelze formátovat do jednoho Ĝádku, nemohou být umístČny na okraj následujícího bloku; typickým použitím compact prvkĤ je vytváĜení „jednoĜádkových“ marginálií

158 Kaskádové styly CSS OBSAHUJÍCÍ BLOKY UmístČní a velikosti rámcĤ jsou v CSS odvozeny od hran pravoúhlého bloku nazývaného obsahující blok. ObecnČ: •

obsahující blok v nČmž spoþívá koĜenový prvek (tj. celý dokument), vytváĜí UA program / prohlížeþ a nazývá se poþáteþní obsahující blok

•

pro všechny ostatní prvky s výjimkou absolutnČ pozicovaných prvkĤ je obsahující blok tvoĜen vnitĜní hranicí obsahu prvku nejbližšího pĜedka

•

pro absolutnČ pozicovaný prvek s vlastností 'position: fixed' je obsahující blok tvoĜen prĤzorem

•

pro absolutnČ pozicovaný prvek s vlastností 'position: absolute' je obsahující blok tvoĜen nejbližším pĜedkem s 'position' jinou než 'static' (tj. s 'position: relative|absolute|fixed) následovnČ: a. v pĜípadČ, že je nejbližší pĜedek blokový, je obsahující blok tvoĜen hranicí oblasti odsazení obsahu prvku (oblast padding) b. v pĜípadČ, že je nejbližší pĜedek Ĝádkový, je obsahující blok závislý na vlastnosti 'direction' nejbližšího pĜedka: i.

ii.

c.

•

•

je-li 'direction: ltr' pak levým horním rohem obsahujícího bloku je levý horní roh prvního Ĝádkového rámce vytvoĜeného nejbližším pĜedkem; pravým dolním rohem obsahujícího bloku je pravý dolní roh posledního Ĝádkového rámce vytvoĜeného nejbližším pĜedkem je-li 'direction: rtl' pak pravým horním rohem obsahujícího bloku je pravý horní roh prvního Ĝádkového rámce vytvoĜeného nejbližším pĜedkem; levým dolním rohem obsahujícího bloku je levý dolní roh posledního Ĝádkového rámce vytvoĜeného nejbližším pĜedkem

nemá-li prvek pĜedka, je obsahující blok tvoĜen hranicí poþáteþního obsahujícího bloku

prĤbČžnČ vytváĜené rámce slouží jako obsahující bloky pro všechny své podĜízené rámce (rámec tedy "zakládá" obsahující blok pro své následovníky) každý rámec je umístČn vzhledem k obsahujícímu bloku, ale obsahujícím blokem není omezován; to znamená, že ho mĤže pĜesáhnout

Poznámky: 1. pojmy rámec a obsahující blok nejsou totéž, pĜestože rámce zakládají obsahující blok pro své potomky 2. pojem obsahující blok rámce znamená ten obsahující blok, ve kterém rámec existuje, nikoli ten, který vytváĜí 3. šíĜka poþáteþního obsahujícího bloku mĤže být urþena vlastností 'width' koĜenového prvku dokumentu - jestliže má tato vlastnost hodnotu auto, stanoví poþáteþní šíĜku UA program / prohlížeþ, napĜ. shodnou s aktuální šíĜkou prĤzoru; výška poþáteþního obsahujícího bloku mĤže být urþena vlastností 'height' koĜenového prvku dokumentu - jestliže má tato vlastnost hodnotu auto, roztáhne se výška obsahujícího bloku na výšku obsahu celého dokumentu 4. poþáteþní obsahující blok nemĤže být pozicován a nemĤže být obtékán; to znamená, že UA program / prohlížeþ musí u koĜenového prvku ignorovat vlastnosti position a float

POZICOVÁNÍ PĜi vykreslování stromu dokumentu se ztvárnČné prvky dokumentu vykreslují v pĜirozeném sledu tak jak jdou za sebou, to znamená, že Ĝádkové rámce se kladou vedle sebe zleva doprava a dolĤ a sloupcové pod sebe a obojí pak postupnČ od zaþátku ke konci dokumentu. Tento zpĤsob vykreslování prvkĤ dokumentu, tzv. normální Ĝazení, je stejný bez ohledu na to zda je dokument vykreslován s použitím nebo bez použití kaskádovitých stylĤ. Kaskádovité styly CSS však mají tu specifickou vlastnost, že obsahují mechanizmus umožĖující aplikovat v normálním Ĝazení prvkĤ dokumentu výjimky. Tento mechanizmus výjimeþného Ĝazení prvkĤ dokumentĤ v CSS se nazývá pozicování.

Nutno zdĤraznit, že: 1. velkou vČtšinu uspoĜádání obsahu dokumentĤ plnČ Ĝeší normální Ĝazení dokumentových prvkĤ a výjimky z tohoto Ĝazení Ĝeší vesmČs pouze specifické situace, které by šlo v normálním Ĝazení simulovat stČží nebo s velkou pracností a povČtšinou ještČ pouze za cenu opuštČní þistČ

Kaskádové styly CSS strukturovaného zdrojového tvaru dokumentu (typicky vícesloupcová sazba, marginálie, vsuvky, ... ); v CSS pozicování není nic jiného a není tĜeba v nČm cokoliv jiného þi dalšího hledat 2. pozicování (X)HTML prvkĤ je možné pouze prostĜednictvím kaskádových stylĤ (bez použití kaskádových stylĤ výjimky z normálního Ĝazení prvkĤ možné nejsou) 3. pĜi dynamickém pĜístupu k prvkĤm dokumentu (tj. ve spolupráci skriptĤ) umožĖují výjimky (a pouze výjimky) v normálním Ĝazení aplikovat rĤzné efekty jako je pohyb, odhalování, skrývání a animování obsahu prvkĤ 4. jestliže kaskádové styly zavádČjí do (X)HTML dokumentĤ DTP, tedy typografická hlediska, s nimiž prakticky konþí jednoduchost jazyka HTML (vzhledem k tomu, že pĜes svoji eleganci kaskádovité styly budou vždy vyžadovat znaþnou dávku profesionální zdatnosti), pak pozicování navíc vyžaduje absolutní pĜedstavu o tom, þeho autor chce dosáhnout – nepromyšlené použití pozicování nemá sebemenší smysl a pravdČpodobnČ bude mít i pochybný efekt

Specifickou charakteristikou CSS pozicování je, že umožĖuje umisĢování objektĤ dokumentu nejenom na ploše v jedné rovinČ (2D pozicování), ale také umisĢování objektĤ dokumentu v rĤzných z rovinách (3D pozicování). Oba zpĤsoby pozicování mají pĜesnČ vymezené možnosti a pĜesná pravidla pro aplikaci.

2D pozicování CSS umožĖuje:

159 3D pozicování CSS umožĖuje: 1. zakládat vrstvy v dokumentu (tj. specifikovat další roviny pro zobrazení prvkĤ dokumentu), pĜiþemž základní vrstvu tvoĜí poþáteþní obsahující blok dokumentu 2. ukotvit objekty dokumentu na pĜesnou pozici (vzhledem k obsahujícímu bloku) 3. ukotvit objekty dokumentu v prĤzoru

Základní vlastností pro pozicování v CSS je vlastnost 'position' (ze skupiny vlastností pro vizuální formátování a pozicování) aplikovatelná na všechny prvky. Tato vlastnost popisuje, jak je prvek umístČn na „plátnČ“ (obrazovka poþítaþe, tisková stránka, apod.). Implicitní hodnotou vlastnosti 'position' je hodnota static, což znamená, že implicitnČ jsou prvky v dokumentu pozicovány v pĜirozeném sledu, tj. v normálním Ĝazení (pro standardní HTML provedení bez možnosti pozicování se používá pojmenování "statické pozicování", tj. 'positon: static' je identické s klasickým HTML formátováním). Další z možných hodnot vlastnosti 'position' jsou hodnoty relative a absolute/fixed a spoleþnČ urþují hlavní poziþní schema CSS takto: 'position: '

poziþní schema CSS

relative

relativní pozicování umožĖuje umístČní posunem vzhledem k pĜirozené pozici v dokumentovém sledu

absolute / fixed

absolutní pozicování umožĖuje umístČní na konkrétní pĜesnČ stanovenou pozici

static

statické pozicování Ĝazení v normálním sledu (implicitní pro všechny prvky)

1. posunout prvek ze své pozice dané normálním Ĝazením 2. obtékat prvek obsahem okolních objektĤ v normálním Ĝazení 3. zanoĜit prvek v normálním Ĝazení na zaþátek obsahu následujícího bloku 4. pĜedsadit obsah aktuálního prvku v normálním Ĝazení do oblasti levého nebo pravého postranního okraje (volný prostor) následujícího prvku, (tj. vnČ jeho prvního Ĝádkového rámce do prostoru, do nČhož jinak nelze žádný obsah umístit)

160 Kaskádové styly CSS Jednotlivé formy pozicování se realizují volbou hlavního poziþního schematu kombinací s dalšími vlastnostmi takto: forma pozicování

urþující CSS vlastnosti

upĜesĖující CSS vlastnosti

bez pozicování (normální Ĝazení)

position: static

-

posun

position: relative

top, right, bottom, left

obtékání

position: [static|relative]

clear

float:[left|right]

zanoĜení

position: static

-

display:run-in

pĜedsazení

position: static

Rámec relativnČ pozicovaného prvku není z normálního Ĝazení vyĖat. Relativní pozicování nemá žádný vliv na vzhled a rozmČry prvku - relativnČ pozicovaný prvek si udržuje rozmČry dané jeho normálním Ĝazením, vþetnČ pĜípadných ukonþení ĜádkĤ a prostoru pĤvodnČ pro ukonþení ĜádkĤ rezervovaného. Posun rámce relativnČ pozicovaného prvku nemá žádný vliv na umístČní rámce, který za ním následuje - následující rámec je umístČn stejnČ, jako kdyby relativnČ pozicovaný prvek vĤbec nebyl posunut. Z toho vyplývá, že posun rámce: - mĤže zpĤsobit pĜekryv rámcĤ v dokumentu - vytvoĜí novou vrstvu v níž je rámec posouván a která je novým obsahujícím blokem pro potomky v normálním Ĝazení tohoto prvku a pozicované následníky - ponechá v normálním sledu prvkĤ dokumentu pĤvodní prostor daný jeho rozmČry beze zmČny (tzn. pĜi úplném odsunu relativnČ pozicovaného rámce po nČm zĤstane volný prostor odpovídající jeho rozmČrĤm)

direction: [ltr|rtl]

1. relativnČ pozicovaný rámec vznikne nastavením vlastnosti 'position' daného prvku na hodnotu relative

top, right, bottom, left

2. v kombinaci s dynamickým skriptováním lze s relativním pozicováním dosáhnout animaþních efektĤ

display:compact

ukotvení na pĜesnou pozici

position: absolute

ukotvení v prĤzoru

position: fixed

top, right, bottom, left

urþení vrsty

z-index: [±]n

-

Posun position: relative; [top: ; right: ; bottom: ; left: ;]

V normálním Ĝazení posune rámec prvku ze své momentální vlastní polohy v dokumentu o urþenou hodnotu.

Rámec posouvaného prvku je nejprve zformátován v normálním Ĝazení jako by pozicován nebyl a poté je z této své aktuální pozice posunut relativnČ o zadanou hodnotu. Relativní hodnoty posunu urþují stylové vlastnosti 'top' (shora-nadol), 'right' (zprava-doleva), 'bottom' (zdola-nahoru) a 'left' (zlevadoprava) platné pro posouvaný prvek. Platí pĜitom, že left=-right a top=-bottom .

3. typickým použitím relativního pozicování je využití k formátování nadsazeného a podsazeného textu a exponenty a indexy; v tom pĜípadČ je však tĜeba vzít v úvahu, že relativní pozicování neovlivĖuje výšku pĤvodního Ĝádku 4. relativním pozicováním lze nasimulovat vícesloupcovou sazbu, je to však pouze optická náhražka (stejnČ jako použití tabulky pro tento úþel), protože obsahy sloupcĤ nemohou mezi sebou automaticky pĜetékat (základní podmínka vícesloupcové sazby) a navíc vyžaduje velmi pĜesný pracný propoþet relativního umístČní a pĜesunutí jednotlivých rámcĤ tvoĜících sloupce vícesloupcové sazby na správné cílové místo; výhodou je, že pĜi tomto zpĤsobu simulace vícesloupcové sazby zĤstane zachována þistota struktury dokumentu

Ilustrace: Posun prvku <P style="position:relative; left:25px"> ... </P> <P>Odstavec následující za posunutým odstavcem</P>

167

Barvy v (X)HTML

Standardy: Barvy v (X)HTML jsou sou ástí W3C standard HTML jazyka ve tvaru technické specifikace implementovaného modelu barev ve WWW dokumentech.

168 Barvy v (X)HTML dokumentu

BARVY V (X)HTML DOKUMENTU IMPLEMENTACE BAREV V (X)HTML Barvy ve WWW dokumentech mají absolutní dokumentotvorný význam. WWW dokumenty jsou ur eny z velké ásti pro barevné zobrazovací displeje a nov ji i pro rozši ující se dostupné barevné tiskárny. Tím se ve vizuální podob WWW dokumentu stává barva podstatnou výrazovou složkou. V (X)HTML je implementován aditivní barevný model RGB (výsledná barva je sou tem jednotlivých složek). Implementace umož uje v základním HTML nastavovat barvu pozadí, textu a odkaz . V rozší eném HTML (ve spojení s kaskádovými styly CSS) lze barevn ovládat r zné detaily ve struktu e dokumentu.

Základním zp sobem zadávání barev v (X)HTML je íselná specifikace v barevném systému RGB (Red-Green-Blue), a to samostatnými íselnými hodnotami intenzity (podíl ) barevných složek ervené (R), zelené (G) a modré (B). Hodnota každé složky se m že m nit v rozsahu od 00 do FF hexadecimáln (0 - 255) což umož uje kódovat 2563 (= 16 777 216), tj. p es 16 miliónu r zných barev. P i symbolickém ozna ení jednotlivých hodnot složek jako RR, GG a BB:

• • •

RR ozna uje intenzitu ervené složky s hodnotami od 00 = pro nep ítomnost složky, do FF = pro nejvyšší intenzitu GG ozna uje intenzitu zelené složky s hodnotami od 00 = pro nep ítomnost složky, do FF = pro nejvyšší intenzitu BB ozna uje intenzitu modré složky s hodnotami od 00 = pro nep ítomnost složky, do FF = pro nejvyšší intenzitu

Formát íselné specifikace RGB hodnoty m že mít v (X)HTML dv notace:

1. HEXADECIMÁLNÍ NOTACE - plná

#rrggbb

- rr, gg, bb jsou t i dvojice hexadecimálních hodnot pro t i složky RGB

- zkrácená

#rgb

- rgb zápis je konvertován na šesticifernou plnou notaci #rrggbb replikací hexadecimálních cifer r, g, b (nap . #fb0 expanduje na #ffbb00, #ffffff m že být zkráceno na #fff)

- numerická

rgb(r,g,b)

- árkou odd lený seznam t í celo íselných numerických hodnot z rozsahu 0 - 255

- procentuální

rgb(r%,g%,b%)

- árkou odd lený seznam t í reálných procentuálních hodnot z rozsahu 0.00% - 100.00%

2. DEKADICKÁ NOTACE

Barvy v (X)HTML dokumentu

169

Barva m že být v (X)HTML specifikována také klí ovými slovy ve dvou kategoriích:

3. JMENNÁ NOTACE - základní barvy (17)

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow

- barvy uživatelského grafického prost edí (28)

ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, CaptionText, GrayText, Highlight, HighlightText, InactiveBorder, InactiveCaption, InactiveCaptionText, InfoBackground, InfoText, Menu, MenuText, Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight, ThreeDLightShadow, ThreeDShadow, Window, WindowFrame, WindowText

Poznámky: 1. úvodní znak # v hexadecimální notaci je povinný (nelze místo #FFFFFF psát FFFFFF) 2. zápis hexadecimálních cifer není citlivý na malá a velká písmena, takže #ffffff je totéž jako #FFFFFF 3. dekadická hodnota musí být celé íslo z rozsahu 0-255 4. procentuální hodnota je reálné íslo z rozsahu 0.00 – 100.00 5. numerické nebo procentuální hodnoty zadané mimo platný rozsah jsou o íznuty na platný interval nap íklad: rgb(300,0,0) se o ízne na rgb(255,0,0) rgb(255,-10,0) se o ízne na rgb(255,0,0) rgb(110%, 0%, 0%) se o ízne na rgb(100%,0%,0%) 6. numerická hodnota 255 odpovídá v procentech 100% a FF v hexadecimální notaci, tj. rgb(255,255,255) = rgb(100%,100%,100%) = #FFFFFF = #FFF 7. zkrácená notace #rgb je p ípustná pouze ve vlastnostech CSS pro specifikaci barvy, nikoliv v HTML atributech a není proto v klasických HTML atributech rozpoznána 8. technická pravidla jak p evést hexadecimální RGB hodnoty na zobrazovací za ízení popisuje tzv. sRGB standard (Standard Default Color Space for the Internet) 9. krom standardizované jmenné notace popisující pouze 16 základních barev existuje také bohatší jmenná notace, kterou však standard nepodporuje

170 Barvy v (X)HTML dokumentu

KLÍ K POCHOPENÍ BAREV Pochopení barev je pro webový design užite né a p itom m že být snadné. Porozum ní n kolika jednoduchým princip m barev m že vést k úsp šným barevným kombinacím pro webový dokument nebo projekt. Teorií barev existuje n kolik. V b žné praxi jsou známy t i modely: tradi ní barevný model (RYB)

primární sadou tradi ního modelu je skupina barev " ervená-žlutá-modrá", ozna ovaná jako RYB (Red-Yellow-Blue) (vyu ovaná v mate ské škole)

tiskový barevný model (CMY)

primární sadou tiskového modelu je skupina barev "azurová-purpurová-žlutá", ozna ovaná jako CMY (Cyan-MagentaYellow)

spektrální barevný model (RGB) primární sadou spektrálního modelu je skupina barev " ervená-zelená-modrá", ozna ovaná jako RGB (Red-Green-Blue) V každém barevném modelu existuje sada barev, které mají tu vlastnost, že obecn nemohou být namíchány použitím ostatních barev daného modelu. Tyto barvy se ozna ují jako primární barvy.

A co erná a bílá? ernou a bílou také nelze namíchat z ostatních barev žádným zp sobem. Protože se ale v barevném mixování nepoužívají pro vytvá ení barev, jsou z barevného mixování nebo teorie vypušt ny. P idáním bílé nevzniká barva nová, ale pouze se barva zesv tluje, p idáním erné nevzniká barva nová, ale pouze se barva ztmavuje.

červeno fialová

červená

červeno oranžová

fialová fia

á

modro fialová

červená

v nžo ora

lov á

oranžová

modrá

modrá

žlutá

žlutá

zelená modro zelená

zelená

žluto oranžová

žluto oranžová

Lidskému vnímání je nejbližší tradi ní barevný model (malí ský). V tradi ním barevném modelu je klí em k pochopení barev barevný kruh (tradi ní barevný kruh) rozd lený na 12 díl . Existuje mnoho zp sob a náhled na tradi ní barevný kruh. První jednoduchý kruhový diagram barev vytvo il Isaac Newton v roce 1666 a od té doby se odborníci p ou, jaká forma reprezentace barevné škály je nejvhodn jší. Snad nej ast ji užívaným je Itten v kruh (podle Johanesa Ittena), v n mž jsou barvy uspo ádány do dvanácti lenného barevného kruhu zp sobem podle obrázku vlevo a obsahujícím tyto sady barev: primární barvy • ervená

• •

žlutá modrá

sekundární barvy • oranžová (sm s ervená+žlutá)

terciální barvy • ervenooranžová

zelená (sm s žlutá+modrá)

žlutooranžová

• •

fialová (sm s modrá+ ervená)

• • • • •

žlutozelená modrozelená modrofialová ervenofialová

Barvy v (X)HTML dokumentu

171

•

R RV

RO

• V

O

BV

YO

• B

Y

BG

YG

rovnostranný trojúhelník uprost ed barevného kruhu tvo í t i primární barvy rovnoramenné trojúhelníky nad stranami rovnostranného trojúhelníka primárních barev tvo í t i sekundární barvy, které jsou vždy sm sí t ch primárních barev, nad nimiž rovnoramenný trojúhelník leží kruhové výse e barevného kruhu tvo í nad vrcholy šestiúhelníka primární a sekundární barvy a mezilehlé terciální barvy, které jsou vždy sm sí sousedící primární a sekundární barvy

#FF0000

ervená (R)

#FF6600

ervenooranžová (RO)

#FF9900

oranžová (O)

#FFCC00

žlutooranžová (YO)

#FFFF00

žlutá (Y)

#99FF00

žlutozelená (YG)

#00CC00

zelená (G)

#009999

modrozelená (BG)

#0033CC

modrá (B)

#330099

modrofialová (BV)

#663399

fialová (V)

#CC0099

ervenofialová (RV)

G

Tabulka 1 – Itten v barevný kruh

172 Barvy v (X)HTML dokumentu

ZÁKLADNÍ PRINCIPY BAREV Tradi ní barevný kruh Je 12-ti barevný podle tradi ního barevného modelu vybarvený kruh a slouží pro porozum ní základu barev a jejich vzájemných vztah , ale pro vlastní volbu barev není adekvátní.

Poznámka: Pro autoring v praxi jsou užite ná r zná provedení barevného kruhu ve tvaru praktických pom cek, které zobrazují barvy v hodnotách (sv tlost nebo tmavost barvy) a intenzitách (zá ivost nebo matnost barvy). K takovým pom ckám pat í nap . i po íta ové programy (barevné mixéry).

Primární barvy Základními barvami tradi ního barevného kruhu jsou ervená, žlutá, modrá (protože je nelze vytvo it žádnou kombinací ostatních barev). Všechny ostatní barvy jsou tvo eny n jakou kombinací t chto t í.

Sekundární barvy Sekundární barvy jsou barvy, které leží na barevném kruhu uprost ed mezi primárními barvami. Tyto barvy jsou výsledkem míchání dvou primárních barev: žlutá+ ervená = oranžová, žlutá+modrá = zelená, ervená+modrá = fialová

199

Písma v (X)HTML

Standardy: Typografie Standardy pro písma – to je nČkolika staletími ovČĜený soubor vlastností, klasifikace a používání písma v tiskové podobČ, obecnČ známý pod pojmem typografie.

(X)HTML se ve svých standardech tiše opírá o historické tradice, ale obsahuje pouze základní mechanizmy pro zadávání a nastavování písma. K úplnému Ĝízení písma v (X)HTML je úþelné zvládnutí souvisejících typografických specifikací a implementace poþítaþových písem (fontĤ).

200 Písma v (X)HTML dokumentu

PÍSMA V (X)HTML DOKUMENTU IMPLEMENTACE PÍSMA V (X)HTML SOUHRN Aby se WWW dokument zobrazil správnČ a v pĜijatelné formČ, je nezbytné v deklaraci fontu použít nČkterý z fontĤ, o nČmž se dá pĜedpokládat, že bude na vČtšinČ systémĤ k dispozici.

BČžnČ instalovanými na jednotlivých platformách jsou následující sady odpovídajících si fontĤ (v poĜadí): na platformČ PC Windows Arial, Times New Roman, Courier New na platformČ Mac Helvetica, Times, Courier na platformČ PC Unix helvetica, times, courier kde stejnorodými rodinami jsou: Times - Times New Roman - times Helvetica - Arial - helvetica Courier - Courier New - courier

(patková písma) (bezpatková písma) (neproporcionální)

TradiþnČ používané deklarace pro písmo patkové, bezpatkové a neproporcionální (ve tvarech HTML a CSS) jsou: patkové face="'Times New Roman', Times, times, serif" font-family: "Times New Roman", Times, times, serif

(HTML notace) (CSS notace)

face="Arial, Helvetica, helvetica, sans-serif" font-family: Arial, Helvetica, helvetica, sans-serif

(HTML notace) (CSS notace)

face="'Courier New', Courier, courier, monospace" font-family: "Courier New", Courier, courier, monospace

(HTML notace) (CSS notace)

bezpatkové

neproporcionální

kde ve všech pĜípadech se jedná o sady skládající se ze þtyĜ (vícejazyþných) písem, v níž posledním písmem je odpovídající generické písmo; tyto sady jsou sestaveny tak, že první písmo v sadČ reprezentuje nejþastČjší rodinu písma v systémech Windows, druhá je urþena pro MacOS, tĜetí pro systémy typu Unix.

Písma v (X)HTML dokumentu

201

Pro víceplatformní deklaraci písma www dokumentu lze doporuþit následující schema: bez ohledu na starší platformy

písmo Windows 32-bit, písmo MacOS, písmo Unix, generické písmo s ohledem na starší platformy

písmo Windows 32-bit, písmo Windows16-bit, písmo MacOS, písmo Unix, generické písmo

Za výchozí písmo pro deklaraci písma pro web lze považovat dostupná víceplatformní základní písma platformy Windows, kterými jsou písma: tĜída písma

patková

bezpatková

rodina písma

základní Ĝez (regular)

dostupné Ĝezy

Times New Roman

regular, italic, bold, bold italic

Georgia

abecedaABECEDA abecedaABECEDA

Arial

abecedaABECEDA

regular, italic, bold, bold italic

Arial Black

abecedaABECEDA

regular, italic

Impact

regular

Trebuchet MS

abecedaABECEDA abecedaABECEDA abecedaABECEDA

Verdana

abecedaABECEDA

regular, italic, bold, bold italic

Comic Sans MS

abecedaABECEDA

regular, bold

Courier New

regular, italic, bold, bold italic

Andale Mono

abecedaABECEDA abecedaABECEDA

Lucida Console

abecedaABECEDA

regular

Tahoma

ozdobná

neproporciální

regular, italic, bold, bold italic

regular, bold regular, italic, bold, bold italic

regular

poznámky 1. písma vyznaþená tuþnČ (Times New Roman, Arial, Courier New) jsou základní písma platformy, tj. písma, která jsou instalována vždy s jádrem systému 2. ostatní písma jsou dalšími prvotními písmy, která se mohou do systému dostat jako rozšiĜující systémová písma nebo písma instalována až se specifickými komponentami (typicky Verdana / IE) 3. s rozvojem platformy, se mĤže základní sada písma rozšiĜovat (typicky Trebuchet, Lucida Console) a proto se primární sada písem mĤže verze od verze systému lišit 4. v oficiálním MS seznamu webových fontĤ se Tahoma novČ neobjevuje 5. jedná se vesmČs o víceplatformní písma, což znamená, že existují jejich instalaþní soubory i pro jiné platformy než Windows

202 Písma v (X)HTML dokumentu Základní písma jednotlivých platforem a meziplatformČ si odpovídající písma: Základní písma:

MacOS X Windows 32 Windows 16 PC Unix

Times, Helvetica, Courier Times New Roman, Arial, Courier New Times New, Arial, Courier New times, helvetica, courier

Odpovídající si písma: Windows-32 bit primární sada odpovídající základní Times New Roman Georgia Arial Arial Black Impact Verdana Tahoma Trebuchet MS Comic Sans MS Courier New

Times New Roman Times New Roman Arial Arial Arial Arial Arial Arial Arial Courier New

Windows-16 bit odpovídající základní Times New CE Times New CE Arial CE Arial CE Arial CE Arial CE Arial CE Arial CE Arial CE Courier New CE

MacOS X odpovídající odpovídající základní Times CE New York CE Helvetica CE Helvetica CE Techno CE Lucida Grande CE Helvetica CE Helvetica CE Sand CE Courier CE

Times CE Times CE Helvetica CE Helvetica CE Helvetica CE Helvetica CE Helvetica CE Helvetica CE Helvetica CE Courier CE

Unix* odpovídající times times helvetica helvetica lucida lucida helvetica helvetica lucida courier

CSS generické serif serif sans-serif sans-serif sans-serif sans-serif sans-serif sans-serif fantasy monospace

NapĜíklad pro "Verdana like" design www dokumentu, který na vČtšinČ platforem bude zobrazen správnČ, resp. odpovídajícím zpĤsobem a se zachováním národních znakĤ pro východní Evropu (a tedy i ýechy a Slovensko) vypadá odpovídající deklarace písma www dokumentu následovnČ: face="Verdana, Arial, Arial CE, Lucida Grande CE, Helvetica CE, lucida, sans-serif" font-family: Verdana, Arial, 'Arial CE', 'Lucida Grande CE', 'Helvetica CE', lucida, sans-serif

Poznámky: 1. primární sada Windows písem (vícejazyþná) má v jednojazykových znakových sadách pro stĜední a východní Evropu (CE – Central European) název rozšíĜen o zkratku ' CE' (specificky Mac, Win 9x, napĜ. Times New Roman CE) 2. Unix* oznaþuje rodinu systémĤ typu Unix (kde jsou písma obvykle vícejazyková, ale není to pravidlo) 3. generický serif a san-serif není univerzálním Ĝešením, protože záleží na UA agentovi a platformČ jak dopadne náhrada generického písma konkrétním fontem Primární sady meziplatformČ si odpovídajících písem: generická rodina obecná písma Macintosh serif Times, New Century Schoolbook, Palatino sans-serif Helvetica, Geneva, Arial, Verdana monospace Courier cursive — fantasy —

obecná písma Windows Times New Roman, Georgia Arial, Tahoma, Verdana Courier New, Lucida Console — Comic Sans MS

obecná písma systémĤ typu Unix times, lucidabright, new century schoolbook, utopia, lucida helvetica courier, lucidatypewriter — —

Písma v (X)HTML dokumentu Písmo ve WWW dokumetech má základní dokumentotvorní význam. Ve vizuální podobČ WWW dokumentu je písmo podstatnou výrazovou složkou. ZpĤsob psaní textu webového dokumentu (webová typografie) spoluvytváĜí specifický vzhled WWW dokumentu (webový design).

V (X)HTML jsou implementovány dva vzájemnČ disjunktní (není mezi nimi souvislost ani závislost) typografické modely umožĖující ovládání písma:

1. Základní typografický model HTML umožĖuje ovládání písma prostĜednictvím specifických HTML znaþek

2. RozšíĜený typografický model HTML umožĖuje ovládání písma prostĜednictvím CSS stylu

Poznámky:

203

ZÁKLADNÍ TYPOGRAFICKÝ MODEL HTML Základní typografický model HTML je implementován pĜímo v základním (X)HTML jazyce. UmožĖuje ovládání písma prostĜednictvím specifických (X)HTML znaþek. Tato implementace umožĖuje v základním (X)HTML nastavovat následující typografické vlastnosti: typografická vlastnost

HTML znaþka

rodina a stupeĖ písma

<font face="" size="" > <basefont face="" size="" >

tloušĢka písma

<b>, <strong>

sklon písma

<i>, <em>

provedení písma - písmo psacího stroje

<tt>

- velké

<big>

- malé

<small>

- horní index

<sup>

- dolní index

<sub>

- podtržené

<u>

1. základní typografický model HTML je nejvíce omezujícím aspektem webové typografie a tím webového designu

- pĜeškrtnuté

<strike>

2. úplné ovládání typografie ve WWW dokumentech je možné pouze v rozšíĜeném typografickém modelu HTML (tedy prostĜednictvím kaskádových stylĤ CSS)

všechny ostatní (X)HTML konstrukce vytváĜejí konkrétní dokumentové struktury jejichž konkrétní vizuální provedení je þistČ vČcí prohlížeþe a jsou typograficky neovladatelné

3. oba typografické modely jsou navzájem disjunktní (neexistuje mezi nimi závislá souvislost) 4. obČ implementace (základní HTML i rozšíĜenou CSS) lze ve WWW dokumentech používat souþasnČ, ale jak ze strukturálního tak typografického hlediska je to nejménČ správná varianta (zato na webu nejrozšíĜenČjší); tento stav však bude eliminován teprve pĜicházejícími standardy, které základní typografický model již jednoduše neznají 5. omezujícími faktory webové typografie jsou vedle omezené dostupnosti poþítaþových písem (fontĤ) také nestejnorodosti mezi poþítaþovými platformami (Windows, Mac, Unix)

Poznámky: 1. druh písma v základním typografickém modelu lze nastavit prostĜednictvím atributu face (blíže viz specifikace fontĤ) 2. stupeĖ písma lze nastavit v omezené relativní škále HTML stupĖĤ velikostí v rozsahu 1-7 prostĜednictvím atributu size pĜiþemž skuteþná hodnota velikosti písma pro jednotlivé relativní hodnoty je vČcí agenta (obvykle 1=8pt, 2=10pt, 3=12pt, 4=14pt, 5=18pt, 6=24pt, 7=36pt) 3. platformy PC/Windows a PC/Unix mají tendence zobrazovat pĜi použití stejného HTML kódu písma (fonty) v nČkterých pĜípadech o nČco vČtší než Macintosh; jednou z možností, jak eliminovat tento problém

204 Písma v (X)HTML dokumentu v rámci dokumentu prostĜedky základní typografie je nastavit pro rĤzné platformy prostĜednictvím prvku BASEFONT rozdílné stupnČ velikosti; k tomu lze využít JavaScript pro rozlišení typu HW uživatele (Mac nebo PC) a následnČ specifikovat stupeĖ písma podle zjištČného HW; následující JavaScript kód (umístČný napĜ. bezprostĜednČ za znaþkou <body>) pĜedepisuje, aby v pĜípadČ že jde o Macintosh, byl nastaven BASEFONT dokumentu na velikost 4, jinak aby byla velikost BASEFONT nastavena na 5: <script language="JavaScript"> if (navigator.appVersion.indexOf("Mac") > 1){ document.write('<basefont size="4">'); } else { document.write('<basefont size="5">'); } </script>

nedostatkem nastavení vlastnosti písma prostĜednictvím prvku BASEFONT je, že nČkteré starší prohlížeþe mají problémy s dČdČním vlastností dovnitĜ tabulek a seznamĤ 4. prvek SMALL znamená o jeden stupeĖ menší písmo (nikoliv tedy minusky nebo kapitálky); znaþku lze vnoĜovat, ale smysluplné vnoĜování je pouze v rozsahu relativních hodnot stupĖĤ písma (tj. maximálnČ sedminásobné vnoĜení) 5. prvek BIG znamená o jeden stupeĖ vČtší písmo (nikoliv tedy verzálky); znaþku lze vnoĜovat, ale smysluplné vnoĜování je pouze v rozsahu relativních hodnot stupĖĤ písma (tj. maximálnČ sedminásobné vnoĜení) 6. provedení HTML prvkĤ I a EM (italika, zvýraznČní) je vČcí prohlížeþe a prostĜedky základní typografie je nelze ovlivnit; obvyklé provedení je sklonČné písmo 7. provedení HTML prvkĤ TT, SUP, SUB, U, STRIKE je vČcí prohlížeþe a prostĜedky základní typografie je nelze ovlivnit

ROZŠÍěENÝ TYPOGRAFICKÝ MODEL HTML V rozšíĜeném (X)HTML, tj. ve spojení s kaskádovými styly CSS lze webovou typografii ovládat detailnČ prostĜednictvím široké škály typografických vlastností definovaných v CSS. Tyto vlastnosti však vyžadují urþitou míru orientace v základních typografických pojmech.

(X)HTML TYPOGRAFIE Doslovný význam slova typografie je "psaní znakĤ". PĜi vytváĜení webových dokumentĤ vytváĜením textĤ psaním znakĤ (webové typografii) platí narozdíl od klasické typografie podobná, ale v ĜadČ aspektĤ odlišná terminologie vycházející ze zavedených poþítaþových a webových standardĤ.

V klasickém HTML je možnost typografie omezená, protože provedení vzhledu vČtšiny dokumentotvorných prvkĤ je výsostnou vČcí prohlížeþe.

Jedním z hlavních významĤ kaskádových stylĤ CSS je možnost úplného typografického ovládání vzhledu webových dokumentĤ. K tomu CSS nutnČ musí vycházet z nČjakých typografických základĤ. CSS definuje Ĝadu typografických vlastností. Používání tČchto vlastností "naslepo" bez porozumČní základnímu typografickému zámČru definovaných vlastností je prakticky bezúþelné.

Autoring vyžaduje jednoduchá a snadno aplikovatelná nezdrží závratnČ rychlou pĜípravu textu na obrazovce a docílit profesionálnČjší úroveĖ WWW dokumentĤ. Pro mající zájem o profesionální typografické provedení dokumentĤ je klíþem pochopení písem.

pravidla, která pĜitom umožní webové autory svých WWW

Poznámky: 1. standardy na nichž jsou WWW dokumenty postaveny se žádnou srozumitelnou typografickou metodikou nezabývají 2. znalost vlastností písma mĤže podstatným zpĤsobČm pĜispČt k dobré typografické úpravČ textu webového dokumentu a v ideálním pĜípadČ potČšit návštČvníka

KLÍý K POCHOPENÍ PÍSEM Pochopení písem (v širším slova smyslu typografie) je pro webový design užiteþné a pĜitom mĤže být snadné. PorozumČní nČkolika jednoduchým typografickým principĤm (principĤm písem) mĤže vést k úspČšným typografickým kombinacím pro webový dokument nebo projekt. Klíþem k pochopení písem je souhrn nejzákladnČjšího typografického uþení tak, aby bylo srozumitelné a snadno použitelné pĜi pĜípravČ webových dokumentĤ zejména aplikací kaskádových stylĤ CSS, které ze základĤ typografického uþení vycházejí.