Přehled vlastností stylů

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átor	Vý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:

• 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 objektem a pro jejichž zařazení do okolního textu stránky jsou důležité pouze jejich rozměry (např. IMG a OBJECT).

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

Relativní jednotky

em	Výška aktuálního písma. Odpovídá šířce písmene `M'.
ex	Výška písmene `x'.
px	Pixely -- 1 pixel odpovídá jednomu bodu obrazovky.

Absolutní jednotky

in	Palce. 1 in = 2,54 cm = 72 pt
cm	Centimetry.
mm	Milimetry. 10 mm = 1 cm
pt	Body. 1 pt = 1/72 in = 1/12 pc
pc	Pica. 1 pc = 12 pt

Procenta

Čísla

Barvy

#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

url(http://www.server.cz/info/img/logo.gif)

Seznam písem

Obecné rodiny písma

serif	klasické patkové písmo (např. Times)
sans-serif	bezpatkové písmo (např. Helvetica nebo Arial)
cursive	kurzíva (např. Script)
fantasy	ozdobné písmo
monospace	neproporcionální písmo (např. Courier)

Vlastnosti písma

Vlastnost	Možné hodnoty	Implicitní hodnota	Aplikuje se na	Dědí se?	Interpretace procentních hodnot	Popis
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

Vlastnost	Možné hodnoty	Implicitní hodnota	Aplikuje se na	Dědí se?	Interpretace procentních hodnot	Popis
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í

Vlastnost	Možné hodnoty	Implicitní hodnota	Aplikuje se na	Dědí se?	Interpretace procentních hodnot	Popis
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ů

Vlastnost	Možné hodnoty	Implicitní hodnota	Aplikuje se na	Dědí se?	Interpretace procentních hodnot	Popis
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

Vlastnost	Možné hodnoty	Implicitní hodnota	Aplikuje se na	Dědí se?	Interpretace procentních hodnot	Popis
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

Vlastnost	Možné hodnoty	Implicitní hodnota	Aplikuje se na	Dědí se?	Interpretace procentních hodnot	Popis
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

Filtr	Popis	Parametry
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