CSS vlastnosti blokových prvků

Název: VY_32_INOVACE_PG4111 CSS vlastnosti blokových prvků

Autor: Mgr. Tomáš Javorský

Datum vytvoření: 06 / 2012

Ročník: 3

Vzdělávací oblast / téma: webdesign, počítačová grafika

Anotace: DUM ve formě HTML stránky. Seznam CSS vlastností blokových prvků s příklady a ukázkami. Slouží jako pohotová referenční příručka při praktické tvorbě webu, aby studenti nemuseli zdlouhavě vyhledávat vlastnosti na webu nebo v literatuře.

Znak | odděluje různé možnosti, použitelná je vždy jedna z nich. Např. u vlastnosti font-style:normal | italic | oblique; znamená, že použitelná je vždy POUZE JEDNA z uvedených vlastností. Takže: buď font-style:normal; nebo font-style:italic; nebo font-style:oblique;

Vlastnosti seznamů
Vlastnost	Zápis - syntaxe - obecně / konkrétní příklad	Ukázka	Poznámka
Typ odrážek - list-style-type	list-style-type:disc \| circle \| square \| decimal \| decimal-leading-zero \| lower-roman \| upper-roman \| lower-latin \| upper-latin \| lower-aplha \| upper-alpha \| none Příklady: list-style-type:disc; list-style-type:square;	odrážka typu disc odrážka typu circle odrážka typu square odrážka typu none = nic, žádná odrážka typu decimal odrážka typu decimal-leading-zero odrážka typu lower-roman odrážka typu upper-roman odrážka typu lower-latin odrážka typu upper-latin	Styly odrážek disc - square jsou určeny pro neuspořádané seznamy, decimal - upper-alpha pro uspořádané (číslované) seznamy. Pro číslované seznamy existují i další typy odrážek, ale ty jsou podporovány v určitých národních prostředích, které musí být na klientském počítači nainstalováno - např. hebrew \| lower-greek \| hiragana \| katakana atd. Pokud chceme odrážky úplně zneviditelnit, použijeme hodnotu none.
Obrázek odrážek - list-style-image	list-style-image:url("URL adresa obrázku tvořícího odrážku"); Příklady: list-style-image:url("./obrazky/odrazka.gif");	položka 1 položka 2 položka 3	Princip zápisu URL adresy je stejný jako u obrázků v HTML stránce nebo HTML odkazů. POZOR!! Relativní URL adresy ve stylech se vztahují k souboru, kde jsou uloženy styly, nikoliv k HTML souboru, který styly využívá. Takže pozor v případě, že máte styly v samostatném souboru CSS, relativní URL adresu musíte odvodit od umístění CSS souboru se styly.
Umístění odrážek - list-style-position	list-style-position:inside \| outside; Příklady: list-style-image:inside; list-style-image:outside;	inside - text položky text položky text položky inside - text položky text položky text položky outside - text položky text položky text položky outside - text položky text položky text položky	Určuje umístění odrážky vůči textu seznamu - uplatní se zejména, pokud jednotlivé položky přesahují na více řádků. Zobrazení se v Exploreru a Mozille liší.

Vlastnosti seznamů

Vlastnost

Zápis - syntaxe - obecně / konkrétní příklad

Ukázka

Poznámka

Typ odrážek
-
list-style-type

odrážka typu disc

odrážka typu circle

odrážka typu square

odrážka typu none = nic, žádná

odrážka typu decimal

odrážka typu decimal-leading-zero

odrážka typu lower-roman

odrážka typu upper-roman

odrážka typu lower-latin

odrážka typu upper-latin

Styly odrážek disc - square jsou určeny pro neuspořádané seznamy, decimal - upper-alpha pro uspořádané (číslované) seznamy. Pro číslované seznamy existují i další typy odrážek, ale ty jsou podporovány v určitých národních prostředích, které musí být na klientském počítači nainstalováno - např. hebrew | lower-greek | hiragana | katakana atd. Pokud chceme odrážky úplně zneviditelnit, použijeme hodnotu none.

