CSS – přehled vlastností

Vlastnosti písma

Fonty dostupné na Internetu:

Google Fonts – jednoduchá aplikace zvoleného fontu
Font Squirrel – umožňuje aplikovat zvolený font písma nezávisle na fontech uživatelského operačního systému
Font Awesome – font obsahující ikony
- Free SVG ikony již obsahují licenci v SVG soubru

Typ písma

Proporcionální písmo – různé znaky mají různou šířku, která obsahuje prázdný prostor před a za písmenem
- Bezpatkové (rodina sans-serif)
- Patkové (rodina serif)
- Ozdobné písmo (rodina fantasy, cursive)
Neproporcionální písmo (rodina monospace) – všechny znaky písma jsou stejně široké (napodobení psacího stroje nebo dálnopisu)

Tabulka vlastností

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

direction

směr psaní textu.

Hodnoty:

ltr: text psaný zleva doprava
rtl: text psaný zprava doleva
inherit: hodnota se zdědí od nadřazeného prvku

Příklad:

p.pozpatku {unicode-bidi: bidi:override; direction: rtl;}

Aby fungovala hodnota rtl, je potřeba nastavit vlastnost unicode-bidi na hodnotu bidi-override.

font

souhrnná vlastnost umožňuje zkrácený zápis všech hodnot vlastností písma najednou.

Hodnoty:

typ písma: font-family
velikost písma: font-size
styl písma: font-style
varianta písma: font-variant
síla písma: font-weight

Příklad:

em {font: arial 12px small-caps bold}

Text elementu em se zobrazí písmem Arial o velikosti 12px, kapitálkami a tučně.

font-family

určuje typ písma. Zapsat lze jednu nebo více hodnot oddělených čárkou. Pro víceslovný název typu písma – fontu- je třeba jej vložit do uvozovek. Typ písma je možné nahradit nebo doplnit obecnou rodinnou písma. Uvést je možné více hodnot oddělených čárkou. Víceslovná hodnota patří do uvozovek.

Hodnoty:

název písma: typ písma nebo rodina písma
inherit: hodnota se zdědí z nadřazeného dokumentu

Obecné rodiny písma:

serif: standardní patkové
sans-serif: standardní bezpatkové
cursive: kurzivou, psané
fantasy: ozdobné
monospace: proporcionální

Příklad:

body {font-family: Arial, Verdana, sans-serif}
h1 {font-family: "Times New Roman", serif}

Vlastnosti pro nastavení barev a pozadí

Pomocí CSS jde obarvit text, pozadí textu, vložit obrázek na pozadí s kterým lze dělat spostu věcí např. opakování obrázku, pozice obrázku…

Color

Vlastnost color určuje barvu text lze použít na všechny elementy, jako hodnota se uvádí transparent nebo barva a to jako hexakód nebo lze zapsat anglicky (pouze 16 základních barev), přehled barev i s kódy a jmény je níž na stránce.

Příklad:

h1 {color: green;}

Z příkladu je jasně vidět že nadpisy h1 budou zelené.

Background-color

Vlastnost background-color určuje barvu pozadí, lze použít na všechny elementy jako hodnota se uvádí barva a to jako hexakód nebo lze zapsat anglicky (pouze 16 základních barev).

Příklad:

h1 {background-color: silver;}

Background-image

Pozadí elementu a stránky může být jakýkoliv obrázek. Je však nutné mít na paměti, že je pouhým pozadím a dá se předpokládat, že přes něj bude nějaký text, který musí být čitelný, a to ve všech částech obrázku (černý text na černobílé fotografii prostě čitelný není).

Hodnoty:

url obrázku (cesta k obrázku)
none
inherit

Příklad:

body {background-image: url(pozadi.gif);}

Podle příkladu se na pozadí stránky vloží obrázek pozadi.gif.

Background-repeat

Obrázek na pozadí se může opakovat (např. jako nějaký vzorek) nebo může být umístěn jen jednou. Standardně se obrázek opakuje v obou směrech (x i y) až do zaplnění celé plochy elementu.

Pro určení způsobu opakování se používá vlastnost background-repeat. Pokud chceme, aby se obrázek opakoval jen ve směru x (tj. horizontálně), použijeme hodnotu repeat-x, ve směru y (tj. vertikálně) repeat-y. Pokud nechceme, aby se obrázek opakoval (např. jde-li o logo či jiný grafický počin, který nemá vytvářet vzorek), použijeme hodnotu no-repeat.

body {background-repeat: repeat-y;}

Při opakování obrázku je vhodné použít obrázek, který „sám na sebe navazuje”. V opačném případě bychom vytvořili kromě námi zamýšleného vzorku ještě nějaké to čtverečkování navíc. Opakovat bychom také neměli jeden velký obrázek, který neobsahuje vzor, ale třeba jen jeden objekt. Zkrátka a dobře nevypadá nikterak pěkně čtyři a půl krát se opakující papoušek na pozadí stránky.

Hodnoty:

repeat – Výchozí hodnota obrázek se opakuje doprava i dolů.
repeat-x – Obrázek se opakuje vedle sebe doprava.
repeat-y – Obrázek se opakuje dolů.
no-repeat – Obrázek se neopakuje zobrazí se pouze jednou.
inherit – Hodnota se zděí po rodičovském prvku.

Příklad:

body {
background-image: url(w3/logo.gif);
background-repeat: repeat-x;
}

Obrázek se tedy bude opakovat vedle sebe.

Background-attachment

Vlastnost background-attachment určuje zda se obrázek pohybuje při rolování se stránkou nebo je pořád na jednom místě.

Hodnoty:

scroll – Při rolování se obrázek pohybuje se stránkou.
fixed – Obrázek se při rolování nepohybuje.
inherit – Hodnoty se zdědí z rodičovského prvku.

Příklad:

