• Kompletní přehled CSS vlastností
  • Efekty pro text a jeho vzhled a uspořádání v odstavci
  • Písmo- typ, velikost a efekty
  • Barvy a pozadí
  • Velikost a obtékání
  • Okraje a odsazení = vnitřní a vnější okraj
  • Rámečky
  • Seznamy
  • Pozicování
  • Tabulky
  • Vlastnosti, nepodporované ve všech prohlížečích

 Vlastnosti jsou uspořádány do tematických skupin a zobrazeny přehledně v tabulkách. V každém řádku tabulky je vlastnost, její možné hodnoty (jako první je vždy uvedena přednastavená), jejich význam, vzhled a případné poznámky. Samozřejmě, že není nutné si toho mnoho pamatovat, vždyť si to tady můžete kdykoliv znova najít =).

Efekty pro text a jeho vzhled a uspořádání

nova online

Vlastnost	Možné hodnoty	Význam	Vzhled	Poznámka
text-decoration	none underline overline blink line-through	bez efektů podtržení "nadtržení" blikání přeškrtnutí	text-decoration: none text-decoration: underline text-decoration: overline text-decoration: blink text-decoration: line-through	Můžete zadat víc hodnot najednou, oddělených mezerami. IE neumí zobrazit text-decoration: blink.
text-transform	none capitalize uppercase lowercase	velikost písmen stejná jako ve zdrojáku První Písmena Vždy Velká CAPS LOCK- VŠE VELKÉ všechna písmena malá	Text-transform: none text-transform: capitalize text-transform: uppercase text-transform: lowercase	Použití je třeba, když se Vám nechce přehrabovat v cizím kódu v menu, když chcete udělat první písmena velká.
line-height	normal výška násobek procento	běžná výška řádku absolutně zadaná výška násobek běžné výšky procentuální zvětšení	line-height: 10px line-height: 3 line-height: 180%
letter-spacing	normal velikost	mezera mezi jednotlivými znaky (prokládání) zvětšená o velikost	letter-spacing: normal letter-spacing: 10px
word-spacing	normal velikost	mezera mezi slovy zvětšená o velikost	word-spacing: normal word-spacing: 80%	Horší podpora ve starých prohlížečích (IE 5)
text-align	left right center justify	zarovnání textu vlevo vpravo na střed do bloku	text-align: left text-align: right text-align: center text-align: justify text-align: justify text-align: justify text-align: justify	Použití jen u blokových prvků (odstavců, divů...).
vertical-align	baseline sub super text-top middle text-bottom procento	beze změny na řádek dolní index horní index horní okraj na horní okraj textu prostředek na střed textu spodní okraj na dolní účaří textu do jaké výšky (v procentech)	baseline řádek sub řádek super řádek text-top řádek middle řádek text-bottom řádek 60% řádek	U buněk v tabulce a u obrázků v řádku se dají použít hodnoty top (co nejvýš), middle (prostředek na prostředek) a bottom (co nejníž)
display	block inline list-item none	blokový prvek řádkový prvek seznam nezobrazí se	display: block <br> display: inline <br> display: list-item <br> display: none <br>	Více o blokových a řádkových prvcích - jejich rozdíly, přetypování a praktické využití



Písmo- typ, velikost a efekty

Vlastnost	Možné hodnoty	Význam	Vzhled	Poznámka
font-style	normal italic oblique	normální kurzíva nakloněné	font-style: normal font-style: italic font-style: oblique	Kurzíva a oblique je v podstatě totéž, proto není moc důvod oblique používat
font-weight	normal bold	normální tučné	font-weight: normal font-weight: bold	Teoreticky lze tloušťku vyjádřit i číselně (100, 200, 300,...,900), ale není to dokonale podporováno, ani to nemá moc praktické využití
font-size	xx-small x-small small medium large x-large xx-large výška procento	extra malé velmi malé malé střední velké dost velké mega velké velikost (výška) zvětšení nebo zmenšení o x%	font-size: xx-small font-size: x-small font-size: small font-size: medium font-size: large font-size: x-large font-size: 15px font-size: 80%	IE vykresluje velikost o stupeň větší. Je to závislé na !DOCTYPE. Pro dokonalejší pochopení se mrkněte na velikosti v CSS, a módy prohlížečů.
font-family	typy písem	Druh písma, font	font-family: Tahoma, Verdana, sans-serif	Víc typů písma se odděluje čárkou, pokud prohlížeč nezná první písmo, použije další. Seznam typů písma
font	Lze zadat všechny předchozí hodnoty		font: italic bold 16px Verdana	Záleží na pořadí jednotlivých údajů. Předepsané pořadí je: kurzíva tučnost velikost typ písma. Můžete zadat i dvě velikosti, oddělené lomítkem (13px/110%)- velikost za lomítkem pak znamená line-height (výšku řádku).

