Kompletní seznam vlastností CSS stylû pouæitelnÿch v HTML

Kompletní seznam vlastností CSS stylû pouæitelnÿch v HTML

Zde je kompletní seznam stylû z normy CSS I, které jsou pouæitelné v HTML stránkách. Ve¿keré vlastnosti stylû jsou rozdêleny do skupin podle svého vÿznamu. Kaædá skupina vlastností pak je v samostatné tabulce. Vysvêtlení vÿznamu jednotlivÿch sloupcû tabulek:

Jméno - jméno vlastnosti.

Moæné hodnoty - zde je zapsán seznam hodnot, které je moæné pouæít u dané vlastnosti. Pouæívá se následující legenda:

jedna svislá çárka | - znamená, æe mûæete pouæít jenom jednu z vypsanÿch hodnot. Nap⌐íklad zápis scroll | fixed znamená, æe mûæete pouæít buâ hodnotu scroll, nebo hodnotu fixed. Ale nelze pouæít obê najednou.
dvê svislé çárky || - mûæete pouæít jakoukoli hodnotu i více hodnot najednou. Nap⌐íklad zápis [underline || overline || line-through || blink] ⌐íká, æe mûæete pouæít najednou t⌐eba underline i overline.
otazník za hodnotou - ⌐íká, æe hodnota je nepovinná. T⌐eba zápis ['font-weight']? znamená, æe hodnotu p⌐íslu¿ející font-weight mûæete, ale nemusíte pouæít.
{1,2} - ⌐íká, æe hodnota se mûæe pouæít buâ jednou, nebo dvakrát.
{1,4} - ⌐íká, æe hodnota se mûæe pouæít buâ jednou aæ çty⌐ikrát

Implicitní hodnota - to je hodnota, kterou prohlíæeç pouæije, pokud æádnÿ styl nepouæijeme.

Moæné pouæít na - ukazuje, na jakÿ druh znaçek je moæné styl pouæít. V zásadê jsou t⌐i druhy znaçek:

Blokové znaçky - vytvá⌐í blok textu, jako josu odstavce, tabulky, apod. P⌐íklady: <h2>, , <ul>, <td>.
Nahrazované znaçky - vytvá⌐í blok, kterÿ nêçím nahrazen, t⌐eba obrázkem, Java appletem. P⌐íklad: <img>, <object>.
Znaçky v ⌐ádce - to jsou znaçky, které ovlivñují formátování textu, ale nevytvá⌐í æádnÿ blok. Nap⌐íklad znaçky , , .

Dále je pot⌐eba si uvêdomit, æe vÿjimkou ze v¿ech znaçek je . Tato znaçka nepat⌐í do æádné skupiny, a je tak trochu çernou ovcí. Na tuto znaçku se nedají æádné styly aplikovat, a ani by to nemêlo æádnÿ smysl.

A je¿tê poznámku pro pochopení. Kaskádovÿmi styly CSS nastavujete vlastnosti v¿eho, co je uvnit⌐ dané znaçky (pokud se vlastnost stylu dêdí, jinak jenom pokud není uvnit⌐ jiná znaçka). Takæe t⌐eba mûæete nastavit font pomocí font-family na jakoukoli znaçku. Vÿznam je ten, æe platí pro v¿echny texty uvnit⌐ této znaçky. Nap⌐íklad urçení fontu pro tabulku je pot⌐eba chápat tak, æe jste nastavili font pro v¿echny texty uvnit⌐ tabulky.

Dêdí se? - ukazuje, zda se vlastnost dêdí. Pokud máte t⌐eba nastavenÿ styl na znaçku , která p⌐edstavuje odstavec, potom dêdêní zpûsobuje, æe styl platí i na v¿echny znaçky uvnit⌐ odstavce.

Popis - zde je velice struçnÿ popis vÿznamu. Pro dokonalé pochopení je pot⌐eba se obrátit na p⌐íslu¿nÿ çlánek ze seriálu o kaskádovÿch stylech CSS.