Obrázek odrážek
-
list-style-image

list-style-image:url("URL adresa obrázku tvořícího odrážku");

Příklady:
list-style-image:url("./obrazky/odrazka.gif");

položka 1

položka 2

položka 3

Princip zápisu URL adresy je stejný jako u obrázků v HTML stránce nebo HTML odkazů. POZOR!! Relativní URL adresy ve stylech se vztahují k souboru, kde jsou uloženy styly, nikoliv k HTML souboru, který styly využívá. Takže pozor v případě, že máte styly v samostatném souboru CSS, relativní URL adresu musíte odvodit od umístění CSS souboru se styly.

Umístění odrážek
-
list-style-position

list-style-position:inside | outside;

Příklady:
list-style-image:inside; list-style-image:outside;

inside - text položky text položky text položky
inside - text položky text položky text položky

outside - text položky text položky text položky
outside - text položky text položky text položky

Určuje umístění odrážky vůči textu seznamu - uplatní se zejména, pokud jednotlivé položky přesahují na více řádků.
Zobrazení se v Exploreru a Mozille liší.

Vlastnosti pozadí prvků
Vlastnost	Zápis - syntaxe - obecně / konkrétní příklad	Ukázka	Poznámka
Barva pozadí - background-color	background-color:klíčové slovo pro barvu \| barva zapsaná pomocí RGB hodnot \| transparent Příklady: background-color:black; background-color:RGB(255,0,0); background-color:FFFFFF;	black aqua RGB(255,255,0) - desítková soustava FF0000 - šestnáctková soustava 0000FF - šestnáctková soustava	Hodnota barvy pozadí se zadává stejným způsobem jako u barvy písma
Obrázek na pozadí - background-image	background-image:("URL adresa obrázku") \| none Příklady: background-image:url("./obrazky/pozadi.jpg");	nadpis text přes pozadí prvku	Přes obrázkové pozadí prvků lze umisťovat text i další HTML prvky - obrázky, formuláře atd. Obrázky na pozadí lze použít také k vytváření dynamických obrázkových tlačítek - po najetí myší se změní obrázek na pozadí. Tlačítko je v tomto případě nejlepší vytvořit pomocí značky pro odkaz <a>, protože některé verze IE neumí měnit pozadí u jiných prvků, než u odkazu. Pokud jsou rozměry prvku větší než obrázek pozadí, obrázek se opakuje na pozadí vodorvně i svisle - toto opakování lze omezit (viz vlastnost background-repeat).
Pozice obrázku na pozadí - background-position	background-position:velikost_posunu_zleva velikost_posunu_shora; Příklady: background-position:20px 15px; background-position:20% 15%;	- position 0px 0px - position 10px 15px - position 20% 20%	Posun se zadává relativně od levého horního rohu prvku. Posun může být zadán v px, % nebo klíčovým slovem: top \| center \| bottom - pro výškový posun a left \| center \| right - stranový posun.
Opakování obrázku na pozadí - background-repeat	background-repeat:no-repeat \| repeat \| repeat-x \| repeat-y Příklady: background-image:url("./obrazky/pozadi.jpg");	- repeat-x - repeat-y	Výchozí hodnotou je repeat - obrázek se opakuje svisle i vodorovně, dokud nevyplní plochu prvku. Hodnota repeat-x zajistí, že se obrázek bude opakovat pouze vodorovně a repeat-y zajistí opakování pouze ve svislém směru. Hodnota no-repeat zajistí, že se obrázek zobrazí pouze jednou a nebude se opakovat ani vodorovně ani svisle.
Sdružená vlastnost - background	background:URL-obrázku opakování-obrázku posun-obrázku-vodorovně posun-obrázku-svisle Příklady: background:url("./obrazky/pozadi.jpg") no-repeat 10px 15px;		První hodnotou ve sdružené vlastnosti je URL obrázku tvořícího pozadí, druhou opakování a třetí hodnota udává vodorovný posun a čtvrtá hodnota posun vodorovný. Jednotlivé hodnoty jsou odděleny mezerou.