body {
background-image: url(w3/logo.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}

Obrázek se zobrazí v a při rolovaní zůstane na stejném místě.

Background-position

Pokud chceme obrázek umístit jinak, než s výchozí pozicí (tj. levý horní roh elementu), použijeme vlastnost background-position. Umístění určuje horizontální a vertikální hodnota. Hodnoty horizontálního umístění mohou být left (vlevo), center (na střed) a right (vpravo). Hodnoty vertikálního umístění jsou top (nahoru), center (na střed) a bottom (dolů).

Hodnoty:

Procenta – např: 50% 50% levý horní roh obrázku se zobrazí na středu
Délkové jednotky – např: 100px 10px levý horní roh obrázku se zobrazí 100 pixelů zleva a 10 pixelů zprava.
top left – Obrázek se zobrazí nahoře vlevo.
top center – Obrázek se zobrazí nahoře uprostřed.
right top – Obrázek se zobrazí nahoře vpravo.
right center – Obrázek se zobrazí vpravo uprostřed.
left center – Obrázek se zobrazí vlevo uprostře.
bottom left – Obrázek se zobrazí dole vlevo.
bottom right – Obrázek se zobrazí dole vpravo.
bottom center – Obrázek se zobrazí dole ve středu.
inherit – Hodnota se zdě po rodičovském prvku

Příklad:

body {
background-image: url(w3/logo.gif);
background-repeat: no-repeat;
background-position: 50% 50%;
}

Podle příkladu se obrázek na pozadí se zobrazí uprostřed obrazovky.

Background

Background je sdružená vlastnost, pomocí které jdou zapsat vlastnosti: Background-position, Background-attachment, Background-image, Background-color, Background-repeat ve zkráceném tvaru.

Příklad:

body {
background: silver url(w3/poz.gif) repeat-x fixed top;
}

Bezpečné barvy

Bezpečných barev je 16 a mohou se zapisovat i jménem, ale samozřejmě jen anglicky.

Jménem se dá zapisovat spousta barev nejen základních 16, ale není to už validní proto ostatní barvy zapisujte pomocí hexakódů.

Aqua	Gray	Navy	Silver
Black	Green	Olive	Teal
Blue	Lime	Purple	White
Fuchsia	Maroon	red	Yellow

Další barvy

#003366	#000099	#006699	#3366FF
#336699	#0000CC	#0099CC	#3333CC
#3366CC	#000066	#0066CC	#333399
#003399	#006666	#0033CC	#669999
#009999	#0066FF	#339966	#33CCFF
#33CCCC	#3366FF	#00CC99	#3399ff
#00CCFF	#3333CC	#00FFCC	#6699FF
#0099FF	#666699	#00FFFF	#6666FF
#6600FF	#00FF99	#99CCFF	#9900FF
#6600CC	#66FFCC	#9999FF	#006600
#339933	#66FFFF	#9966FF	#00CC00
#00CC66	#66CCFF	#9933FF	#00FF00
#66FF99	#CC99FF	#9900CC	#66FF66
#99FFCC	#CC66FF	#003300	#66FF99
#CCFFFF	#CC33FF	#009933	#99FF99
#CCCCFF	#CC00FF	#33CC33	#CCFFCC
#FFFFFF	#FF00FF	#009900	#FFFFCC
#FFCCFF	#CC00CC	#66FF33	#FFCCCC
#FF99FF	#660066	#99FF99	#FF99CC
#CC66FF	#336600	#CCFF99	#FF66CC
#FF33CC	#669900	#FFCC99	#CC3399
#CC0099	#99FF33	#FF9999	#990099
#993399	#CCFF66	#FF6699	#666633
#333300	#FFFF99	#FF3399	#99CC00
#CCFF33	#FF6666	#999966	#FF9933
#FFFF66	#FF0066	#CCCC00	#FF6600
#FFCC66	#CC6699	#FFFF00	#FF5050
#FF9966	#993366	#FFCC00	#CC0066
#660033	#CC6600	#990033	#993300
#996633	#FF3300	#663300	#990000
#CC9900	#FF0000	#996600	#800000
#FF9900	#CC0000	#CC3300	#993333

Tabulka vlastností

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`	tt 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í

Novinky

Nejzásadnější novinkou související s nastavováním barev je daleko větší podpora průhlednosti, než pouhá hodnota transparent definovaná v původních kaskádových stylech. (Tuto hodnotu lze nyní použít u kterékoli vlastnosti, která přijímá hodnotu typu barva.) W3C jde ale mnohem dále a umožňuje ovlivňovat stupeň průhlednosti definovaných barev. Slouží k tomu nová CSS funkce rgba() přijímající čtyři parametry. První tři jsou shodné s původní funkcí rgb(), tedy jednotlivé složky RGB modelu. Čtvrtá hodnota je reálné číslo z intervalu <0,1>, definující průhlednost barvy. Hodnota 0 představuje plnou průsvitnost, 1 zas úplnou neprůhlednost. Mějme například takto definovaný styl nadpisu:

h1
{
  background-color: rgb (255, 255, 255); /* bílé pozadí */
  color: rgba(0, 0, 0, 0.5); /* černé poloprůhledné písmo */
}

Poloprůhledné černé písmo je v tomto případě vykresleno na bílém podkladě, výsledek bude tedy stejný, jakoby mělo písmo definovanou šedou barvu (rgb(127, 127, 127)). Zajímavějšího efektu lze dosáhnout použitím obrázkového pozadí, které pak bude prosvítat přímo textem.

Ještě zajímavější novinkou je vlastnost opacity, definující průhlednost celého elementu včetně jeho potomků. Stupeň průsvitnosti je definován úplně stejně jako v předchozím případě, tedy hodnotou z intervalu <0,1>. Vykreslování takového elementu probíhá přibližně tak, že se nejdříve v paměti vytvoří obraz daného elementu i s jeho potomky a ten se pak s danou průhledností umístí na své místo. Tento efekt je silný především proto, že je aplikován až na kompletně vykreslený element. V následující ukázce máme element s průhledností opacity: 0.6; obsahující text a obrázkové logo, který je pozicován nad jiný textový element:

Nový model barev

V kaskádových stylech třetí generace budou možnosti definování barev rozšířeny také o model HSL. K tomuto zadávání barev budou sloužit funkce hsl() a hsla(). První bude přijímat hodnoty odstínu, sytosti a světlosti, druhá navíc hodnotu průsvitnosti.

Vlastnosti textu

Pomocí kaskádových stylů můžeme nastavit u textu: mezery mezi písmeny a slovy, ozdobu textu, zarovnání, výšku řádky a transformaci.

Ozdoba textu – text-decoration

Pomocí vlastnosti text-decoration se může nastavit dekorace (ozdoba) textu a to buď: podtržení (text-decoration:underline), přeškrtnutí (text-decoration:line-throught), nadtržení (text-decoration:overline),nebo blikání (text-decoration:blink) které podporují pouze prohlížeče: nové verze prohlížečů Mozilla, Firefox, Opera a Netscape.

Hodnoty:

none
underline
overline
line-throught
blink

Příklad

Podle příkladu element span s třídou potrhnout bude podtržen výsledek bude stejný jako kdyby se použil element „U“.

span.potrhnout{text-decoration : underline;}

Zarovnání textu – text-align

Pomocí CSS lze text zarovnat: vlevo (text-align:left), vpravo(text-align:right), na střed(text-align:center) nebo do bloku(text-align:justify).

Pokud písmo zarovnáte do bloku (justify) písmo se zarovná tak aby slova začínaly vždy na začátku řádku a končily na konci to znamená že se mezi slovy vytvoří mezery z toho vyplívá že zarovnání do bloku by se nemělo používat na úzké sloupce textu kde kde by mohly být veliké mezery mezi slovy, ale naopak může se použít na široké sloupce textu.

Hodnoty:

left
right
center
justify

Příklad

Všechny odstavce s třídou center se vycentrují výsledek bude stejný jako kdyby se použilo align=“center“.

p.center{text-align : center;}

Vertikální zarovnání – vertical-align

Vertikální zarovnání v CSS umožňuje zarovnat text na výšku, ale pouze inline elementy jako je: span, b, i, em…

Hodnoty:

baseline – zarovnání na účaří
sub – zarovnání jako dolní index
super – zarovnání jako horní index
top – zarovnání nejvýš
text-top – zarovnání horní hrany inline prvku s vrškem písma.
middle – zarovnání na střed
bottom – zarovnání dolní hrany inline prvku s dolní hranou rodičovského boxu.
text-bottom – zarovnání dolní hrany inline prvku s se spodkem písma rodičovského prvku.
procenta – při použití kladné hodnoty se box posune výš a při použití záporné hodnoty se box posune níž.

Příklad:

Element span s třídou dolu se zobrazí níže.

span.dolu{vertical-align : sub;}

Velikost mezery mezi slovy – word-spacing

Vlastnost word-spacing nastavuje minimální mezery mezi jednotlivými slovy jako hodnoty se mohou použít pouze délky nebo normal.

Hodnoty:

normal
délka

Příklad:

Elementy p s třídou mezery budou mít mezi jednotlivými slovy mezery 30 pixelů.

p.mezery{word-spacing : 30px;}

Velikost mezery mezi písmeny – letter-spacing

Vlastnost letter-spacing určuje mezery mezi jednotlivými písmenu jako hodnoty se používají délky nebo normal.

Hodnoty:

normal
délka

Příklad:

Všechny elementy s třídou mezery budou mít mezery mezi písmeny 10 pixelů.

p.mezery{letter-spacing : 10px;}

Velikost odstavcové zarážky – text-idented

Vlastnost text-idented určuje o kolik se odstaví první řádek blokového elementu jako hodnoty se uvádějí délky nebo procenta.

Hodnoty:

délka
procento

Příklad:

Velikost odstavcové zarážky u odstavců s třídou zarazka bude 40 pixelů.

p.zarazka{text-indent : 40px;}

Výška řádku – line-height

Vlastnost line-height nastavuje výšku řádku tato vlastnost se hodí především k zvětšení výšky řádku aby se zvětšila čitelnost textu v širokých sloupcích.

Hodnoty:

normal
délka
procenta
číslo

Příklad:

p.vyska-radky{line-height : 15px;}

Transformace textu – text-transform

Pomocí vlastnosti text-transform lze nastavit u každého elementu : Velká písmena u prvního písmena každého slova(text-transform:capitalize), všechna velká písmena (text-transform:uppercase), nebo všechna malá písmena (text-transform:lowercase).

Hodnoty:

capitalize
uppercase
lowercase
none

Příklad:

Počáteční písmena elementu span s třídou kapitalky se zobrazí velkými písmeny.

span.kapitalky{text-transform : capitalize;}

Tabulka vlastností

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`	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ů – I.

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

Vlastnosti boxů – II.

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

Vlastnosti boxů – III.

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

Pozicování

CSS rozlišuje statickou, relativní, absolutní a fixní posici. K čemu je co dobré?

Statická (`position: static`)

Výchozí hodnota všech elementů. Má tedy smysl jen pro přebíjení dříve přenastavených hodnot…

Vlastnosti top, left, right a bottom jsou ignorovány.

Relativní (`position: relative`)

Umožňuje snadno posunout element ze svého přirozeného umístění.

element {position: relative; top: -2px; left: -2px}

Využití

Občas se hodí k drobným posunům, výhoda je, že relativním posunem není ovlivňován žádný další prvek na stránce — tudíž všechno ostatní zůstane na svém místě. Relativně posicovaný element zabere na původním místě prostor, ale klidně je ve skutečnosti někde jinde.

Problém ale může být, že výchozí umístění relativně posicovaného elementu je ovlivňována okolím, proto je position: relative krajně nevhodné třeba pro stavbu celého layoutu, ač by se to na první pohled mohlo zdát jako dobrý nápad.

Občas se relativní posun může hodit k rychlému zalepení rozhozeného vzhledu, ale z výše uvedeného důvodu to moc systémové řešení není.

Mnohem častěji se position: relative používá při posicování absolutním pro omezení rámce, kde se absolutně posicuje.

Absolutní (`position: absolute`)

Zatímco elementy s hodnotami static a relative jsou ovlivňovány okolím a stejně tak okolní elementy ovlivňují – zabírají jim místo – absolutní posice element vyjme z běžného toku dokumentu.

Najednou se všechno s neabsolutní posicí začne (skoro) chovat jako by tam absolutně posicovaný element vůbec nebyl.

element {position: absolute; top: -5px; left: 20px}

Hranice

Konkrétní umístění (vlastnosti top, left, right, bottom) se nepočítají nijak náhodně, ale od nejbližšího elementu, který vytváří hranice — to je libovolný nadřazený element s position: relative, position: absolute nebo position: fixed.

Nejvyšší hranicí je okno prohlížeče, proto v případě, že se na stránce relativní nebo absolutní posice zatím nepoužívají, přidání čemukoliv position: absolute; left: 0; top: 0 vyhodí tento element do levého horního rohu.

Bez umístění

Zvláštní případ použití je position: absolute bez zadání konkrétního umístění (left, top, bottom, right). V takovém případě zůstane element na svém místě, ale neovlivňuje své okolí.

Využití

Absolutní posicování má výhodu, že lze obsah v kódu uvedený někde na konci umístit na začátek stránky. Rovněž se position: absolute hodí všude tam, kde je potřeba něco umístit na přesné místo, nezávisle na okolí.

Na druhou stranu to může být i nevýhoda — absolutně posicovaný element je vyjmut z toku dokumentu, a tudíž nemůže reagovat na změny rozměrů ostatních prvků.

Absolutní posici jde teoreticky i relativně rozumně využít ke stavbě rozložení stránky, i když obtékání bývá zpravidla výhodnější.

Fixní posice (`position: fixed`)

Poslední druh umístění je fixní. To je dobré k tomu, když má nějaký element být viděn neustále (nezávisle na případném odrolování stránky).

Tato vlastnost není podporovaná v Internet Exploreru běžícím v QUIRK režimu.

Od absolutního posicování se kromě fixování elementu liší ještě v tom, že cokoliv s position: fixed má jako hranici okno prohlížeče. Tedy není možné vytvořit hranici vlastní.

Využití

Fixovaná posice se hodí pro neustále viditelnou navigaci, hlavičku či nějakou reklamu.

Nastavit element jako fixní je také možné až v momentě, kdy by měl zmizet z viditelné části obrazovky (obdobně se dá i vytvořit fixní menu).

Sticky posice (`position: sticky`)

Nejnovější hodnota vlastnosti position sloužící k přilepení elementu ke kraji okna při scrollování. Věnuje se jí celý samostatný článek:

Jak funguje CSS position: sticky

Překrývání `z-index`

Jednotlivé elementy se mohou překrývat, což řeší vlastnost z-index.
Bez jejího použití jsou nejvýše ty elementy, které jsou později v kódu. Jejím užitím lze toto chování změnit.
V případě záporné hodnoty (např. z-index: -1) se absolutně posicovaný element dostane za běžný text.
Vlastnost z-index se projeví jen u elementů s absolutní, relativní nebo fixní posicí. Pokud je tedy překrýváno něco, co nechceme, a není to posicované, řešení je přidat position: relative a vyšší z-index.Relativní posice totiž bez uvedení left/top/bottom/right nezmění umístění elementu. Je ale třeba dát pozor na to, že position: relative změní počátek pro posicování absolutní.

Hodnoty	Význam	Poznámky
position	absolute relative static	absolutní umístění relativní umístění normální umístění
left	auto délka procento	bez posunutí posunutí vpravo o délku nebo o procento	Nemá smysl pro `position: static`. Vlevo se posouvá zápornou hodnotou.
top	auto délka procento	bez posunutí posunutí dolů o délku nebo o procento	Nemá smysl pro `position: static`. Nahoru se posouvá zápornou hodnotou.
clip	auto rect(top right bottom left)	normální zobrazení zadání obdélníku pro oříznutí elementu	Pouze pro elementy s position: absoluteHodnoty v závorce udávají viditelný obdélník. Top a left jsou souřadnice levého horního rohu vzhledem k elementu. Right a bottom jsou souřadnice pravého dolního rohu. Místo hodnoty se může zadat „auto“; v tom směru se to nebude ořezávat.Netscape 4 nezná!
overflow	none hidden scroll auto	nechat přetékat oříznout vždy rolovat rolování, je-li třeba	pro elementy, které se nevejdou do vymezené oblasti nebo mají clip: rectNetscape 4 vůbec nezná! Vizte příklad na overflow. V IE 4+ fungují i overflow-x a overflow-y
z-index	auto číslo	definice překrývání elementů jakoby v ose z	Netscape 4 divně vykresluje některé překryvy. V elementech s nízkým z-index navíc v NN4 někdy nereagují odkazy.
visibility	inherit visible hidden	neměněná viditelnost viditelný element skrytý (neviditelný)	u skrytých objektů se vyhradí místo, jako by tam byly. Netscape 4 skryje pouze elementy s position: absolute nebo relative.

Cvičení

C1 – procvičování CSS online

https://cssbattle.dev/

Zdroje: