┌vod KaskßdovΘ styly JavaScript Ukßzky © Ji°φ Kosek
DynamickΘ HTML

P°ehled vlastnostφ styl∙

Styly jsou dnes nejefektivn∞jÜφm zp∙sobem, jak ovlßdat grafick² vzhled strßnek. Definujφ p°es padesßt vlastnostφ, kterΘ slou₧φ k nastavenφ jednotliv²ch vizußlnφch atribut∙ element∙. V nßsledujφcφch tematicky rozΦlen∞n²ch tabulkßch naleznete p°ehledn∞ uspo°ßdanΘ vÜechny tyto vlastnosti. Poslednφ tabulka obsahuje i p°ehled filtr∙, kterΘ lze pou₧φt v IE 4.0.

Informace v tabulkßch jsou uspo°ßdßny jednotn∞. Prvnφ sloupec obsahuje nßzev vlastnosti. Druh² sloupec zachycuje vÜechny p°φpustnΘ hodnoty vlastnosti. P°i popisu pou₧φvßme n∞kterΘ specißlnφ operßtory, jejich₧ v²znam vysv∞tluje tabulka P°ehled syntaktick²ch operßtor∙.

P°ehled syntaktick²ch operßtor∙
OperßtorV²znam
A | B Prßv∞ jedna z entit A a B
A || B Alespo≥ jedna z entit A a B v libovolnΘm po°adφ
[ ... ] Skupiny
A ? Entita A je nepovinnß
A {m, n}Entita A se opakuje nejmΘn∞ m-krßt a nejvφce n-krßt

T°etφ sloupec uvßdφ implicitnφ hodnotu -- tj. tu, kterß se pro danou vlastnost pou₧ije, pokud nenφ ve stylu zm∞n∞na. DalÜφ sloupec vymezuje elementy, na kterΘ se danß vlastnost vztahuje. V∞tÜinou se vlastnost vztahuje na vÜechny elementy, ale i zde existujφ jistΘ v²jimky. Rozd∞lφme si proto elementy do t°φ skupin:

Pßt² sloupec nßs informuje o tom, zda se vlastnost d∞dφ i pro vno°enΘ elementy. Nßsleduje sloupec s informacφ o zp∙sobu interpretace procentnφch hodnot. Ty se toti₧ u ka₧dΘho elementu mohou vztahovat k n∞Φemu jinΘmu. Poslednφ sloupec struΦn∞ popisuje danou vlastnost.

Hodnoty vlastnostφ mohou mφt r∙znΘ jednotky. V tabulkßch jsou tyto hodnoty vytiÜt∞ny kurzφvou. Jejich popis a syntaxi nynφ rozebereme.

DΘlkovΘ jednotky

DΘlkovΘ ·daje se zapisujφ jako celß nebo desetinnß Φφsla s nebo bez znamΘnka. Dvojice pφsmen identifikujφcφ jednotky musφ b²t p°ipojena ihned za Φφslem. Jednotky existujφ dvou druh∙ -- relativnφ a absolutnφ. Relativnφ se v₧dy odvozujφ od velikosti aktußlnφho pφsma.

Relativnφ jednotky
emV²Üka aktußlnφho pφsma. Odpovφdß Üφ°ce pφsmene `M'.
exV²Üka pφsmene `x'.
pxPixely -- 1 pixel odpovφdß jednomu bodu obrazovky.

Absolutnφ jednotky
inPalce. 1 in = 2,54 cm = 72 pt
cmCentimetry.
mmMilimetry. 10 mm = 1 cm
ptBody. 1 pt = 1/72 in = 1/12 pc
pcPica. 1 pc = 12 pt

Procenta

Procenta se zapisujφ jako celß nebo desetinnß Φφsla s nebo bez znamΘnka, za kter²mi ihned nßsleduje znak `%'. Hodnoty zadanΘ jako procento se relativn∞ vztahujφ k n∞jakΘ jinΘ hodnot∞, od kterΘ se odvodφ absolutnφ velikost. Proto si v₧dy musφme uv∞domit, od kterΘ hodnoty se bude absolutnφ velikost odvφjet. V∞tÜinou se jednß o Üφ°ku elementu.

╚φsla

╚φslo je celΘ nebo desetinnΘ s nebo bez znamΘnka.

Barvy

P°i specfikovßnφ barev mßme n∞kolik mo₧nostφ. Tou prvnφ je pou₧itφ jmΘna barvy. JmΘna barev jsou stejnß jako v HTML: 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ß). Druhou mo₧nostφ je zapsat barvu p°φmo v RGB notaci pomocφ ΦervenΘ, zelenΘ a modrΘ slo₧ky barvy. Jsou celkem Φty°i mo₧nosti:

#rgb p°. #f00 je Φervenß
#rrggbb p°. #ffff00 je ₧lutß
rgb(r, g, b) r, g, b jsou od 0 do 255
rgb(r%,g%,b%) r, g, b jsou od 0 do 100

URL

Zßpis URL adres se provßdφ funkcionßlnφm zp∙sobem. VÜe nßm nejlΘpe ilustruje p°φklad: 
url(http://www.server.cz/info/img/logo.gif)
Zßvorky, Φßrky, mezery a uvozovky musφme zapsat tak, ₧e jim p°ed°adφme zp∞tnΘ lomφtko `\' (nap°.  `\(').