Vlastnosti pozadí prvků

Vlastnost

Zápis - syntaxe - obecně / konkrétní příklad

Ukázka

Poznámka

Barva pozadí
-
background-color

background-color:klíčové slovo pro barvu | barva zapsaná pomocí RGB hodnot | transparent

Příklady:
background-color:black;
background-color:RGB(255,0,0);
background-color:FFFFFF;

black
aqua
RGB(255,255,0) - desítková soustava
FF0000 - šestnáctková soustava
0000FF - šestnáctková soustava

Hodnota barvy pozadí se zadává stejným způsobem jako u barvy písma

Obrázek na pozadí
-
background-image

background-image:("URL adresa obrázku") | none

Příklady:
background-image:url("./obrazky/pozadi.jpg");

nadpis

text přes pozadí prvku

Přes obrázkové pozadí prvků lze umisťovat text i další HTML prvky - obrázky, formuláře atd. Obrázky na pozadí lze použít také k vytváření dynamických obrázkových tlačítek - po najetí myší se změní obrázek na pozadí. Tlačítko je v tomto případě nejlepší vytvořit pomocí značky pro odkaz <a>, protože některé verze IE neumí měnit pozadí u jiných prvků, než u odkazu. Pokud jsou rozměry prvku větší než obrázek pozadí, obrázek se opakuje na pozadí vodorvně i svisle - toto opakování lze omezit (viz vlastnost background-repeat).

Pozice obrázku na pozadí
-
background-position

background-position:velikost_posunu_zleva velikost_posunu_shora;

Příklady:
background-position:20px 15px;
background-position:20% 15%;

- position 0px 0px

- position 10px 15px

- position 20% 20%

Posun se zadává relativně od levého horního rohu prvku. Posun může být zadán v px, % nebo klíčovým slovem: top | center | bottom - pro výškový posun a left | center | right - stranový posun.

Opakování obrázku na pozadí
-
background-repeat

background-repeat:no-repeat | repeat | repeat-x | repeat-y

Příklady:
background-image:url("./obrazky/pozadi.jpg");

- repeat-x

- repeat-y

Výchozí hodnotou je repeat - obrázek se opakuje svisle i vodorovně, dokud nevyplní plochu prvku. Hodnota repeat-x zajistí, že se obrázek bude opakovat pouze vodorovně a repeat-y zajistí opakování pouze ve svislém směru. Hodnota no-repeat zajistí, že se obrázek zobrazí pouze jednou a nebude se opakovat ani vodorovně ani svisle.

Sdružená vlastnost
-
background

background:URL-obrázku opakování-obrázku posun-obrázku-vodorovně posun-obrázku-svisle

Příklady:
background:url("./obrazky/pozadi.jpg") no-repeat 10px 15px;

První hodnotou ve sdružené vlastnosti je URL obrázku tvořícího pozadí, druhou opakování a třetí hodnota udává vodorovný posun a čtvrtá hodnota posun vodorovný. Jednotlivé hodnoty jsou odděleny mezerou.

