způsobí zalomení textu a text elementu pokračuje až na další řádce. Pokud chceme třídu přiřadit nějakému textu, který je součástí odstavce, použijeme k jeho značení element SPAN společně s atributem CLASS. SPAN je nový element, který byl do HTML přidán právě kvůli stylům.

Identifikátor elementu jako selektor Pro použití se styly bylo HTML rozšířeno ještě o jeden atribut. U každého elementu můžeme použít atribut ID. Ten slouží k definici jedinečného jména elementu v rámci dokumentu. Na takto pojmenované elementy jednak můžeme vytvářet odkazy (v URL použijeme fragment) a jednak pro ně lze ve stylu uvést zvláštní deklaraci. #L027 { letter-spacing: 1pt } H1#L027 { letter-spacing: 2pt }

První deklarace vyhoví všem elementům, jejichž atribut ID je nastaven na hodnotu L027. Např.:

Odstavec prostrkaného textu

Druhá deklarace stylu se použije pouze v případech, kdy je ID=L027 použito u elementu pro nadpis první úrovně. POZOR: Vidíme, že pomocí této konstrukce můžeme nastavit styl pro každý element zvlášť. Tomu bychom se však měli vyhnout -- styl by měl být jednotný pro všechny elementy. Pokud potřebujeme u nějakého elementu rozlišit několik jeho různých významů, můžeme použít rozlišení pomocí tříd (atribut CLASS).

Kontextové selektory To, že se vlastnosti ve stylech dědí, nám při vytváření stylů ušetří mnoho práce. Místo pracného nastavování všech vlastností, stačí nastavit jejich základní hodnoty a poté pouze vyjmenovat výjimky. Pro nastavování výjimek je velice výhodné použít kontextové selektory. Kontextový selektor může vypadat třeba takto: H1 EM. Vyhovuje všem elementům EM, které jsou uvnitř elementu H1. Uvedenou vlastnost můžeme elegantně použít pro nastavení menšího písma pro položky hlouběji vnořených seznamů: LI OL, LI UL { font-size: smaller }

Tato deklarace nám neříká nic jiného než, že v číslovaných a nečíslovaných seznamech obsažených uvnitř položky jiného seznamu bude použita menší velikost písma. V kontextových selektorech můžeme kromě elementů používat i třídy (CLASS), názvy elementů (ID) a jejich kombinace: .preface BLOCKQUOTE { font-style: italic } #x81a CODE { color: yellow }

Komentáře V definici stylu můžeme používat komentáře, které se zapisují mezi dvojici znaků /* a */. EM { color: red } /* všechna zvýraznění budou červená */

Pseudotřídy a pseudoelementy Výše popsaný způsob práce se selektory nám dovoluje opravdu mnoho. Existují však některé speciální případy, které je potřeba ošetřit samostatně. Pro tyto účely slouží speciální selektory. Jejich specialita spočívá v tom, že se v HTML stránce nikde neobjeví. V HTML zápisu stránky jim neodpovídá žádný element. Jsou pouze myšleně doplněny prohlížečem na potřebná místa. Pseudotřídy existují tři. Slouží pro nastavení barvy odkazů, navštívených odkazů a aktivovaných odkazů: A:link A:visited A:active

{ color: blue } /* nenavštívený odkaz */ { color: red } /* navštívený odkaz */ { color: yellow } /* aktivní odkaz */

Pseudotřídy mohou být použity i v kontextových selektorech. Pomocí pseudoelementů můžeme dosáhnout velice mocných grafických efektů. Bohužel je zatím většina prohlížečů nepodporuje. Pseudoelementy existují dva first-line a first-letter a slouží k nastavení vlastností první řádky resp. prvního písmene textu v daném elementu. Následující deklarace nám umožní používat odstavce třídy iniciala (

), které budou obsahovat iniciálu -- tj. jejich první písmeno bude zvětšené a zasazené do textu. P.iniciala:first-letter { font-size: 300%; float: left }

Kaskádové styly II. Vlastnosti řídící typ použitého písma Tato skupina vlastností slouží pro určení použitého druhu písma. Asi nejvýraznějším rysem, odlišujícím jednotlivé typy písma, je rodina písma. K jejímu nastavení slouží vlastnost font-family. Jako hodnota atributu se uvádí seznam čárkami oddělených jmen písem. Prohlížeč k zobrazení použije první písmo v seznamu, které má k dispozici. Pokud tedy chceme k zobrazení stránky použít bezpatkové písmo, použijeme ve stylu následující deklaraci: BODY { font-family: Arial, Helvetica, sans-serif }