Seznam pφsem

Pφsma zadßvßme jako Φßrkami odd∞len∞n² seznam jejich nßzv∙. Pφsma uvednß d°φve majφ v∞tÜφ prioritu. Jako poslednφ pφsmo v seznamu bychom m∞li v₧dy uvΘst nßzev obecnΘ rodiny pφsma.

ObecnΘ rodiny pφsma
serifklasickΘ patkovΘ pφsmo (nap°. Times)
sans-serifbezpatkovΘ pφsmo (nap°. Helvetica nebo Arial)
cursivekurzφva (nap°. Script)
fantasyozdobnΘ pφsmo
monospaceneproporcionßlnφ pφsmo (nap°. Courier)

Vlastnosti pφsma
VlastnostMo₧nΘ hodnotyImplicitnφ hodnotaAplikuje se naD∞dφ se?Interpretace procentnφch hodnotPopis
font-family seznam pφsem zßle₧φ na prohlφ₧eΦi vÜechny elementy ano -- rodina pφsma
font-style normal | italic | oblique normal vÜechny elementy ano -- styl pφsma:
normal = normßlnφ, italic = kurzφva, oblique = sklon∞nΘ
font-variant normal | small-caps normal vÜechny elementy ano -- varianta pφsma: normßlnφ nebo kapitßlky
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 normal = 400 vÜechny elementy ano -- duktus pφsma (tj. "jak bude pφsmo silnΘ")
font-size xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | dΘlka | procento medium vÜechny elementy ano relativn∞ k rodiΦovskΘ velikosti pφsma velikost pφsma
font [font-style || font-variant || font-weight]? font-size [/ line-height]? font-family implicitnφ hodnoty jednotliv²ch vlastnostφ vÜechny elementy ano pou₧itelnΘ pro font-size a line-height komplexnφ nastavenφ vlastnostφ pφsma

Vlastnosti textu
VlastnostMo₧nΘ hodnotyImplicitnφ hodnotaAplikuje se naD∞dφ se?Interpretace procentnφch hodnotPopis
word-spacing normal | dΘlka normal vÜechny elementy ano -- o kolik se mß zv∞tÜit mezislovnφ mezera
letter-spacing normal | dΘlka normal vÜechny elementy ano -- o kolik se mß zv∞tÜit mezera mezi jednotliv²mi pφsmeny
text-decoration none | [underline || overline || line-through || blink] none vÜechny elementy ne -- "ozdoba" textu:
underline = podtr₧enφ, overline = Φßra nad, line-through = Φßra p°es, blink = blikßnφ
vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | procento baseline inline elementy ne vztahujφ se k hodnot∞ line-height vertikßlnφ zarovnßnφ
text-transform capitalize | uppercase | lowercase | none none vÜechny elementy ano -- p°evod textu na:
capitalize = kapitßlky, uppercase = velkß pφsmena, lowercase = malß pφsmena
text-align left | right | center | justify zßle₧φ na prohlφ₧eΦi blokovΘ elementy ano -- zarovnßnφ textu:
left = na lev² praporek, right = na prav² praporek, center = centrovßnφ, justify = do bloku
text-indent dΘlka | procento 0 blokovΘ elementy ano vztahujφ se k Üφ°ce rodiΦovskΘho elementu velikost odstavcovΘ odrß₧ky (odsazenφ prvnφ °ßdky odstavce)
line-height normal | Φφslo | dΘlka | procento normal vÜechny elementy ano relativn∞ k velikosti pφsma elementu v²Üka °ßdky; Φφslo udßvß nßsobek velikosti pφsma (v∞tÜinou by m∞l b²t alespo≥ 1.2)