Rozměry a ohraničení (rámečky) prvků, vnější a vnitřní okraje prvků
Vlastnost	Zápis - syntaxe - obecně / konkrétní příklad	Ukázka	Poznámka
šířka prvku - width	width:velikost v px, em, procentech atd. Příklady: width:500px; width:80%;		Vlastnost width slouží k nastavení požadované šířky prvku. Pokud není vlastnost width definována, je šířka prvku dána jeho obsahem - obsahuje-li např. text nebo obrázky nebo další prvky vyplněné obsahem nebo prvky s nastavenou šířkou. Pokud prvek nic neobsahuje, je jeho šířka 0 a může se stát, že nebude vidět. Pokud je nastavená šířka menší než obsah prvku, může se stát, že obsah přeteče přes okraje prvku (Mozilla). V jiných prohlížečích (IE) se prvek roztáhne na takovou šířku, aby se do něj obsah vešel. V obou případech může dojít k rozhození grafiky stránky.
výška prvku - height	height:velikost v px, em, procentech atd. Příklady: height:500px; height:80%;		Vlastnost height slouží k nastavení výšky prvku. Pokud není vlastnost výška definována, je výška prvku dána jeho obsahem. Pokud je výška menší než obsah prvku, může se stát že obsah přeteče přes okraje prvku (Mozilla). V jiných prohlížečích (IE) se prvek roztáhne na takovou výšku, aby se do něj obsah vešel. V obou případech může dojít k rozhození grafiky stránky.
Rámeček - sdružená vlastnost - border	border:tloušťka_rámečku styl_rámečku barva_rámečku border-strana:tloušťka_rámečku styl_rámečku barva_rámečku Příklady: Pro všechny strany najednou border:1px solid red; border:0.5em double RGB(255,0,0); border-top:1px solid red; - pro horní stranu border-right:1px solid red; - pro pravou stranu border-bottom:1px solid red; - pro spodní stranu border-left:1px solid red; - pro levou stranu	- border:1px solid red -border-top:2px solid RGB(100,100,200); border-bottom:2px dotted RGB(100,100,200);	Jednotlivé parametry (styl, tloušťka, barva rámečku) jsou vysvětleny dále. Tímto způsobem lze nastavit všechny parametry zároveň pro všechny 4 strany prvku, nebo pro každou stranu zvlášť. Jde o asi nejpoužívanější způsob nastavování vlastností rámečku. Lze nastavit jednotlivě různý styl, barvu a tloušťku jednotlivým stranám rámečku - viz další vlastnosti.
tloušťka rámečku - border-width	border-width:thin \| medium \| thick \| velikost v px, em... border-strana-width:thin \| medium \| thick \| velikost v px, em Příklady: pro všechny strany najednou border-width:thin; border-width:2px; border-top-width:1px; - pro horní stranu border-right-width:2px; - pro pravou stranu border-bottom-width:thick; - pro spodní stranu border-left-width:medium; - pro levou stranu	border-width:0.5em; border-top-width:thin; border-left-width:0.5em; border-right-width:15px;	Tímto způsobem lze nastavit tloušťku rámečku zároveň pro všechny 4 strany prvku, nebo pro každou stranu zvlášť. Tloušťka je zadávána buď klíčovými slovy thin \| medium \| thick nebo číselně v px, em a podobně.
styl rámečku - border-style	border-style:solid \| dotted \| dashed \| double \| inset \| outset \| none\| groove \| ridge border-strana-style: solid \| dotted \| dashed \| double \| inset \| outset \| none\| groove \| ridge Příklady: pro všechny strany najednou border-style:double; border-style:inset; border-top-style:dotted; - pro horní stranu border-right-style:ridge; - pro pravou stranu border-bottom-style:solid; - pro spodní stranu border-left-style:none; - pro levou stranu	- double - solid - outset - dotted - dashed	Tímto způsobem lze nastavit styl rámečku zároveň pro všechny 4 strany prvku, nebo pro každou stranu zvlášť. Styl lze zadat pouze klíčovými slovy. Některé prohlížeče nepodporují některé styly rámečků - např. IE zobrazuje dotted stejně jako dashed.
barva rámečku - border-color	border-color:jméno barvy \| barva v RGB hodnotách \| barva v RGB hodnotách v šestnátkové soustavě border-strana-color:jméno barvy \| barva v RGB hodnotách Příklady: pro všechny strany najednou border-color:blue; border-color:RGB(255,100,150); border-top-color:aqua; - pro horní stranu border-right-color:RGB(0,0,0); - pro pravou stranu border-bottom-color:green; - pro spodní stranu border-left-color:brown; - pro levou stranu		Tímto způsobem lze nastavit barvu rámečku zároveň pro všechny 4 strany prvku, nebo pro každou stranu zvlášť. Hodnota barvy je zadávána stejně jako např. barva textu nebo pozadí.
vnější okraj - margin	margin:velikost-všech-okrajů - pokud jsou všechny okraje stejné margin:velikost-horního-okraje velikost-pravého-okraje velikost-dolního-okraje velikost-levého-okraje margin-strana:velikost-okraje Příklady: pro všechny strany najednou margin:10px; - pokud je zadána jedna hodnota, budou všechny okraje stejné margin:10px 5px 10px 15px; margin-top:10px; - pro horní stranu margin-right:1.2em; - pro pravou stranu margin-bottom:5px; - pro spodní stranu margin-left:2em; - pro levou stranu		Tímto způsobem lze nastavit vnější okraj zároveň pro všechny 4 strany prvku, nebo pro každou stranu zvlášť. Velikost okraje může být zadána v px, em... a v procentech. Vnější okraj leží vně rámečku a obsahu prvku, pod vnějším okrajem se nezobrazuje pozadí prvku.
vnitřní okraj (výplň) - padding	padding:velikost-všech-okrajů - pokud jsou všechny okraje stejné padding:velikost-horního-okraje velikost-pravého-okraje velikost-dolního-okraje velikost-levého-okraje padding-strana:velikost-okraje Příklady: pro všechny strany najednou padding:10px; - pokud je zadána jedna hodnota, budou všechny okraje stejné padding:10px 5px 10px 15px; padding-top:10px; - pro horní stranu padding-right:1.2em; - pro pravou stranu padding-bottom:5px; - pro spodní stranu padding-left:2em; - pro levou stranu	text text text text text text text text - padding 0px; text text text text text text text text - padding 10px;	Tímto způsobem lze nastavit vnitřní okraj zároveň pro všechny 4 strany prvku, nebo pro každou stranu zvlášť. Velikost okraje může být zadána v px, em... a v procentech. Vnitřní okraj leží uvnitř rámečku prvku, zobrazuje se pod ním pozadí prvku. Vnitřní okraj je mezera mezi okrajem prvku (případně rámečkem) a obsahem prvku (textem, obrázkem, dalším prvkem)