Prohlížeč se pro zobrazení stránky pokusí použít písmo Arial. Pokud písmo s tímto názvem nebude k dispozici, použije se písmo Helvetica. Pokud ani to není k dispozici, použije se libovolné bezpatkové písmo dostupné v systému. Toto chování zajišťuje právě poslední hodnota sans-serif. Jedná se o tzv. obecnou rodinu písma. Obecná rodina neurčuje konkrétní font, ale pouze jeho základní vlastnosti. Pokud tedy prohlížeč nemá k dispozici písmo uvedené v seznamu, použije to, které svými parametry odpovídá obecnému písmu. Přehled pěti obecných rodin písem, které můžeme použít, uvádí tabulka 1. Tab. 1: Obecné rodiny písem Název Popis serif

patkové písmo

sans-serif

bezpatkové písmo

cursive

ozdobná kurzíva

fantasy

ozdobné písmo

monospace

neproporcionální písmo

TIP: V seznamu požadované rodiny písma bychom měli vždy na konci uvést jednu z obecných rodin. Zajistíme tím přijatelné zobrazení stránky na systémech, které nemají k dispozici námi požadované písmo. Po výběru rodiny písma můžeme měnit ještě další parametry písma. Styl písma můžeme ovlivnit pomocí vlastnosti font-style. Můžeme použít normální písmo (normal), kurzívu (italic) a skloněné písmo (oblique). POZNÁMKA: Kurzíva a skloněné písmo nejsou stejné. Skloněné písmo vzniká pouhou geometrickou transformací normálního písma. Kurzíva je naopak jedinečný řez písma.

Na výběr máme rovněž ze dvou variant písma pomocí vlastnosti font-variant. Můžeme použít buď normální (normal) nebo kapitálky (small-caps). Pokud tedy chceme, aby citace byly zobrazovány kapitálkami tak, jak to bylo obvyklé dříve v knižní sazbě, můžeme použít následující deklaraci: CITE { font-variant: small-caps; font-style: normal }

Na stránce, pak můžeme citovat dle libosti: Mezi nejznámější Tolkienova díla patří trilogie Pán prstenů.

Zobrazení v prohlížeči dopadne zhruba takto: Vlastnost font-weight ovlivňuje duktus (sílu) písma. Nejčastěji asi použijeme hodnotu bold, která odpovídá použití tučného písma. Zajímavou možnost nabízí hodnota bolder, která prohlížeči říká, aby použil o něco tučnější písmo než je běžné. Obdobně hodnota lighter zvolí o něco světlejší písmo. Další klasickou vlastností písma je velikost. K jejímu nastavení slouží vlastnosti font-size. Nejčastěji velikost nastavíme absolutně na nějaký rozměr -- např. 12pt. Přehled délkových jednotek, které můžeme použít ve stylech přináší tabulka 2. Tab. 2: Délkové jednotky Jednotka Popis em Výška aktuálního písma. Odpovídá šířce písmene 'M'. ex Výška písmene 'x'. px Pixel. 1px odpovídá jednomu bodu obrazovky. in Palec. 1in = 2,54 cm = 72 pt cm Centimetr. mm Milimetr. pt Bod. 1pt = 1/72" = 1/12 pc pc Pica. 1pc = 12 pt V tabulce si můžete všimnout, že první tři délkové jednotky závisí na velikosti písma. Nemůžeme je proto použít k určení velikosti písma (vlastnost font-size). Velikost písma lze zadat i relativně v procentech. Budeme-li chtít použít dvakrát větší písmo než je běžné, stačí použít konstrukci font-size: 200%. Pro použití o chlup většího písma, můžeme použít hodnotu larger. Pro menší písmo pak obdobně smaller. K dispozici jsou i názvy pro jednotlivé velikosti. Uvedeme si je od nejměnší až po tu největší velikost: xxsmall, x-small, small, medium, large, x-large, xx-large. Vidíme, že při výběru písma máme k dispozici mnoho možností a že nastavení všech potřebných parametrů může být poměrně zdlouhavé. Práci si lze ušetřit použitím vlastnosti font, která slouží k nastavení všech charakteristik písma jedinou deklarací. Následující krátká deklarace: BLOCKQUOTE { font: bold italic 12pt/14pt "Times Roman", serif }