Vlastnosti pro nastavenφ barev a pozadφ
VlastnostMo₧nΘ hodnotyImplicitnφ hodnotaAplikuje se naD∞dφ se?Interpretace procentnφch hodnotPopis
color barva zßle₧φ na prohlφ₧eΦi vÜechny elementy ano -- barva
background-color barva | transparent transparent vÜechny elementy ne -- barva pozadφ
background-image URL | none none vÜechny elementy ne -- obrßzek na pozadφ
background-repeat repeat | repeat-x | repeat-y | no-repeat repeat vÜechny elementy ne -- sm∞ry, ve kter²ch se bude obrßzek na pozadφ opakovat
background-attachment scroll | fixed scroll vÜechny elementy ne -- pozadφ se pohybuje se strßnkou (scroll) nebo je jako p°ibitΘ (fixed)
background-position [procento | dΘlka] {1,2} | [top | center | bottom] || [left | center | right] 0% 0% (odpovφdß top left) blokovΘ a nahrazovanΘ elementy ne vztahujφ se k velikosti vlastnφho elementu poloha obrßzku na pozadφ (udßvß se X- a Y-pozice)
background background-color || background-image || background-repeat || background-attachment || background-position implicitnφ hodnoty jednotliv²ch vlastnostφ vÜechny elementy ne pouze u background-position komplexnφ nastavenφ vlastnostφ pozadφ

Vlastnosti box∙
VlastnostMo₧nΘ hodnotyImplicitnφ hodnotaAplikuje se naD∞dφ se?Interpretace procentnφch hodnotPopis
margin-top dΘlka | procento | auto 0 vÜechny elementy ne vztahujφ se k Üφ°ce rodiΦovskΘho elementu velikost hornφho okraje
margin-right dΘlka | procento | auto 0 vÜechny elementy ne vztahujφ se k Üφ°ce rodiΦovskΘho elementu velikost pravΘho okraje
margin-bottom dΘlka | procento | auto 0 vÜechny elementy ne vztahujφ se k Üφ°ce rodiΦovskΘho elementu velikost spodnφho okraje
margin-left dΘlka | procento | auto 0 vÜechny elementy ne vztahujφ se k Üφ°ce rodiΦovskΘho elementu velikost levΘho okraje
margin [dΘlka | procento | auto] {1,4} implicitnφ hodnoty jednotliv²ch vlastnostφ vÜechny elementy ne vztahujφ se k Üφ°ce rodiΦovskΘho elementu komplexnφ nastavenφ velikosti okraj∙
padding-top dΘlka | procento 0 vÜechny elementy ne vztahujφ se k Üφ°ce rodiΦovskΘho elementu velikost vnit°nφho hornφho okraje
padding-right dΘlka | procento 0 vÜechny elementy ne vztahujφ se k Üφ°ce rodiΦovskΘho elementu velikost vnit°nφho pravΘho okraje
padding-bottom dΘlka | procento 0 vÜechny elementy ne vztahujφ se k Üφ°ce rodiΦovskΘho elementu velikost vnit°nφho spodnφho okraje
padding-left dΘlka | procento 0 vÜechny elementy ne vztahujφ se k Üφ°ce rodiΦovskΘho elementu velikost vnit°nφho levΘho okraje
padding [dΘlka | procento] {1,4} 0 vÜechny elementy ne vztahujφ se k Üφ°ce rodiΦovskΘho elementu komplexnφ nastavenφ velikostφ vnit°nφho okraje
border-top-width thin | medium | thick | dΘlka medium vÜechny elementy ne -- Üφ°ka hornφ Φßsti rßmeΦku
border-right-width thin | medium | thick | dΘlka medium vÜechny elementy ne -- Üφ°ka pravΘ Φßsti rßmeΦku
border-bottom-width thin | medium | thick | dΘlka medium vÜechny elementy ne -- Üφ°ka spodnφ Φßsti rßmeΦku
border-left-width thin | medium | thick | dΘlka medium vÜechny elementy ne -- Üφ°ka levΘ Φßsti rßmeΦku
border-width [thin | medium | thick | dΘlka] {1,4} implicitnφ hodnoty jednotliv²ch vlastnostφ vÜechny elementy ne -- komplexnφ nastavenφ Üφ°ky rßmeΦku
border-color barva {1,4} hodnota vlastnosti color vÜechny elementy ne -- barva rßmeΦku
border-style [none | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} none vÜechny elementy ne -- nastavenφ tvaru rßmeΦku
border-top border-top-width || border-style || barva implicitnφ hodnoty jednotliv²ch vlastnostφ vÜechny elementy ne -- nastavenφ vlastnostφ hornφ Φßsti rßmeΦku
border-right border-top-width || border-style || barva implicitnφ hodnoty jednotliv²ch vlastnostφ vÜechny elementy ne -- nastavenφ vlastnostφ pravΘ Φßsti rßmeΦku
border-bottom border-top-width || border-style || barva implicitnφ hodnoty jednotliv²ch vlastnostφ vÜechny elementy ne -- nastavenφ vlastnostφ spodnφ Φßsti rßmeΦku
border-left border-top-width || border-style || barva implicitnφ hodnoty jednotliv²ch vlastnostφ vÜechny elementy ne -- nastavenφ vlastnostφ levΘ Φßsti rßmeΦku
border border-width || border-style || barva implicitnφ hodnoty jednotliv²ch vlastnostφ vÜechny elementy ne -- komplexnφ nastavenφ vlastnostφ rßmeΦku
width dΘlka | procento | auto auto blokovΘ a nahrazovanΘ elementy ne vztahujφ se k Üφ°ce rodiΦovskΘho elementu Üφ°ka
height dΘlka | auto auto blokovΘ a nahrazovanΘ elementy ne -- v²Üka
float left | right | none none vÜechny elementy ne -- umφst∞nφ plovoucφho objektu:
left = vlevo, right = vpravo, none = normßlnφ objekt
clear none | left | right | both none vÜechny elementy ne -- Φekßnφ na skonΦenφ plovoucφch element∙:
left = vlevo, right = vpravo, both = na obou stranßch

KlasifikaΦnφ vlastnosti
VlastnostMo₧nΘ hodnotyImplicitnφ hodnotaAplikuje se naD∞dφ se?Interpretace procentnφch hodnotPopis
display block | inline | list-item | none block vÜechny elementy ne -- druh elementu
white-space normal | pre | nowrap normal blokovΘ elementy ano -- zp∙sob prßce s mezerami:
normal = normßlnφ, pre = mezery a konce °ßdek se zachovajφ, nowrap = text se nebude zalamovat do °ßdek
list-style-type disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none disc elementy, kterΘ majφ display: list-item ano -- druh odrß₧ek v seznamech
list-style-image URL | none none elementy, kterΘ majφ display: list-item ano -- obrßzek pou₧it² jako odrß₧ka v seznamu
list-style-position inside | outside outside elementy, kterΘ majφ display: list-item ano -- umφst∞nφ odrß₧ky:
outside = p°ed textem, inside = v textu polo₧ky seznamu
list-style list-style-type || list-style-position || list-style-image implicitnφ hodnoty jednotliv²ch vlastnostφ elementy, kterΘ majφ display: list-item ano -- komplexnφ nastavenφ vzhledu polo₧ek seznamu

Vlastnosti pro urΦenφ pozice
VlastnostMo₧nΘ hodnotyImplicitnφ hodnotaAplikuje se naD∞dφ se?Interpretace procentnφch hodnotPopis
position absolute | relative | static static vÜechny elementy ano -- zp∙sob umφst∞nφ elementu;
static odpovφdß b∞₧nΘmu formßtovßnφ
left dΘlka | procento | auto auto vÜechny elementy ne -- posunutφ elementu vpravo;
zßpornß hodnota posune vlevo
top dΘlka | procento | auto auto vÜechny elementy ne -- posunutφ elementu dol∙;
zßpornß hodnota posune nahoru
width
height		 dΘlka | procento | auto auto elementy blokovΘ, nahrazovanΘ a s  position: absolute ne vztahujφ se k Üφ°ce (v²Üce) rodiΦovskΘho elementu Üφ°ka a v²Üka elementu
clip auto | rect([dΘlka | auto] [dΘlka | auto] [dΘlka | auto] [dΘlka | auto]) auto elementy s position: absolute ne -- definice obdΘlnφkovΘ Φßsti elementu, kterß bude viditelnß (standardn∞ je viditeln² cel² element)
overflow none | clip | scroll none elementy s relativnφ nebo absolutnφ pozicφ ne -- zp∙sob zobrazenφ element∙, jejich₧ obsah se nevejde do vyhrazenΘho prostoru:
none = obsah elementu p°eteΦe,
clip = obsah elementu bude o°φznut,
scroll = po obsahu p∙jde skrolovat
z-index auto | Φφslo auto elementy s relativnφ nebo absolutnφ pozicφ ne -- pozice elementu na pseudoose z
visibility inherit | visible | hidden inherit vÜechny elementy pro inherit -- viditelnost elementu:
visible = viditeln²,
hidden = neviditeln²;

Filtry a jejich parametry
FiltrPopisParametry
Alpha Mφra pr∙hlednosti objektu. Lze vytvß°et i transparentnφ p°echody (gradienty).
Opacity=Φφslo
Pr∙hlednost (0 = ·pln∞ pr∙hlednß, 100 = nepr∙hlednß).
FinishOpacity=Φφslo
Pr∙hlednost (0--100).
Style=Φφslo
UrΦenφ tvaru transparentnφho p°echodu: 0 (jednotn²), 1 (lineßrnφ), 2 (radißlnφ) a 3 (obdΘlnφkov²).
StartX=x
Sou°adnice x zaΦßtku p°echodu.
StartY=y
Sou°adnice y zaΦßtku p°echodu.
FinishX=x
Sou°adnice x konce p°echodu.
FinishY=y
Sou°adnice y konce p°echodu.
Blur Vytvo°φ efekt objektu pohybujφcφho se vysokou rychlostφ jeho rozmazßnφm v jednom sm∞ru.
Add=boolean
1 = do rozmazanΘho obrßzku se p°idß i p∙vodnφ obrßzek;
0 = v²sledek se nebude kombinovat s originßlnφm obrßzkem.
Direction=·hel
┌hel, kter²m bude sm∞rovat Ümouha. ┌hel se zadßvß ve stupnφch a mo₧nΘ jsou pouze nßsobky 45░.
Strength=Φφslo
Sφla rozmazßnφ.
Chroma UrΦitou barvu objektu vykreslφ jako pr∙hlednou.
Color=barva
Barva, kterß bude transparentnφ. Udßvß se ve tvaru #RRGGBB.
DropShadow Filtr vytvo°φ k objektu stφn a tφm i zdßnliv² efekt, ₧e se objekt vznßÜφ nad strßnkou.
Color=barva
Barva stφnu ve tvaru #RRGGBB.
OffX=Φφslo
Posunutφ stφnu oproti originßlnφmu objektu ve sm∞ru osy x.
OffY=Φφslo
Posunutφ stφnu oproti originßlnφmu objektu ve sm∞ru osy y.
Positive=boolean
1 = stφn je proveden pouze pro netransparentnφ Φßsti objektu;
0 = stφn je vytvo°en pro vÜechny body obrßzku.
FlipH Horizontßln∞ p°evrßtφ objekt.
FlipV Vertikßln∞ p°evrßtφ objekt.
Glow Vytvo°φ dojem, ₧e objekt svφtφ tφm, ₧e specifikovanou barvou obkreslφ okraje objektu.
Color=barva
Barva obrysu ve tvaru #RRGGBB.
Strength=Φφslo
Intenzita obrysu (1--255).
Gray VÜechny barvy v objektu p°evede na odstφny Üedi.
Invert Provede inverzi hodnot jasu, sytosti a sv∞tlosti v objektu.
Light Simuluje efekt nasvφcenφ objektu sv∞teln²m zdrojem. Sv∞telnΘ zdroje se p°idßvajφ pomocφ metod, nelze je nastavit jako parametry.
Mask Vytvo°φ z objektu transparentnφ masku.
Color=barva
Barva, kterou se vykreslφ p∙vodn∞ transparentφ Φßsti objektu. Op∞t ve tvaru #RRGGBB.
Shadow Vytvo°φ k objektu jeho stφn.
Color=barva
Barva stφnu zadanß ve tvaru #RRGGBB.
Direction=·hel
┌hel, kter²m bude sm∞rovat stφn. ┌hel se zadßvß ve stupnφch a mo₧nΘ jsou pouze nßsobky 45░.
Wave Zdeformuje objekt do tvaru sinusoidy.
Add=boolean
1 = do zvln∞nΘho obrßzku se p°idß i p∙vodnφ obrßzek;
0 = v²sledek se nebude kombinovat s originßlnφm obrßzkem.
Freq=Φφslo
PoΦet vln v deformaci.
Light=Φφslo
Sv∞telnß intenzita vlny (0--100).
Phase=Φφslo
FßzovΘ posunutφ zaΦßtku vlny. Udßvß se od 0 do 100 jako procento z jednoho ·plnΘho pr∙b∞hu sinusoidy.
Strength=Φφslo
Intenzita efektu.
XRay Barevnou hloubku objektu snφ₧φ na 1 -- tj. vytvo°φ Φernobφl² obrßzek, kter² zachycuje obrysy v p∙vodnφm objektu.

┌vod | KaskßdovΘ styly | JavaScript | Ukßzky | DHTML vs. Java

© Copyright 1998 Ji°φ Kosek, All Rights Reserved.
Strßnka obsahuje pln² text Φlßnku otiÜt∞nΘho v t²denφku Computerworld dne 30. ledna 1998 (CW5/98).
Strßnku p°ipravil Ji°φ Kosek, xkosj06@vse.cz
Poslednφ modifikace: 24-01-98