Rozměry a ohraničení (rámečky) prvků, vnější a vnitřní okraje prvků

Vlastnost

Zápis - syntaxe - obecně / konkrétní příklad

Ukázka

Poznámka

šířka prvku
-
width

width:velikost v px, em, procentech atd.

Příklady:
width:500px;
width:80%;

Vlastnost width slouží k nastavení požadované šířky prvku. Pokud není vlastnost width definována, je šířka prvku dána jeho obsahem - obsahuje-li např. text nebo obrázky nebo další prvky vyplněné obsahem nebo prvky s nastavenou šířkou. Pokud prvek nic neobsahuje, je jeho šířka 0 a může se stát, že nebude vidět. Pokud je nastavená šířka menší než obsah prvku, může se stát, že obsah přeteče přes okraje prvku (Mozilla). V jiných prohlížečích (IE) se prvek roztáhne na takovou šířku, aby se do něj obsah vešel. V obou případech může dojít k rozhození grafiky stránky.

výška prvku
-
height

height:velikost v px, em, procentech atd.

Příklady:
height:500px;
height:80%;

Vlastnost height slouží k nastavení výšky prvku. Pokud není vlastnost výška definována, je výška prvku dána jeho obsahem. Pokud je výška menší než obsah prvku, může se stát že obsah přeteče přes okraje prvku (Mozilla). V jiných prohlížečích (IE) se prvek roztáhne na takovou výšku, aby se do něj obsah vešel. V obou případech může dojít k rozhození grafiky stránky.

