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ß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 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
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φ 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-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>
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∙
© Ji°φ Kosek 1999