Vlastnosti písma
Jméno	Moæné hodnoty	Implicitní hodnota	Moæné pouæít na	Dêdí se?	Popis
font-family	libovolnê dlouhÿ seznam fontû oddêlenÿch çárkami	závisí na prohlíæeçi	v¿echny znaçky	ano	nastavení druhû písma; prohlíæeç pouæije první písmo v seznamu, které má k dispozici
font-style	normal \| italic \| oblique	normal	v¿echny znaçky	ano	styl písma: italic = kurzíva, oblique = sklonêné
font-variant	normal \| small-caps	normal	v¿echny znaçky	ano	small-caps = kapitálky
font-weight	normal \| bold \| bolder \| lighter \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900	normal	v¿echny znaçky	ano	tlou¿ƒka písma, normal = 400
font-size	xx-small \| x-small \| small \| medium \| large \| x-large \| xx-large \| larger \| smaller \| délka \| procento	medium	v¿echny znaçky	ano	velikost písma
font	['font-style' \|\| 'font-variant' \|\| 'font-weight']? 'font-size' [/'line-height']? 'font-family'	podle jednotlivÿch vlastností	v¿echny znaçky	ano	zkrácenÿ zápis - nastavuje v¿echny vlastnosti písma

Vlastnosti barev a pozadí
Jméno	Moæné hodnoty	Implicitní hodnota	Moæné pouæít na	Dêdí se?	Popis
color	barva	závisí na prohlíæeçi	v¿echny znaçky	ano	barva pop⌐edí, barva textu, apod.
background-color	barva \| transparent	transparent	v¿echny znaçky	ne	barva pozadí
background-image	url \| none	none	v¿echny znaçky	ne	obrázek na pozadí
background-repeat	repeat \| repeat-x \| repeat-y \| no-repeat	repeat	v¿echny znaçky	ne	opakování obrázku na pozadí
background-attachment	scroll \| fixed	scroll	v¿echny znaçky	ne	scroll = pozadí se pohybuje s textem, fixed = pozadí je p⌐ibité
background-position	[procento \| délka]{1,2} \| [[top \| center \| bottom] \|\| [left \| center \| right]]	0% 0%	blokové a nahrazované znaçky	ne	poloha obrázku na pozadí
background	'background-color' \|\| 'background-image' \|\| 'background-repeat' \|\| 'background-attachment' \|\| 'background-position'	podle jednotlivÿch vlastností	v¿echny znaçky	ne	zkrácenÿ zápis - nastavuje v¿echny vlastnosti pozadí

Vlastnosti textu
Jméno	Moæné hodnoty	Implicitní hodnota	Moæné pouæít na	Dêdí se?	Popis
word-spacing	normal \| délka	normal	v¿echny znaçky	ano	velikost mezery mezi jednotlivÿmi slovy
letter-spacing	normal \| délka	normal	v¿echny znaçky	ano	velikost mezery mezi jednotlivÿmi písmeny
text-decoration	none \| [underline \|\| overline \|\| line-through \|\| blink]	none	v¿echny znaçky	témê⌐ ne	efekty: underline = podtræení, overline = çára nad, line-through = p⌐e¿krtnutí, blink = blikání
vertical-align	baseline \| sub \| super \| top \| text-top \| middle \| bottom \| text-bottom \| procento	baseline	znaçky v ⌐ádce a uvnit⌐ bunêk tabulky	ne	vertikální zarovnání
text-transform	capitalize \| uppercase \| lowercase \| none	none	v¿echny znaçky	ano	p⌐evede text na: capitalize = kapitálky, uppercase = velká písmena, lowercase = malá písmena
text-align	left \| right \| center \| justify	závisí na prohlíæeçi	blokové znaçky	ano	horizontální zarovnání: left = vlevo, roght = vpravo, center = na st⌐ed, justify = do bloku
text-indent	délka \| procento	0	blokové elementy	ano	velikost odsazení první ⌐ádky v odstavci
line-height	normal \| çíslo \| délka \| procento	normal	v¿echny znaçky	ano	vÿska ⌐ádku