Barvy a pozadí

Vlastnost	Možné hodnoty	Význam	Vzhled	Poznámka
color	barva	Barva (přednastaveně písma)	color: green	Pokud chcete zadat barvu něčemu jinému než písmu, většinou jen připojíte za název tohoto prvku -color (border-color, background-color)
background-attachment	scroll fixed	pozadí se při rolování stránkou posouvá pozadí je při rolování stránkou nehybné	Používá se pouze u pozadí stránky	Používá se pouze u pozadí stránky
background-color	transparent barva	průhledné pozadí barva pozadí	background-color: transparent background-color: #ff00ff
background-image	none url ('cesta')	URL obrázku na pozadí	background-image: url('../images/pozadi.bmp')
background-repeat	repeat no-repeat repeat-x repeat-y	pozadí se opakuje neopakuje opakuje se v ose x opakuje se v ose y	background-image: url('pozadi.bmp'); background-repeat: repeat background-image: url('pozadi.bmp'); background-repeat: no-repeat background-image: url('pozadi.bmp'); background-repeat: repeat-x background-image: url('pozadi.bmp'); background-repeat: repeat-y
background-position	top, center, bottom left, center, right délka, procento	Poloha obrázku na pozadí (většinou pokud se neopakuje)	background-image: url('pozadi.bmp'); background-repeat: no-repeat; background-position: left 40%	Dvě hodnoty se oddělují mezerou. První patří k horizontální, druhá hodnota k vertikální poloze.

URL pozadí se zadává do závorek a apostrofů, např.: background-image: url('../images/pozadi.gif'). Více o URL. Teoreticky lze zadat i jen background: a všechny hodnoty, oddělené mezerou, to je ale nepraktické, protože když se zblbne pořadí (já to taky nevím z hlavy), tak pak nefunguje ani jedna z hodnot.

Velikost a obtékání

Vlastnost	Možné hodnoty	Význam	Vzhled	Poznámka
width	auto šířka	automatická šířka nastavená šířka		Šířku jde nastavovat jen blokovým prvkům. IE v tom někdy chybuje. Navíc chybuje v tom, že do šířky započítává i padding a border. Záleží to na nastaveném režimu.
height	auto výška	automatická výška nastavená výška		U šířky i u výšky lze použít procenta. Ta se počítají z velikosti nadřazeného prvku (tzn. rodičovského bloku) popř. okna (u výšky).
float	none left right	objekt nebude obtékán ostatními objekty objekt bude umístěn nalevo a obtékán objekt bude umístěn napravo a obtékán	float: left odstavec s float: none (běžný odstavec) float: right
clear	none left right both	nečeká na vykreslení plovoucích objektů vykreslí se až za plovoucími objekty s float: left float: right za všemi plovoucími objekty		Více o float a clear

Okraje a odsazení = vnitřní a vnější okraj

Vlastnost	Možné hodnoty	Význam	Vzhled	Poznámka
margin	auto velikost	přednastavená velikost (většinou 0) velikost vnějšího okraje		Můžete zadat jednu, dvě nebo čtyři velikosti, oddělené mezerou. Jedna hodnota platí pro všechny strany. Dvě- první platí pro horní a spodní margin, druhá pro levý a pravý margin. Čtyři- první je pro horní, druhá pro pravý, třetí pro dolní a čtvrtá pro levý margin (jako hodinové ručičky)
margin-top margin-right margin-bottom margin-left	auto velikost	velikost vnějšího okraje horního  pravého spodního levého		Lze nastavit libovolnou délkovou jednotku
padding	velikost procento	šířka vnitřního okraje procento		Můžete zadat jednu, dvě nebo čtyři velikosti, oddělené mezerou. Jedna hodnota platí pro všechny strany. Dvě- první platí pro horní a spodní padding, druhá pro levý a pravý padding. Čtyři- první je pro horní, druhá pro pravý, třetí pro dolní a čtvrtá pro levý padding (jako hodinové ručičky).
padding-top padding-right padding-bottom padding-left	velikost procento	horní vnitřní okraj pravý spodní levý

Rámečky

Vlastnost	Možné hodnoty	Význam	Vzhled	Poznámka
border-width	medium thin thick délka	šířka rámečku běžná tenká široká nastavená	border-width: medium border-width: thin border-width: thick border-width: 4px border-width: 2% border-width: 4px 2pt 3em 1px	Stejně jako u margin padding lze zadávat jednu, dvě nebo čtyři hodnoty. Musí se ale zadat i typ rámečku, protože přednastavená hodnota je border-style: none!
border-top-width border-right-width border-bottom-width border-left-width	medium thin thick délka	šířka rámečku nahoře vpravo dole vlevo	border-top-width: medium; border-right-width: thin; border-bottom-width: 1pt; border-left-width: 5ex
border-style	none dotted dashed solid double groove ridge inset outset	Typ rámečku: žádný tečkovaný čárkovaný nepřerušovaný dvojitý příkop val zamáčklé tlačítko tlačítko vystupující z roviny	border-style: none border-style: dotted border-style: dashed border-style: solid border-style: double border-style: groove border-style: ridge border-style: inset border-style: outset	U starších verzí IE se vyskytují chyby v barvě stínování a u hodnoty dotted a dashed. Lze zadat jen jednu hodnoty. Pro vícetypový rámeček použijte border-strana-style.
border-color	barva	barva rámečku	border-style: inset; border-top-style: groove; border-bottom-style: double; border-width: 4px 5px 6px 8px; border-color: #fd5478; border-bottom-color: #000	U barvy lze zadat pouze jednu hodnotu. Pro vícebarevný rámeček použijte border-strana-color.
border-top border-right border-bottom border-left	Někdy se uvádí pořadí barva, velikost a typ; jindy velikost typ a barva. Fungovat by mělo oboje.		border-top: 4px double #d4f ; border-right: 2px groove #abcdef ; border-bottom: 3em inset #fc9630; border-left: 5ex dotted aqua;
border	barva, velikost a typ	všechny vlastnosti rámečku	border: 2px solid green

Seznamy

Vlastnosti seznamů fungují u tagů <ul>, <ol>, <li>, <menu> a <dir>. Více o tvorbě seznamů.

Vlastnost	Možné hodnoty	Význam	Vzhled	Poznámka
list-style-type	disc circle square decimal lower-roman lower-alpha upper-alpha none	kruh kružnice čtverec arabské číslice římské číslice abc ABC bez odrážek	disc circle square decimal lower-roman lower-alpha upper-alpha none
list-style-image	none URL(cesta)	běžná odrážka obrázková odrážka	běžná odrážka list-style-image: URL('../pozadi.bmp')
list-style-position	outside inside	odrážky mimo text odrážky v úrovni textu (vzhledově je odrážka součástí textu)	list-style-position: inside list-style-position: outside
list-style	všechny předchozí hodnoty oddělené mezerou			Opět doporučuji nepoužívat. Možná to zkrátí kód, ale pokud se zblbne pořadí, tak pak nefunguje ani jedna vlastnost

Pozicování

Na tomto webu se dozvíte víc o absolutním i relativním pozicování a o rozvržení stránek pomocí absolutního, relativního pozicování a tzv. Svatého grálu.

Vlastnost	Možné hodnoty	Význam	Vzhled	Poznámka
position	static absolute relative	normální umístění bez jakékoli změny umístění absolutně umístění relativně	Mozilla podporuje i hodnotu fixed (objekt při rolování stránkou zůstává stále na stejném místě v okně).
left	auto délka procento	bez posunutí posunutí doprava o délku nebo o procento	Použitelné, jen pokud prvku zadáte position: absolute nebo position: relative. Posouváte-li doleva, pak použijte zápornou hodnotu.
top	auto délka procento	bez posunutí posunutí dolů o délku nebo o procento	Použitelné, jen pokud prvku zadáte position: absolute nebo position: relative. Posouváte-li nahoru, pak použijte zápornou hodnotu.
right	auto délka procento	pozicování od pravého okraje okna nebo elementu (místo levého)	Použitelné, jen pokud prvku zadáte position: absolute. Dřív špatná podpora, dnes už ale můžete použít bez obav.
bottom	auto délka procento	pozicování od spodního okraje okna nebo elementu (místo horního)
overflow	visible hidden scroll auto	obsah, který se nevejde nechat přetékat oříznout zobrazit u něj posuvník zobrazit u něj posuvník, jen, je-li potřeba	Více o overflow
z-index	auto číslo	Pokud se některé prvky překrývají, tak z-index určuje, který z nich bude navrchu. Třetí rozměr- osa z.
visibility	visible hidden	viditelný prvek skrytý (neviditelný)	U neviditelných prvků se pro ně vyhradí místo, jako by tam byly a dokument se chová, jako že tam jsou (rozdíl od display: none).

Tabulky

Vlastnost	Možné hodnoty	Význam	Vzhled	Poznámka
table-layout	auto fixed	prohlížeč podle složitého algoritmu sám stanoví rozměry tabulky a jednotlivých sloupců tabulka musí mít zadánu width a načítá se rychleji
border-collapse	separate collapse	buňky v tabulce mají rámečky oddělené mezi jednotlivými buňkami nejsou mezery (rámeček je pro sousední buňky společný)	Při separate nelze orámovat celý řádek nabo sloupec. Vzdálenost mezi buňkami se řídí vlastností border-spacing: délka. Zobrazení prázdných buněk se řídí vlastností empty-cells. U colapse nemá smysl vlastnost empty-cells, border-spacing ani padding tabulky. Do šířky tabulky se započítává polovina šířky jejího rámečku.
empty-cells	hide show	Prázdné buňky skryje zobrazí	Má smysl pouze u border-collapse: separate.

Vlastnosti se sníženou kompatibilitou

Vlastnostmi, které podporuje jen IE se zabývat nebudu. Je jich sice hodně, ale nemají moc praktického významu a v ostatních prohlížečích je nejde příliš nafixlovat. Zmíním se jen o čtyřech vlastnostech, které podporuje Mozilla.

Jsou to min-width: minimální šířka, max-width: maximální šířka, min-height a max-height. Může nastat několik klasických případů:

• Bloku (divu) nastavíme minimální výšku min-height: 400px. Pokud bude v tomto divu méně obsahu než na výšku 400px, tak se stránka v Mozille nesmrskne, ale pod obsahem zůstane prázdné místo. V IE to musíme vyřešit buď ve stylopisu pro IE v podmíněném komentáři přidáním height: 400px nebo stačí jen podtržítkový hack {_height: 400px}.
• Tím se dostáváme k další chybě IE. Pokud zadáme pevnou výšku a textu je méně, div se nám (chybně!) nesmrskne, ale zůstane na pevné výšce. Má to i své výhody (použití místo min-height).
• Stanovíme pevnou výšku height: 400px, ale text je 500px vysoký. IE chybně roztahuje celý div, jako by bylo nastaveno height: auto a nezajímá ho, že se tím může rozpadnout design, ani to, co nastavíme u vlastnosti overflow. Mozilla správně použije overflow a podle toho řídí chování divu.

Jak se dělá web? Jazyk HTML Kompletní přehled HTML tagů CSS kaskádové styly Úvod do CSS Zápis CSS a propojení s HTML Selektory Výstupní zařízení Dědičnost a kaskáda Typy prvků v CSS Kompletní přehled CSS vlastností Rozdílný vzhled v prohlížečích Délkové jednotky v CSS Ořezávání a posun Obtékání Absolutní pozicování v CSS Relativní pozicování v CSS Layout absolutním pozicováním Layout relativním pozicováním Pokročilý layout - tzv. Svatý grál Rady a tipy Užitečné nástroje Problém? Poradíme! Reference a odkazy O autorovi