Je ekvivalentní mnohem delšímu zápisu: BLOCKQUOTE { font-weight: bold; font-style: italic; font-size: 12pt; line-height: 14pt; font-family: "Times Roman", serif } Při použití vlastnosti font nemusíme uvádět všechny dílčí vlastnosti ovlivňující druh písma. Vždy bychom

však měli uvést alespoň velikost a rodinu písma.

Barvy Pomocí stylu lze samozřejmě určit i barvu elementu. K nastavení barvy slouží vlastnost color. Jako její hodnotu můžeme uvést hned několik různých typů hodnot. Asi nejběžnější je uvedení jména barvy. Jména můžeme použít stejná jako v HTML a pro úplnost si je zopakujeme: aqua (jasná modrozelená), black (černá), blue (modrá), fuchsia (anilínová červeň), gray (šedivá), green (zelená), lime (citrónově zelená), maroon (kaštanová), navy (tmavá modř), olive (olivová), purple (purpurová), red (červená), silver (stříbrná), teal (tmavá modrozelená), white (bílá), yellow (žlutá). Pokud tedy chceme, aby byly všechny nadpisy první úrovně zobrazeny červeně, stačí do stylu přidat následující deklraci: H1 { color: red }

Pokud nám nestačí předdefinované barvy, můžeme se namíchat vlastní ze základních barev (červené, modré a zelené). Používá se opět stejný způsob jako v HTML. Za hash-mark (#) uvedeme hexadecimálně zapsané intenzity tří složek. Pro oranžovou barvu můžeme použít zápis #FFC000. Existují i další způsoby zápisu barev, ale dva výše uvedené jsou nepoužívanější. Samozřejmě, že lze nastavit i barvu pozadí pro každý element. Slouží k tomu vlastnosti background-color. Pokud vlastnost aplikujeme na element BODY, použije se pro celý dokument (má stejný účinek jako specifikování barvy pozadí pomocí atributu BGCOLOR u tagu ). Na pozadí můžeme mít i obrázek -- k jeho určení použijeme vlastnost background-image. Jako hodnota se uvádí URL obrázku. Při zápisu URL však musíme použít poněkud nezvyklý funkcionální zápis: url(http://www.server.cz/images/logo.gif)

Používat lze samozřejmě i relativní URL. Za základní se však považuje URL stylu. Pokud tedy není styl přímo zapsán ve stránce, musíme si uvědomit, kam přesně relativní URL ukazuje. Pokud nastavíme obě vlastnosti -- background-color i background-image -- použije prohlížeč na pozadí obrázek. Pokud však bude obrázek z nějakých příčin nedostupný, bude mít pozadí barvu určenou vlastností background-color. Obě vlastnosti můžeme nastavit i najednou pomocí vlastnosti backround: BODY { background: black url(/images/hvezdy.gif) }

Obrázek pozadí lze nastavit pro každý element zvlášť. Můžeme si tedy vytvořit např. styl, který použije pro tabulku zvláštní obrázek jako její podklad. Malá ukázka: <TITLE>Ukázka netradičního použití obrázku pozadí <STYLE>

Měsíc	Čtenost Computerworldu
leden	112 %
únor	130 %
březen	102 %
duben	117 %
květen	107 %
červen	103 %

Výsledné zobrazení v prohlížeči ukazuje obrázek 1. Obr. 1: Ukázka použití stylů

Kaskádové styly III. Formátování textu Mezi nejznámější atribut, kterým lze popsat formátování odstavce, je způsob zarovnání. K jeho určení slouží vlastnost text-align, která může nabývat jedné ze čtyř hodnot: left (zarovnání na levý praporek), right (zarovnání na pravý praporek), center (centrování) a justify (zarovnání do bloku). Vidíme, že pomocí této vlastnosti můžeme efektivně řídit způsob zarovnání, který bychom v klasickém HTML museli u každého odstavce nastavit zvlášť pomocí atributu ALIGN. Další důležitou vlastností je line-height. Ta určuje velikost řádkování. Můžeme ji zadat buď absolutně (14pt) nebo relativně jako násobek či procento velikosti písma. Aby se text dobře četl, mělo by být řádkování alespoň o 2 body větší než písmo. S délkovými jednotkami, které můžeme používat pro určování velikosti řádkování jsme se seznámili v předešlém díle seriálu. Když můžeme ovlivnit výšku řádky, můžeme ovlivnit i to, jak se na této řádce budou jednotlivé elementy vertikálně zarovnávat. K tomu slouží vlastnost vertical-align. Z HTML již známe hodnoty top, bottom a middle. Zajímavou možností je sub a super. Ty zajistí, že element bude umístěn jako dolní resp. horní index. Standardní hodnotou je baseline, která zajistí vyrovnání účaří elementu s účařím okolí. Při vertikálním zarovnání můžeme použít i procenta. Interpretují se jako posunutí elementu nahoru o poměrnou část výšky řádky. Pokud chceme, aby byl nějaký element posunut o čtvrtinu řádky dolů, použijeme deklaraci verticalalign: -25%. Další užitečnou vlastností je text-indent. Umožňuje nastavit velikost odstavcové zarážky -- tj. o kolik bude první řádka odstavce odsazena. Můžeme použít buď absolutní určení délky nebo relativní jako procento z šířky nadřazeného elementu (tím je běžně šířka okna prohlížeče). Pokud potřebujeme nějaký text zvýraznit p r o s t r k á n í m, použijeme vlastnost letter-spacing, která udává délku mezery, která se vloží mezi jednotlivé litery. Použití vlastností si ukážeme na malém příkladě (výsledek je na obrázku 1): <TITLE>Použití stylů <STYLE>

Náš ukázkový odstavec bude v prohlížečích, které podporují <EM>kaskádové styly krásně zarovnán do bloku. Všimněte si odstavcové zarážky, která byla získána bez použití několika pevných mezer ( ) na jeho začátku.

Nemusí pršet, hlavně když kape. A aby měla voda kudy téci, uděláme větší mezery mezi řádky.

Obr. 1: Ukázky formátování odstavce

Formátování Abychom správně pochopili všechny vlastnosti, které ovlivňují formátování stránky, musíme se seznámit s formátovacím modelem, který je v CSS používán. V tomto modelu je výsledkem zobrazení každého elementu jeden nebo několik obdélníkových boxů. Všechny boxy se skládají ze samotného obsahu elementu. Kromě toho mohou obsahovat vnitřní okraj, rámeček a vnější okraj (viz obr. 2). Obr. 2: Formátovací model

K nastavení velikosti vnějšího okraje slouží vlastnosti začínající na margin. margin-top (horní okraj), margin-right (pravý okraj), margin-bottom (spodní okraj) a margin-left (levý okraj). Obdobně k nastavení velikosti vnitřního okraje slouží vlastnosti začínající na padding a pro velikost rámečku jsou zde vlastnosti začínající na border. U rámečku lze kromě jeho velikosti nastavit i barvu border-color a styl border-style. Styl rámečku můžeme nastavit například na hodnoty: none (žádný rámeček), solid (plný) či double (dvojitý). Mnoho z výše uvedených vlastností lze nastavit jedinou deklarací pro všechny čtyři strany (horní, pravá, dolní a levá). Počet hodnot přiřazených takovéto souhrnné vlastnosti může být od jedné do čtyř. Použijeme-li pouze jednu hodnotu, bude platit pro všechny čtyři strany. Při použití dvou hodnot bude první platit pro horní a dolní stranu a druhá pro levou a pravou stranu. Při použití tří hodnot budou postupně odpovídat horní, pravé a dolní straně. Pro levou stranu bude použita stejná hodnota jako pro pravou. Zápis BODY { margin: 1em 2em }

BODY { margin: 1em 2em 3em }

je ekvivalentní s BODY { margin-top: 1em; BODY { margin-top: 1em; margin-bottom: 1em; margin-bottom: 3em; margin-right: 2em; margin-right: 2em; margin-left: 2em } margin-left: 2em }

V této skupině ještě nalezneme vlastnosti width a height, které slouží k nastavení šířky a výšky elementu. Uplatní se zejména u elementů jako jsou obrázky a aplety. Pomocí vlastnosti float můžeme z elementu udělat plovoucí objekt. To znamená, že pak bude obtékán okolním textem zleva či zprava. Tato vlastnost odpovídá nastavení atributu ALIGN u obrázků na hodnotu LEFT nebo RIGHT. Svou obdobu má v HTML i vlastnost clear, která určuje, zda se element zobrazí až po skončení všech plovoucích objektů. Můžeme si vybrat, zda se bude čekat na skončení všech objektů (hodnota both) nebo jen na skončení objektů vpravo (right) či vlevo (left). Následující krátký styl umístí všechny obrázky jako plovoucí objekty vlevo. Všechny nadpisy první a druhé úrovně budou vždy začínat až pod obrázky. IMG H1, H2

{ float: left } { clear: both }

Klasifikace elementů V této části se seznámíme se dvěma druhy vlastností. První slouží k určení druhu elementu a způsobu jeho zobrazení. Do druhé skupiny patří vlastnosti, které určují druh zobrazení seznamů. Pomocí vlastnosti display můžeme změnit druh elementu. Styly rozdělují všechny elementy do tří skupin:   

Blokové elementy jsou ty elementy, před i za kterými je zalomena řádka (např. H1 a P). Inline elementy jsou běžnou součástí textu na řádce. Nemají okolo sebe žádné zalomení řádek (např. STRONG). Nahrazované elementy jsou ty, které jsou nahrazeny nějakým obsahem a pro jejichž zařazení do okolního textu stránky jsou důležité pouze jejich rozměry (např. IMG a OBJECT).

Z blokového elementu (hodnota block) tak můžeme udělat třeba inline element (hodnota inline). Tato možnost v praxi asi uplatnění nenajde. Užitečná je však hodnota none, která způsobí nezobrazování daného elementu. Chceme-li tedy, aby se v dokumentu nezobrazovaly obrázky, můžeme použít: IMG {display: none }

Pomocí vlastnosti list-style-type vybíráme způsob odrážek a jejich číslování. Na výběr máme stejné možnosti, které nám nabízí atribut TYPE v HTML u seznamů. Zajímavější je vlastnost list-style-image. Slouží ke specifikování URL obrázku, který se použije místo odrážky. Snadno tak vyřešíme problém, který jsme řešili ve WWW-dílně Seznamy s grafickými odrážkami -- CW 35/97. Stačí používat běžně seznamy a styl UL LI {list-style-image: url(arrow.gif) }

Pokud není obrázek z nějakého důvodu k dispozici, použije se odrážka nastavená pomocí list-style-type. Vlastnost list-style-position určuje pozici odrážky vůči položce seznamu (viz obr. 3).

Vlastnost odrážek můžeme nastavit najednou pomocí vlastnosti list-style: list-style: disc outside url(arrow.gif)

Obr. 3: Změna umístění odstavcové odrážky

Kaskádové styly IV. Ukážeme si, jak v praxi použít styl, jehož definice je uložena v separátním souboru. Tento způsob práce se styly je výhodný tehdy, když chceme, aby více dokumentů mělo stejný vzhled. Svůj styl si tak může vytvořit třeba firma pro firemní Web a používat ho ve všech stránkách. Teď již k naší ukázce. Styl uložíme do souboru music.css: BODY { background: silver url(noty.gif) } .logo { color: pink; background-color: black; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 21pt; text-align: center; width: 100px; float: right; margin-right: 20px; border: 5px ridge red } .amp { font-size: 45pt } .pop { letter-spacing: 5pt } .logo HR { color: white; width: 90% } .disco { color: white; font-size: 8pt; text-transform: uppercase; margin: 0px; border-width: 0px; padding: 0px } .verse { font-weight: bold; font-family: Arial, Helvetica, sans-serif } .author { font: bold 20pt Script, Zapf-Chancery, cursive } H1 { text-transform: lowercase; font-family: Arial Black, sans-serif; font-weight: 900 }

Styl ke stránce připojíme pomocí elementu LINK:

<TITLE>Použití stylů

Living In The Past

<SPAN CLASS=author>by Ian Anderson

 Happy and I'm smiling, walk a mile to drink your water. .... Oh, we won't give in, we'll keep living in the past. 

Na obrázku 1 je zobrazen výsledek v prohlížeči. Vidíme, že pomocí jednoduchého stylu, lze dosáhnout zajímavých grafických efektů. Na druhém obrázku si můžeme prohlédnout, jak dopadne zobrazení v prohlížeči, který styly nepodporuje. Stránka již sice není tak pěkná, ale i tak obsahuje všechny informace. Samotný zápis stránky je poměrně přehledný, protože nevyužívá velké množství atributů a elementů, kterými je možno ovlivňovat výsledné formátování stránky. Použití těchto atributů a elementů vede k tomu, že se nevyznačuje logická struktura stránky, ale spíše její vizuální podoba. Použití stylů přesouvá definici vzhledu stranou do stylu a umožňuje se při tvorbě stránek soustředit na správné strukturování informací. Se styly se sice dnes rozloučíme, ale ne na dlouho. V příštím ročníku Computerworldu se můžete těšit na Téma týdne věnované dynamickému HTML. Dynamické HTML umožňuje vytvářet vysoce interaktivní stránky právě použitím stylů v kombinaci se skripty. Obr. 1: Stránka je zobrazena podle stylu

Obr. 2: Zobrazení stránky bez použití stylu