Rámeček - sdružená vlastnost
-
border

border:tloušťka_rámečku styl_rámečku barva_rámečku
border-strana:tloušťka_rámečku styl_rámečku barva_rámečku

Příklady:
Pro všechny strany najednou
border:1px solid red;
border:0.5em double RGB(255,0,0);

border-top:1px solid red; - pro horní stranu
border-right:1px solid red; - pro pravou stranu
border-bottom:1px solid red; - pro spodní stranu
border-left:1px solid red; - pro levou stranu

- border:1px solid red

-border-top:2px solid RGB(100,100,200);
border-bottom:2px dotted RGB(100,100,200);

Jednotlivé parametry (styl, tloušťka, barva rámečku) jsou vysvětleny dále. Tímto způsobem lze nastavit všechny parametry zároveň pro všechny 4 strany prvku, nebo pro každou stranu zvlášť. Jde o asi nejpoužívanější způsob nastavování vlastností rámečku. Lze nastavit jednotlivě různý styl, barvu a tloušťku jednotlivým stranám rámečku - viz další vlastnosti.

tloušťka rámečku
-
border-width

border-width:thin | medium | thick | velikost v px, em...
border-strana-width:thin | medium | thick | velikost v px, em

Příklady:
pro všechny strany najednou
border-width:thin;
border-width:2px;

border-top-width:1px; - pro horní stranu
border-right-width:2px; - pro pravou stranu
border-bottom-width:thick; - pro spodní stranu
border-left-width:medium; - pro levou stranu

border-width:0.5em;

border-top-width:thin; border-left-width:0.5em; border-right-width:15px;

Tímto způsobem lze nastavit tloušťku rámečku zároveň pro všechny 4 strany prvku, nebo pro každou stranu zvlášť. Tloušťka je zadávána buď klíčovými slovy thin | medium | thick nebo číselně v px, em a podobně.

styl rámečku
-
border-style

- double

- solid

- outset

- dotted

- dashed

Tímto způsobem lze nastavit styl rámečku zároveň pro všechny 4 strany prvku, nebo pro každou stranu zvlášť. Styl lze zadat pouze klíčovými slovy. Některé prohlížeče nepodporují některé styly rámečků - např. IE zobrazuje dotted stejně jako dashed.

barva rámečku
-
border-color

border-color:jméno barvy | barva v RGB hodnotách | barva v RGB hodnotách v šestnátkové soustavě
border-strana-color:jméno barvy | barva v RGB hodnotách

Příklady:
pro všechny strany najednou
border-color:blue;
border-color:RGB(255,100,150);

border-top-color:aqua; - pro horní stranu
border-right-color:RGB(0,0,0); - pro pravou stranu
border-bottom-color:green; - pro spodní stranu
border-left-color:brown; - pro levou stranu

Tímto způsobem lze nastavit barvu rámečku zároveň pro všechny 4 strany prvku, nebo pro každou stranu zvlášť. Hodnota barvy je zadávána stejně jako např. barva textu nebo pozadí.

vnější okraj
-
margin

margin:velikost-všech-okrajů - pokud jsou všechny okraje stejné margin:velikost-horního-okraje velikost-pravého-okraje velikost-dolního-okraje velikost-levého-okraje
margin-strana:velikost-okraje

Příklady:
pro všechny strany najednou
margin:10px; - pokud je zadána jedna hodnota, budou všechny okraje stejné
margin:10px 5px 10px 15px;

margin-top:10px; - pro horní stranu
margin-right:1.2em; - pro pravou stranu
margin-bottom:5px; - pro spodní stranu
margin-left:2em; - pro levou stranu

Tímto způsobem lze nastavit vnější okraj zároveň pro všechny 4 strany prvku, nebo pro každou stranu zvlášť. Velikost okraje může být zadána v px, em... a v procentech. Vnější okraj leží vně rámečku a obsahu prvku, pod vnějším okrajem se nezobrazuje pozadí prvku.