Vlastnosti boxû
Jméno	Moæné hodnoty	Implicitní hodnota	Moæné pouæít na	Dêdí se?	Popis
margin-top	délka \| procento \| auto	0	v¿echny znaçky	ne	vÿ¿ka mezery nad horním okrajem
margin-right	délka \| procento \| auto	0	v¿echny znaçky	ne	¿í⌐ka mezery na pravém okraji
margin-bottom	délka \| procento \| auto	0	v¿echny znaçky	ne	vÿ¿ka mezery nad dolním okrajem
margin-left	délka \| procento \| auto	0	v¿echny znaçky	ne	¿í⌐ka mezery p⌐ed levÿm okrajem
margin	[délka \| procento \| auto]{1,4}	0	v¿echny znaçky	ne	zkrácenÿ zápis - nastavení ¿í⌐ka mezery kolem celého boxu
padding-top	délka \| procento	0	v¿echny znaçky	ne	vÿ¿ka vnit⌐ního horního okraje
padding-right	délka \| procento	0	v¿echny znaçky	ne	¿í⌐ka vnit⌐ního pravého okraje
padding-bottom	délka \| procento	0	v¿echny znaçky	ne	vÿ¿ka vnit⌐ního dolního okraje
padding-left	délka \| procento	0	v¿echny znaçky	ne	¿í⌐ka vnit⌐ního levého okraje
padding	[délka \| procento]{1,4}	0	v¿echny znaçky	ne	zkrácenÿ zápis - nastavení v¿ech vnit⌐ních okrajû
border-top-width	thin \| medium \| thick \| délka	medium	v¿echny znaçky	ne	¿í⌐ka horní çásti rámeçku
border-right-width	thin \| medium \| thick \| délka	medium	v¿echny znaçky	ne	¿í⌐ka pravé çásti rámeçku
border-bottom-width	thin \| medium \| thick \| délka	medium	v¿echny znaçky	ne	¿í⌐ka dolní çásti rámeçku
border-left-width	thin \| medium \| thick \| délka	medium	v¿echny znaçky	ne	¿í⌐ka levé çásti rámeçku
border-width	[thin \| medium \| thick \| délka]{1,4}	medium	v¿echny znaçky	ne	zkrácenÿ zápis - ¿í⌐ka v¿ech çástí rámeçku
border-color	[barva]{1,4}	podle jednotlivÿch vlastností	v¿echny znaçky	ne	zkrácenÿ zápis - nastavuje barvu v¿ech okrajû
border-style	none \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset	none	v¿echny znaçky	ne	styl rámeçku: solid = plná çára, double = dvojitá plná çára, atd.
border-top	'border-top-width' \|\| 'border-style' \|\| barva	podle jednotlivÿch vlastností	v¿echny znaçky	ne	zkrácenÿ zápis - nastavení v¿ech vlastností horní çásti rámeçku
border-right	'border-right-width' \|\| 'border-style' \|\| barva	podle jednotlivÿch vlastností	v¿echny znaçky	ne	zkrácenÿ zápis - nastavení v¿ech vlastností pravé çásti rámeçku
border-bottom	'border-bottom-width' \|\| 'border-style' \|\| barva	podle jednotlivÿch vlastností	v¿echny znaçky	ne	zkrácenÿ zápis - nastavení v¿ech vlastností dolní çásti rámeçku
border-left	'border-left-width' \|\| 'border-style' \|\| barva	podle jednotlivÿch vlastností	v¿echny znaçky	ne	zkrácenÿ zápis - nastavení v¿ech vlastností levé çásti rámeçku
border	'border-width '\|\| 'border-style' \|\| barva	podle jednotlivÿch vlastností	v¿echny znaçky	ne	zkrácenÿ zápis - nastavuje v¿echny vlastnosti okraje
width	délka \| procento \| auto	auto	blokové a nahrazované znaçky	ne	¿í⌐ka
height	délka \| auto	auto	v¿echny znaçky	ne	vÿ¿ka
float	left \| right \| none	none	blokové a nahrazované znaçky	ne	umístêní plovoucího objektu vûçi rodiçovské znaçce
clear	none \| left \| right \| both	none	v¿echny znaçky	ne	urçuje omezení, ze které strany nesmí bÿt obtékáno: none = mûæe z obou stran, left = nesmí z levé, right = nesmí z pravé, both = nesmí vûbec

