Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)

Rozměr: px

Začít zobrazení ze stránky:

Download "Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht."

Kristina Pavlíková
před 8 lety
Počet zobrazení:

1 Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)

2 Internetové publikování CSS 4. Formátovací model, pozicování

3 Vizuální formátovací model» Každý element vytvoří nula nebo více boxů obdélníků, které se podle daných pravidel skládají a tvoří vzhled dokumentu

4 Vybrané typy boxů» Block» Inline (viz příklad 1)» Run-in» Typ boxu, který bude vytvořen určuje vlastnost display: inline block list-item run-in

5 Typy boxů

6 Typy boxů v MSIE

7 Příklad použití inline boxu a { border: 1px red dashed; background-image: url(external.png); background-position: right; background-repeat: no-repeat; padding-right: 15px; }

8 Skrytí elementu» display: none» schová element a nevyhrazuje pro něj prostor» visibility: hidden» element normálně existuje, alokuje prostor, ale obsah není vidět

9 Width a šířka boxu» Vlastnosti nastavení šířky a výšky elementu (width, height) se týkají pouze vlastního obsahu» Šířka a výška boxu jsou dány připočtením 2* (margin + padding + border)

10 Outline (CSS 2.0)» Např:» p» {» outline:#00ff00 dotted 1px;» }» Kreslí ještě další linku okolo border

11 Pružný design» Design stránky s proměnlivou šířkou, která se přizpůsobí šířce okna» Problém 1: při příliš širokém okně jsou řádky velmi dlouhé a špatně se čtou» Řešení: vlastnost max-width» maximální šířka elementu» Podobně i» min-width» min-height» max-height MSIE jen ve standardovém módu

12 Obtékané elementy» Element může být nastaven tak, že jej budou následující elementy obtékat vlastností float: left right none» Element může být nastaven tak, že nebude sousedit s předchozím obtékaným elementem vlastností clear: none left right both

CSS pozicování» Absolutní nebo relativní nastavení pozice elementu» Vlastnost position, nabývá hodnot» static implicitní chování» relative posun oproti

13 CSS pozicování» Absolutní nebo relativní nastavení pozice elementu» Vlastnost position, nabývá hodnot» static implicitní chování» relative posun oproti standardnímu umístění» absolute přesná specifikace pozice vzhledem k obsahujícímu bloku» fixed specifikace vzhledem k oknu prohlížeče (IE jen ve std režimu!!!)

14 Určení pozice» Vlastnosti» top horní okraj» left levý okraj» bottom spodní okraj» right pravý okraj» Hodnota» auto» procenta%» délka

15 Relativní určení pozice #outer { color: red } #inner { color: blue } #outer { position: relative; top: -12px; color: red } #inner { position: relative; top: 12px; color: blue }

16 Absolutní určení pozice element { position: absolute; top: 0px; left: 0px;}» Prvek se umístí přímo na souřadnice zadané nejčastěji jako [top, left]» Počátek souřadnic je levý horní okraj nejbližšího nadřazeného elementu s position jinou než static

17 Vrstvení elementů» Pozicované elementy se mohou překrývat» Jejich vrstvení lze ovlivnit vlastností z-index: číslo

18 Pružné logo» Šířka stránky se přizpůsobuje prohlížeči, ale logo zůstává fixní» Řešení: logo implementujeme jako pozadí elementu <div> <img src="logo.gif" border="0" alt="" width="754" height="144" /> </div> <div class="hlavicka"> </div>.hlavicka { background-image : url(logo.gif); background-repeat : no-repeat; background-position : left; height : 144px; }

19 CSS rozlišení prohlížečů» hacky ( hacks )» Využití nedostatků v podpoře CSS standardu <head> <style type="text/css"> #alpha {width: 170px; height: 113px; filter:progid:dximagetransform.microsoft. AlphaImageLoader(src='alpha.png', sizingmethod='scale')} body>#alpha { background-image: url(alpha.png); background-repeat: no-repeat; } </style> </head> <body bgcolor="#ffcccc"> <img id="alpha" alt="transparant PNG" width="170" height="113" src="prazdny.gif" /> </body>

20 CSS rozlišení prohlížečů» Podmíněné komentáře HTML <link rel="stylesheet" href="styly.css" type="text/css" />

Podobné dokumenty

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE