Typy elementů

Příklady

Toto je nějaký odstavec v rámci sekce.

Toto je nějaký nadpis.
Toto je velmi důležitý nadpis.

Toto je nějaký odstavec.

Knihy Alenka v říši divů a Logika hrou napsal Lewis Carroll.


Box model

Příklady

Toto je nějaký odstavec.

Toto je nějaký odstavec s rámečkem.

Následuje obrázek:
hora Matterhorn

Toto je nějaký odstavec s rámečkem ze třídy ramecek1.

Toto je nějaký odstavec s rámečkem ze třídy ramecek2.

Toto je nějaký odstavec s rámečkem ze třídy ramecek3.

Toto je nějaký odstavec s rámečkem ze třídy ramecek4.


Text v popředí a text na pozadí

Contemporary

Prostor pro tanec


Zarovnání elementu doprava (float, clear)

Červená karkulka šla lesem, houpala si košíčkem a vesele si zpívala. Honila motýly, ráchala se v potoce a dávno zapomněla na maminčino varování.

Maruška se, přesně podle přání své macechy, vypravila do lesa, aby našla nějakou mýtinku, kde by se i v zimních krutých mrazech červenaly jahody. Cesta vedla hlubokým lesem až do míst, která před Maruškou ještě nikdo nenavštívil. Když už si nebohé děvče myslelo, že se dočista ztratilo a bude vydáno napospas divé zvěři, zahlédlo mezi stromy problikávat malé světlo. Šla za světlem, které se neustále zvětšovalo, až se z něj staly plameny, které šlehaly vysoko k nebi. Před Maruškou se rozprostřela široká mýtina.


Zarovnání elementu doprava a doleva (float, clear)

Červená karkulka šla lesem, houpala si košíčkem a vesele si zpívala. Honila motýly, ráchala se v potoce a dávno zapomněla na maminčino varování.

"Maruška se, přesně podle přání své macechy, vypravila do lesa, aby našla nějakou mýtinku, kde by se i v zimních krutých mrazech červenaly jahody. Cesta vedla hlubokým lesem až do míst, která před Maruškou ještě nikdo nenavštívil. Když už si nebohé děvče myslelo, že se dočista ztratilo a bude vydáno napospas divé zvěři, zahlédlo mezi stromy problikávat malé světlo. Šla za světlem, které se neustále zvětšovalo, až se z něj staly plameny, které šlehaly vysoko k nebi. Před Maruškou se rozprostřela široká mýtina.


Zarovnání elementu doprava (float, clearfix)

Červená karkulka šla lesem, houpala si košíčkem a vesele si zpívala. Honila motýly, ráchala se v potoce a dávno zapomněla na maminčino varování.

Maruška se, přesně podle přání své macechy, vypravila do lesa, aby našla nějakou mýtinku, kde by se i v zimních krutých mrazech červenaly jahody. Cesta vedla hlubokým lesem až do míst, která před Maruškou ještě nikdo nenavštívil. Když už si nebohé děvče myslelo, že se dočista ztratilo a bude vydáno napospas divé zvěři, zahlédlo mezi stromy problikávat malé světlo. Šla za světlem, které se neustále zvětšovalo, až se z něj staly plameny, které šlehaly vysoko k nebi. Před Maruškou se rozprostřela široká mýtina.


Vodorovné zarovnání obsahu stránky

Červená karkulka šla lesem, houpala si košíčkem a vesele si zpívala. Honila motýly, ráchala se v potoce a dávno zapomněla na maminčino varování.

Maruška se, přesně podle přání své macechy, vypravila do lesa, aby našla nějakou mýtinku, kde by se i v zimních krutých mrazech červenaly jahody. Cesta vedla hlubokým lesem až do míst, která před Maruškou ještě nikdo nenavštívil. Když už si nebohé děvče myslelo, že se dočista ztratilo a bude vydáno napospas divé zvěři, zahlédlo mezi stromy problikávat malé světlo. Šla za světlem, které se neustále zvětšovalo, až se z něj staly plameny, které šlehaly vysoko k nebi. Před Maruškou se rozprostřela široká mýtina.

V chaloupce na kraji lesa bydlela koza se svými sedmi kůzlátky. Měli se rádi a žili spokojeně jako v pohádce. Maminka koza odcházela každé ráno na pastvu a kůzlátka napomínala, aby si tiše hrála a nikomu neotvírala. V lese bydlí zlý vlk, který by si na nich rád pochutnal. Kůzlátka slíbila, že budou poslušnlá, ale jen koza odešla na lupení, začala se prát a hluk bylo slyšet namíle daleko. Ulyšel ho také hladový vlk.

pes pes kocka

Rámeček okolo vlevo/vpravo zarovnaných elementů (overflow)

pes pes kocka

Rámeček okolo vlevo/vpravo zarovnaných elementů (alternativní řešení ... clearfix)

pes pes kocka

Text ve sloupcích

Červená karkulka šla lesem, houpala si košíčkem a vesele si zpívala. Honila motýly, ráchala se v potoce a dávno zapomněla na maminčino varování.

Maruška se, přesně podle přání své macechy, vypravila do lesa, aby našla nějakou mýtinku, kde by se i v zimních krutých mrazech červenaly jahody. Cesta vedla hlubokým lesem až do míst, která před Maruškou ještě nikdo nenavštívil. Když už si nebohé děvče myslelo, že se dočista ztratilo a bude vydáno napospas divé zvěři, zahlédlo mezi stromy problikávat malé světlo. Šla za světlem, které se neustále zvětšovalo, až se z něj staly plameny, které šlehaly vysoko k nebi. Před Maruškou se rozprostřela široká mýtina.

V chaloupce na kraji lesa bydlela koza se svými sedmi kůzlátky. Měli se rádi a žili spokojeně jako v pohádce. Maminka koza odcházela každé ráno na pastvu a kůzlátka napomínala, aby si tiše hrála a nikomu neotvírala. V lese bydlí zlý vlk, který by si na nich rád pochutnal. Kůzlátka slíbila, že budou poslušnlá, ale jen koza odešla na lupení, začala se prát a hluk bylo slyšet namíle daleko. Ulyšel ho také hladový vlk.


Přenastavení typu elementu (blokový/vnořený) (display)

Zacina text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce.

Zacina text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce.

Zacina text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce.

Zacina text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce.

Zacina text odstavce. xyz Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce.

Zacina text odstavce. xyz Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce.

Zacina text odstavce. xyz Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce.


Pseudoelementy (first-letter, first-line, before, after)

Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce.

Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce.

Pseudotřídy (link, visited, active, hover, focus, first, lang)

Již jsme probírali (e_6_odkazy.html)

Pevná pozice elementu na stránce (position)

kocka

uprostřed