COMPUTERWORLD
Specializovaný týdeník o výpočetní technice
o Internetu
(CW 45/97)

Vytváříme si domovskou stránku

Jiří Kosek ml.

Kaskádové styly II.

Pseudotřídy a pseudoelementy

V minulém díle 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 zvláštnost 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í 3. Slouží pro nastavení barvy odkazů, navštívených odkazů a aktivovaných odkazů:

A:link { color: blue } /* nenavštívený odkaz */
A:visited { color: red } /* navštívený odkaz */
A:active { 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í 2 -- first-line 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 (<P CLASS=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 }

Co vše lze nastavit pomocí stylů

Nyní se 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ý ze starších dílů seriálu, můžete si jej stáhnout z WWW stránky IDG.

Vlastnosti, které řídí typ použitého písma

Existue skupina vlastností, které 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 jem písmen oddělených čárkami. 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. V jejím případě se jedná o tzv. obecnou rodinu písma. Ta 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 5 obecných rodin písem, které můžeme použít, uvádí tabulka 1.

Obecné rodiny písem

NázevPopis

serifpatkové písmo

sans-serifbezpatkové písmo

cursiveozdobná kurzíva

fantasyozdobné písmo

monospaceneproporcioná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 2 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 -- např.:

Mezi nejznámější Tolkienova díla patří trilogie <CITE>Pán prstenů</CITE>.

Zobrazení v prohlížeči dopadne zhruba jako na obrázku 1:

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.

Délkové jednotky

JednotkaPopis

emVýška aktuálního písma. Odpovídá šířce písmene 'M'.

exVýška písmene 'x'.

pxPixel. 1px odpovídá jednomu bodu obrazovky.

inPalec. 1in = 2,54 cm = 72 pt

cmCentimetr.

mmMilimetr.

ptBod. 1pt = 1/72 " = 1/12 pc

pcPica. 1pc = 12 pt

V tabulce si můžete všimnout, že první 3 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 tedy 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á ukázka:

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 (anilinová červeň), gray (šedivá), green (zelená), lime (citronově 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í deklaraci:

H1 { color: red }

Pokud nám nestačí předdefinované barvy, můžeme si 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 2 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-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:

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

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


| <<< | COMPUTERWORLD | IDG CZ homepage |