Blokový model v CSS Obr. 1.

Prezentace na téma: "Blokový model v CSS Obr. 1."— Transkript prezentace:

1 Blokový model v CSS Obr. 1

2 Blokový model v CSS horizontální rozměry
Obr. 2

3 Blokový model v CSS vertikální rozměry
Obr. 3

4 CSS pozicování Pomocí CSS pozicování lze jakýkoliv objekt (obrázek, tabulka, text, cokoliv) umístit kamkoliv na stránku. S objekty lze posouvat a mohou se překrývat. Existují dva naprosto odlišné druhy pozicování. Absolutní pozice Relativní pozice

5 CSS pozicování Absolutní pozice umístí objekt do stránky na udané souřadnice bez ohledu na okolní text. (počítá se od levého horního rohu) position: absolute; left: 5px; top: 5px Relativní pozice určuje pouze, o kolik se má objekt posunout oproti své normální poloze. (počítá se od předchozího bloku) position: relative; left: 5px; top: 5px

6 CSS pozicování left - určuje posunutí objektu směrem doprava
top - určuje posunutí objektu směrem dolů left - určuje posunutí objektu směrem doprava Pro posouvání nahoru a doprava se nepoužívá down a right, nýbrž top a left se zápornými hodnotami. Protože při přesouvání objektů může dojít k překrytí objektu, existuje vlastnost určující, který objekt bude navrchu. Ta vlastnost se jmenuje z-index a dosahuje hodnot celých čísel. Přitom vyšší číslo znamená vyšší pozici při překrývání. Plovoucí objekty - float: left | right

7 Vlastnosti boxů Atribut Možné hodnoty Popis margin-top: délka % auto
velikost horního okraje margin-right: velikost pravého okraje margin-bottom: velikost spodního okraje margin-left: velikost levého okraje margin: komplexní nastavení velikosti okrajů: nahoře vpravo dole vlevo

8 Vlastnosti boxů Atribut Možné hodnoty Popis padding-top: délka %
velikost vnitřního horního okraje padding-right: velikost vnitřního pravého okraje padding-bottom: velikost vnitřního dolního okraje padding-left: velikost vnitřního levého okraje padding: komplexní nastavení velikostí vnitřního okraje: nahoře vpravo dole vlevo

9 Vlastnosti boxů Atribut Možné hodnoty Popis border-top: barva
nastavení vlastností horní části rámečku border-right: nastavení vlastností pravé části rámečku border-bottom: nastavení vlastností spodní části rámečku border-left: nastavení vlastností levé části rámečku border: komplexní nastavení vlastností rámečku

10 Vlastnosti boxů Atribut Možné hodnoty Popis border-top-width:
thin, medium thick délka šířka horní části rámečku border-right-width: šířka pravé části rámečku border-bottom-width: šířka spodní části rámečku border-left-width: thin, medium thick, délka šířka levé části rámečku border-width: komplexní nastavení šířky rámečku: nahoře vpravo dole vlevo

11 Vlastnosti boxů Atribut Možné hodnoty Popis border-color: barva
barva rámečku border-style: none, dotted, dashed, solid, double, groove, ridge, inset, outset nastavení rámečku: nahoře vpravo dole vlevo width: auto, délka, % šířka height: auto, délka výška float: left, right, none left, right=plovoucí objekt (např. obrázek), none=normální objekt clear: left, right, none, both čekání na skončení plovoucích elementů: left=vlevo, right=vpravo, both=na obou stranách

12 Otázky k opakování Co určuje blokový model v CSS?
Jaké druhy pozicování znáte? K jakému účelu slouží vlastnost z-index? Jakým způsobem se vytvoří plovoucí objekt?

13 Použité zdroje BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, 2011. BLÁBOLIL, Roman. Podpora výuky: „Tvorba www stránek“ [online]. 6. února :30. Dostupný z WWW: Použité obrázky: Vlastní