Klasifikaçní vlastnosti
Jméno	Moæné hodnoty	Implicitní hodnota	Moæné pouæít na	Dêdí se?	Popis
display	block \| inline \| list-item \| none	block	v¿echny znaçky	ne	urçuje, jak se má znaçka zobrazit, pouæití pro HTML sporné
white-space	normal \| pre \| nowrap	normal	v¿echny znaçky	ano	jak se bude zacházet s mezerami: pre = jako u znaçky <pre>, nowrap = text se nebude lámat do ⌐ádek
list-style-type	disc \| circle \| square \| decimal \| lower-roman \| upper-roman \| lower-alpha \| upper-alpha \| none	disc	seznamy	ano	tvar odráæek p⌐ed seznamem: disc = plnÿ kruh, circle = krouæek, square = çtverec, decimal = çíslování 1,2,3, lower-roman = i,ii,ii,iv, upper-roman = I,II,III,IV, lower-aplha = a,b,c, upper-alpha = A,B,C
list-style-image	url \| none	none	seznamy	ano	obrázek jako odráæka u seznamu
list-style-position	inside \| outside	outside	seznamy	ano	typ p⌐edsazení odráæky: outside = odráæka bude p⌐edsazena, inside = nebude p⌐edsazena
list-style	'list-style-type' \|\| 'list-style-position' \|\| 'list-style-image'	podle jednotlivÿch vlastností	seznamy	ano	zkrácenÿ zápis - nastavuje v¿echny vlastnosti seznamu

Seznam písem

U vlastnosti font-family je moæné urçit seznam písem. Prohlíæeç potom tento seznam prochází a pouæije první písmo v seznamu, které má k dispozici. Tento seznam by se mêl zakonçit takzvanÿm generickÿm jménem fontu:

serif - klasické patkové písmo, jako je Times.
sans-serif - klasické bezpatkové písmo, jako je Arial a Helvetica.
monospace - neproporcionální písmo, jako je Courier, nebo Terminal.
cursive - písmo s kurzívou.
fantasy - rûzná ozdobná písma

P⌐íklady generickÿch jmen písem:

Toto je písmo serif.
Toto je písmo sans-serif.
Toto je písmo monospace.
Toto je písmo cursive.

Seznam moænÿch jednotek délky

Délky lze urçovat buâ absolutnê (urçíme rovnou skuteçnou velikost), a nebo relativnê (urçíme, kolikrát chceme bÿt vêt¿í vûçi situaci, kdybychom styl nepouæili).

Absolutní urçení délky:

in - palce. Jeden palec je 2,54 cm.
mm - milimetry.
cm - centimetry.
pt - pointy. 72 pointû je jeden palec. 6 pointû je jedna pica.
pc - pica. 12 pica je jeden palec.

Relativní urçení délky:

em - Vÿ¿ka písma na ⌐ádce. Nap⌐íklad 2em znamená, æe poæadujeme délku rovnou dvojnásobku vÿ¿ky písma na ⌐ádce. (Stejnÿ efekt dosáhneme pomocí zápisu 200%).
ex - Vÿ¿ka písmene x. Zápis 3ex znamená, æe poæadujeme délku, která je rovná trojnásobku vÿ¿ky písmena x.
px - pixel, neboli bod na obrazovce.

Seznam zpûsobû urçení barev

Barvy lze urçovat buâ jménem barvy (16 nejbêænêj¿ích barev je pojmenováno), a nebo její RGB hodnotou, která vyjad⌐uje, kolik musíme smíchat çerveného (Red), zeleného (Green) a modrého (Blue) svêtla.

Zápisy pomocí RGB hodnoty:

#rrggbb - nap⌐íklad #80FFFF
#rgb - nap⌐íklad #1a3 se roztáhne na #11aa33
rgb(r,g,b) - urçuje, kolik dílû t⌐í svêtel se pouæije (moæné hodnoty jsou 0 aæ 255), nap⌐íklad rgb(50,255,0)
rgb(r%,g%,b%) - urçuje, kolik procent kaædého ze t⌐í svêtel se pouæije, nap⌐íklad rgb(10%,50%,90%)

Zápis url

URL se zapisuje, kdyæ je pot⌐eba zadat jméno souboru, vêt¿inou onrázku. Potom se url zapisuje zhruba takto:

body {background-image: url("pictures/pozadi/pozadi_2.png");}

Zápis procent

Procenta se zapisují takto: 200%.