Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

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

Podobné prezentace


Prezentace na téma: "Blokový model v CSS Obr. 1. Blokový model v CSS horizontální rozměry Obr. 2."— 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. 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. S objekty lze posouvat a mohou se překrývat. Existují dva naprosto odlišné druhy pozicování. Existují dva naprosto odlišné druhy pozicování. Absolutní pozice Absolutní pozice Relativní pozice Relativní pozice

5 CSS pozicování Absolutní pozice umístí objekt do stránky na udané souřadnice bez ohledu na okolní text. 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. 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í 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. 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í. 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 Plovoucí objekty - float: left | right

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

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

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

10 Vlastnosti boxů AtributMožné hodnotyPopis border-top-width: thin, medium thick délka šířka horní části rámečku border-right-width: thin, medium thick délka šířka pravé části rámečku border-bottom-width: thin, medium thick délka šíř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ů AtributMožné hodnotyPopis border-color:barvabarva 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élkavýš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í 1. Co určuje blokový model v CSS? 2. Jaké druhy pozicování znáte? 3. K jakému účelu slouží vlastnost z-index? 4. 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, BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, BLÁBOLIL, Roman. Podpora výuky: „Tvorba www stránek“ [online]. 6. února :30. Dostupný z WWW: Použité obrázky: Vlastní


Stáhnout ppt "Blokový model v CSS Obr. 1. Blokový model v CSS horizontální rozměry Obr. 2."

Podobné prezentace


Reklamy Google