ReferenΦnφ p°ehled vlastnostφ CSS1
(Cascading Style Sheets, level 1)

Tento dokument shrnuje nejd∙le₧it∞jÜφ informace o kßskadov²ch stylech dokument∙. Informace vychßzejφ z oficialnφho doporuΦenφ konsorcia W3C Cascading Style Sheets, level 1, jsou vÜak uspo°ßdßny do p°ehledn²ch tabulek.

Obsah

Vlastnosti pφsma
Vlastnosti pro nastavenφ barev a pozadφ
Vlastnosti textu
Vlastnosti box∙
KlasifikaΦnφ vlastnosti
╪φzenφ pozice (Zatφm se nachßzφ ve fßzi v²voje; z formßlnφho hlediska se nejednß o standard.)
Pou₧itß syntaxe
Jednotky
Druhy element∙

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`	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 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 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" text: 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 na hodnotu `line-height` elementu	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 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	no	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∙ 4 hodnoty: naho°e, vpravo, dole, vlevo 3 hodnoty: naho°e, vpravo a vlevo, dole 2 hodnoty: naho°e a dole, vpravo a vlevo 1 hodnota: noho°e a vpravo a dole a vlevo
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 dolnφ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 4 hodnoty: naho°e, vpravo, dole, vlevo 3 hodnoty: naho°e, vpravo a vlevo, dole 2 hodnoty: naho°e a dole, vpravo a vlevo 1 hodnota: noho°e a vpravo a dole a vlevo
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 4 hodnoty: naho°e, vpravo, dole, vlevo 3 hodnoty: naho°e, vpravo a vlevo, dole 2 hodnoty: naho°e a dole, vpravo a vlevo 1 hodnota: noho°e a vpravo a dole a vlevo
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: 4 hodnoty: naho°e, vpravo, dole, vlevo 3 hodnoty: naho°e, vpravo a vlevo, dole 2 hodnoty: naho°e a dole, vpravo a vlevo 1 hodnota: noho°e a vpravo a dole a vlevo
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	--	left, right = plovoucφ objekt (nap°. obrßzek obtΘkan² textem), 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 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

╪φzenφ 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 pozicovß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²

Pou₧itß syntaxe

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
?	P°edchßzejφcφ entita je nepovinnß
{A,B}	P°edchßzejφcφ entita se opakuje nejmΘn∞ A-krßt a nejvφce B-krßt

Jednotky

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.

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

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. Pokud pou₧φvßme procenta, musφme si v₧dy 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 jsou stejnß jako v HTML a jsou nßsledujφcφ: 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 si nejlΘpe ukß₧eme na 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 '\'.

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 obecn² nßzev pφsma:

`serif`	klasickΘ patkovΘ pφsmo (nap°. Times)
`sans-serif`	bezpatkovΘ pφsmo (nap°. Helvetica nebo Arial)
`cursive`	kurzφva
`fantasy`	ozdobnΘ pφsmo
`monospace`	neproporcionßlnφ pφsmo (nap°. Courier)

Druhy element∙

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 obsahem a pro jejich₧ za°azenφ do okolnφho textu strßnky jsou d∙le₧itΘ pouze jejich rozm∞ry (nap°. IMG a OBJECT).

Strßnku p°ipravil Ji°φ Kosek, xkosj06@vse.cz
Poslednφ modifikace: 09-11-97

ReferenΦnφ p°ehled vlastnostφ CSS1 (Cascading Style Sheets, level 1)

Obsah

ReferenΦnφ p°ehled vlastnostφ CSS1
(Cascading Style Sheets, level 1)