vnitřní okraj (výplň)
-
padding

padding:velikost-všech-okrajů - pokud jsou všechny okraje stejné padding:velikost-horního-okraje velikost-pravého-okraje velikost-dolního-okraje velikost-levého-okraje
padding-strana:velikost-okraje

Příklady:
pro všechny strany najednou
padding:10px; - pokud je zadána jedna hodnota, budou všechny okraje stejné
padding:10px 5px 10px 15px;

padding-top:10px; - pro horní stranu
padding-right:1.2em; - pro pravou stranu
padding-bottom:5px; - pro spodní stranu
padding-left:2em; - pro levou stranu

text text text text text text text text - padding 0px;

text text text text text text text text - padding 10px;

Tímto způsobem lze nastavit vnitřní okraj zároveň pro všechny 4 strany prvku, nebo pro každou stranu zvlášť. Velikost okraje může být zadána v px, em... a v procentech. Vnitřní okraj leží uvnitř rámečku prvku, zobrazuje se pod ním pozadí prvku. Vnitřní okraj je mezera mezi okrajem prvku (případně rámečkem) a obsahem prvku (textem, obrázkem, dalším prvkem)

Umístění (pozicování) a viditelnost prvků
Vlastnost	Zápis - syntaxe - obecně / konkrétní příklad	Poznámka
viditelnost prvku - visibility	visibility:visible \| hidden \| collapse Příklady: visibility:hidden; visibility:visible;	Určuje viditelnost prvku - viditelný (visible), neviditelný (hidden, collapse). Oproti vlastnosti display je však pro prvek nejprve vytvořeno místo a pak je teprve zneviditelněn nebo zviditelněn. Hodnota collapse se používá pouze u tabulek, při použití collapse u jiných prvků má stejný význam jako hidden.
typ zobrazení prvku - display	display: inline \| block \| none \| list-item \| run-in \| table-row-group \| table-header-group \| table-footer-group \| table-row \| table-column-group \| table-column \| table-cell \| table-caption \| inline-block \| table \| inline-table Příklady: display:block; display:none;	Určuje typ zobrazení prvku - hodnota block může změnit řádkový prvek na blokový, inline blokový na řádkový, none způsobí skrytí prvku, ale pozor! - v tomto případě není pro prvek vytvořeno místo (prohlížeč se chová jako by prvek vůbec ve stránce nebyl). Hodnota inline-block vytvoří blokový prvek, který může mít vlastnosti blokového prvku a může obsahovat další blokové i řádkové prvky, ale zobrazuje se jako řádkový. Hodnota run-in - prvek se chová buď jako řádkový nebo blokový, podle formátování a kontextu. Prvky s hodnotou table, ...-table, table-... se zobrazují jako tabulky a tabulkové prvky (řádky, hlavičky, sloupce tabulky)
poziční schéma prvku - position	position: absolute \| relative \| fixed \| static Příklady: position:relative; position:fixed;	Je-li hodnota absolute, relative nebo fixed, musí být uvedeny souřadnice pomocí vlastností left a top (viz dále). absolute - prvek není součástí toku dokumentu, nevytváří se pro něj místo, poloha prvku se počítá od levého horního okraje okna, popřípadě jiného nadřazeného prvku pro absolutní pozicování fixed - stejně jako absolute, ale prvek se při posouvání dokumentu nepohybuje, zůstává na místě relative - prvek je nejprve umístěn tam, kde by byl normálně podle svého umístění v HTML kódu, a pak je přesunut na nové souřadnice relativně k hornímu levému okraji svého nadřazeného prvku. Po posunutí po sobě prvek zanechá prázdné místo, s čímž je nutné počítat. static - normální umístění prvku podle toho, jak je uveden v HTML kódu.
vertikální souřadnice prvku - top	top: pixely \| procenta - posunutí od horního okraje (dolů) Příklady: top:10px; top:50%;	Určuje posun od nulového bodu vertikálně - u position:relative jde o posun od původního umístění prvku, u ostatních o posun vzhledem k jejich nadřazenému (omezujícímu) prvku. Hodnoty mohou být i záporné - pak se prvek posouvá nahoru.
horizontální souřadnice prvku - left	left: pixely \| procenta - posunutí od levého okraje (doprava) Příklady: left:10px; left:50%;	Určuje posun od nulového bodu - u position:relative jde o posun od původního umístění prvku, u ostatních o posun vzhledem k jejich nadřazenému (omezujícímu) prvku. Hodnoty mohou být i záporné - pak se prvek posouvá doleva.

