Kaskádové styly II.

Jiří Kosek ml.

Před čtrnácti dny jsme se seznámili s principy a základní syntaxí stylů. Ode dnešního dílu seriálu se podrobněji podíváme na jednotlivé vlastnosti, které lze pomocí stylů nastavit. Ještě jednou připomínám, že kompletní přehled všech vlastností stylů je přístupný na adrese http://manes.vse.cz/cgi-bin/saczech/toASCII/~xkosj06/www/css-ref.html.

Pokud postrádáte některý z dílů seriálu, můžete si jej stáhnout z Webu. Kompletní obsah seriálu je na adrese http://manes.vse.cz/cgi-bin/saczech/toASCII/~xkosj06/articles/html/index.html.

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 <CITE>Pán
prstenů</CITE>.

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

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: xx-small, 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 <BODY>).

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-colori 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:

<HTML>
<HEAD>
<TITLE>Ukázka netradičního použití obrázku pozadí</TITLE>
<STYLE><!--
 .IDG { background-image: url(idglogo.gif);
        background-repeat: no-repeat;
        background-position: center center;
        font-weight: bold;
        font-family: Arial, sans-serif }
 .IDG TH { color: yellow;
           background-color: blue }
 .IDG TD { text-align: center }
--></STYLE>
</HEAD>
<BODY>
<TABLE CLASS=IDG BORDER=1 CELLPADDING=3>
<TR><TH>Měsíc<TH>Čtenost Computerworldu
<TR><TD>leden<TD>112 %
<TR><TD>únor<TD>130 %
<TR><TD>březen<TD>102 %
<TR><TD>duben<TD>117 %
<TR><TD>květen<TD>107 %
<TR><TD>červen<TD>103 %
</TABLE>
</BODY>
</HTML>

Výsledné zobrazení v prohlížeči ukazuje obrázek 1.

Příště se podíváme na vlastnosti ovlivňující formátování celé stránky.

Obr. 1: Ukázka použití stylů