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:

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%.