Umístění (pozicování) a viditelnost prvků

Vlastnost

Zápis - syntaxe - obecně / konkrétní příklad

Poznámka

viditelnost prvku
-
visibility

visibility:visible | hidden | collapse

Příklady:
visibility:hidden;
visibility:visible;

Určuje viditelnost prvku - viditelný (visible), neviditelný (hidden, collapse). Oproti vlastnosti display je však pro prvek nejprve vytvořeno místo a pak je teprve zneviditelněn nebo zviditelněn. Hodnota collapse se používá pouze u tabulek, při použití collapse u jiných prvků má stejný význam jako hidden.

typ zobrazení prvku
-
display

Určuje typ zobrazení prvku - hodnota block může změnit řádkový prvek na blokový, inline blokový na řádkový, none způsobí skrytí prvku, ale pozor! - v tomto případě není pro prvek vytvořeno místo (prohlížeč se chová jako by prvek vůbec ve stránce nebyl). Hodnota inline-block vytvoří blokový prvek, který může mít vlastnosti blokového prvku a může obsahovat další blokové i řádkové prvky, ale zobrazuje se jako řádkový. Hodnota run-in - prvek se chová buď jako řádkový nebo blokový, podle formátování a kontextu. Prvky s hodnotou table, ...-table, table-... se zobrazují jako tabulky a tabulkové prvky (řádky, hlavičky, sloupce tabulky)

poziční schéma prvku
-
position

position: absolute | relative | fixed | static

Příklady:
position:relative;
position:fixed;

Je-li hodnota absolute, relative nebo fixed, musí být uvedeny souřadnice pomocí vlastností left a top (viz dále).

absolute - prvek není součástí toku dokumentu, nevytváří se pro něj místo, poloha prvku se počítá od levého horního okraje okna, popřípadě jiného nadřazeného prvku pro absolutní pozicování

fixed - stejně jako absolute, ale prvek se při posouvání dokumentu nepohybuje, zůstává na místě

relative - prvek je nejprve umístěn tam, kde by byl normálně podle svého umístění v HTML kódu, a pak je přesunut na nové souřadnice relativně k hornímu levému okraji svého nadřazeného prvku. Po posunutí po sobě prvek zanechá prázdné místo, s čímž je nutné počítat.

static - normální umístění prvku podle toho, jak je uveden v HTML kódu.

vertikální souřadnice prvku
-
top

top: pixely | procenta - posunutí od horního okraje (dolů)

Příklady:
top:10px;
top:50%;

Určuje posun od nulového bodu vertikálně - u position:relative jde o posun od původního umístění prvku, u ostatních o posun vzhledem k jejich nadřazenému (omezujícímu) prvku. Hodnoty mohou být i záporné - pak se prvek posouvá nahoru.

horizontální souřadnice prvku
-
left

left: pixely | procenta - posunutí od levého okraje (doprava)

Příklady:
left:10px;
left:50%;

Určuje posun od nulového bodu - u position:relative jde o posun od původního umístění prvku, u ostatních o posun vzhledem k jejich nadřazenému (omezujícímu) prvku. Hodnoty mohou být i záporné - pak se prvek posouvá doleva.

Přehled základních CSS vlastností blokových prvků

nadpis