Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. CSS 1 blokové To je blokové Zde je dlouhý text v kterém nachazí vložené... vložené Vnější okraje umožňují nastavovat vňejší okraje elementu v kladných i záporných hodnotách. Ramečky umožňují nastavit styl ohraničení elementu pomocířady předdefinovaných stylů. Vnítřní okraj umožňuje nastavovat vnítřní odsazení obsahu od okraje elementu.
Blokový model CSS 2 hranice vnějšího okraje TM (top margin), průhledný TB (top border) TP vnítřní okraj (padding) RB hranice rámečku LM LP Obsah RP RM LB BP BM BB hranice vnítřního okraje
CSS 3 Vnější okraje K nastavení mezer mezi elementy Vlastnost margin pro element body. Příklad. Nastavovaní hodnot margin pro element body. body { font: 14px Arial, sans-serif; color:white; background-color:black; margin-top:0; margin-left:0; border:2px solid white; } h1{ font-size: 24px; color:orange; } h2{ font: italic 20px Times, serif; color: #999; text-indent: 15px; } Po nastavení levého a horního vnějšího okraje na hodnotu 0 u elementu body se celý element body posune i se všemi v něm obsaženými elementy.
Vnější okraje Příklad. Použivání vňejších okrajů elementů. CSS 4 body { font: 14px Arial; color: black; background-color: white; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left:0; border: 2px solid black; } h1 { font-size: 24px; color: blue; margin-top: 0; margin-left: 0; margin-right:100px; margin-bottom: 0; border: 2px solid green; } h2 { font: 20px Times; color: black; text-indent: 15px; } p { margin-left: 100px; margin-top: 5px; margin-bottom:0; margin-right: 0; border: 2px solid yellow; }
Data Storage 15 px Workshop 2007 Levý a horní okraj h1 nastavený na 0 100 px Levý okraj odstavce p nastavený na 100 px CSS 5 h1 horní okraj h1 je nastavený na 0, pravý okraj je nastavený na 100 px 100 px Text odstavec 1.. P. Text odstavec 2.. P. 5 px Text odstavec 3.. P. Odstavec p má vnější horní okraj nastavený na 5 px body Pravý i spodní okraj je nastavený na 0
CSS 6 Používání záporných vnějších okrajů Záporné hodnoty vnějších okrajů se obvykle používají pro vytváření změn v zobrazení při obcházení nějakého problému v návrzích zarovnaných na střed nebo pro odsazení určitých elementů mimo element, v němž jsou obsaženy. Příklad. Používání záporných vnějších okrajů k přesahování nadřazeného elementu. body { font:14px Arial; color:black; background-color:white; margin-top:30px; margin-right:30px; margin-bottom:30px; margin-left:130px; border: 2px solid red; } p { margin-left:-65px; margin-top: 5px; margin-bottom:0; margin-right:0;} 130 px 5 px 30 px body P 5 px P 30 px 65 px P 30 px
CSS 7 Souhrnné nastavování vnějších okrajů Souhrnná vlastnost margin. Vlastnost margin se nastavují hodnoty vnějších okrajů přesně v tomto pořadí: horní --- pravý --- spodní --- levý body {margin: 30px 30px 30px 30px;} Souhrnné nastavení můžete zkrátit tak, ze pokud nejsou nataveny, převezmou protilehlé strany automaticky hodnotu svého protějšku: body {margin: 30px 20px;} Pokud jsou všechny vnější okraje stejné, můžete zadat pouze jednu hodnotu: body {margin:100px;} Můžete použit hodnoty v procentech: body {margin: 20%;}
CSS 8 Nastavení rámečku V rámečku můžete nastavovat šířku, styl a barvu jednotlivých stran. border-width border-style border-color Název strany rámečku: border-left border-right border-top border-bottom Šířka rámer mečku Hodnoty: px, em, klíčévá slova (thin, medium, thick) border-bottom-width: 2px; border-left-width: thick; Barva okraje Způsoby: - Hexadecimálně - Zkráceně hexadecimálně - Hodnotami RGB - Procenty v RGB - Podporovanými názvy barev Příklad: border-top-color:#808080;
Styl rámečku Styl dotted dashed solid double groove ridge inset outset hidden none Rámeček z řady teček Rámeček z řady čárek Přesažený rámeček Propadlý rámeček Vystouplý rámeček Bez rámečku CSS 9 Efekt Rámeček zobrazený plnou čarou Rámeček zobrazený dvojitou čarou Rámeček s přesahujícími okraji Skrytý rámeček, který je možno zobrazit pomocí skriptů Příklad. border-right-style: dotted;
Příklad. Různé kombinace vlastností rámečku. CSS 10 body {font:14px Arial, sans-serif; color:white; background-color:black; margin:0;} h1 {font-size:24px; color:orange; border-left-width:3px; border-left-color:red; border-left-style:dotted; border-bottom-width:thick; border-bottom-color:lime; border-bottom-style:inset;} h2 {font:italic 20px Times, serif; color:#999; text-indent:15px; border-bottom-width:thin; border-bottom-style:dotted; border-color:fuchsia;} p {border-left-width:medium; border-left-style:solid; border-left-color:blue;}
CSS 11 Souhrnná vlastnost pro rámeček Souhrnná vlastnost pro : - stranu; - šířku; - styl; - barvu. Každá kategorie souhrnné vlastnosti má odpovídající samostatnou vlastnost: border-right, border-left, border-top, border-bottom border-width border-style border-color Příklad: border-right:1px dotted red; Vlastnost border. Tato vlastnost nastavuje šířku, styl a barvu pro všechny čtyři strany daného elementu: border: thick solid red;
CSS 12 Vnitřní okraj (odsazení) Vnitřní okraj umožňuje nastavit prostor mezi obsahem a rámečkem. Vnitřní okraj můžete zadávat pro jednotlivé strany pomocí hodnot v různých jednotkách (např. px nebo %). Vlastnosti: padding-top, padding-right, padding-bottom, padding-left. body {font:14px Arial, sans-serif; color:black; background-color:white; margin-top:10px;} h1 {font-size:24px; color:orange; border-bottom:2px dotted blue; padding-bottom:10px;} h2 {font:italic 20px Times, serif; color:green; text-indent:15px;} p { border:thin solid red; padding-top:15px; padding-right:30px; padding-bottom:0; padding-left:30px; }
Vnitřní okraj CSS 13 Element h1 Element h2 30 px 10 px 15 px Text odstavce............ 30 px rámeček Souhrnná vlastnost pro vnitřní okraj Hodnoty v pořadí: horní pravý spodní levý p { padding: 15px 30px 25px 0; }
CSS 14 Pozicování Pozicování označuje schéma v CSS, které umožňuje používat elementy k vytvoření bloků a jejich umístění v dokumentu a okně prohlížeče. Terminologie a koncepty 1. Čtyři druhy pozicování: absolutní relativní statické pevné Pozicování se může využívat pro umíst stění elementu s horním, spodním, levým a pravým odsažen ením s konkrétními hodnotami. 2. Pojmy: - normální obtékání - bloky - okno prohlížeče
CSS 15 Normáln lní obtékání Normální obtékání - označuje běžné chování prohlížeče. Blokovy elementy umístěny jeden nad jedným a jsou zarovnany obvykle doleva. Vložené elementy se přizpůsobují. Pokud změnite velikost okna prohlížeče, jednoduše se přemístí do své nové pozici, bez odřadkování. Když změním velikost okna vidim jak vypada normální tok elementů v okně prohlížeče. Obalující bloky Obalující blok je jakýkoliv blok nadřazený elementu, který chcete pozicovat. <div id= obsah > <h1>data Storage</h1> <h2>workshop</h2> <p>blizí se<a href= http://www.conf2008.org/ >další ročník konference</a></p> <p>téma<a href= http://www.bd.com/ >správy, zálohování a archivace</a>dat je stále velmi aktuální.</p> </div>
Obalující bloky Ještě jeden obalující blok neboli kontejner: CSS 16 kontejner <div id= hlavni > <div id= obsah >...... </div> </div> Pokud obalující element není zadán, je jím kořenový element (html). Implicitní vlastnosti prohlížečů Pro mnohé elementy existují výchozí styly prohlížeče, a to včetně html Každý prohlížeč má výchozí styly Pozicování určitých elementů neobsažených v jiných prvcích je výsledkem výchozích stylů elementu html.
CSS 17 Výřez okna prohlížeče Při pozicování jsou elementy v některých případech pozicované vůči výřezu okna prohlížeče a ne vůči normálnímu toku nebo obalujícím blokům. Menu Složky Výřez okna (Stránka) Výřez okna prohlížeče je oblast, v niž se objevuje strámka (dokument).
Absolutní pozicování vůči i kořenov enovému elementu CSS 18 Absolutní pozicování nastavuje pozici elementu vůči jeho obalujícímu elementu. Absolutni pozicování je zcela nezávisle na obvyklém toku elementů. Pozicovaný element bude vždy pozicován vůči svému explicitnímu kontejneru nebo vůči kořenovému elementu html (ne vůči výřezu okna prohlížeče), bez ohledu na to, jaký dálší obsah je na stránce.
CSS 19 Příklad. Absolutní pozicování bloku vůči kořenovému elementu. <style type= text/css > #obsah{ position:absolute; left:100px; top:50px; border:1px solid red; } </style> </head> <body> <div id= obsah > <h1>data Storage</h1> <p>téma správy,zálohování a archivace dat je stále velmi aktuální. Množství dat vygenerovaných jednotlivými společnostmi stoupá.</p> </div> </body> </html>
CSS 20 Absolutní pozicování bloku vůči kořenovému elementu 50 px 100 px Obsah P P P Obsah Element zůstavá na svém místě bez ohledu na jiné elementy dokumentu. Absolutně pozicovaný element zcela vyjmut z normalního toku dokumentu.
CSS 21 Absolutní pozicování bloku vůči jinému bloku (nadřazenému bloku) <style type= text/css > #hlavni {position:absolute; left:50px; top:20px; border:1px solid blue;} #obsah{position:absolute; left:100px; top:50px; width:300px; border:1px solid red; background-color:yellow;} ul, li, a {list-style-type:none; display:inline; text-decoration:none;} </style> </head> <body> <div id= hlavni > <div id= navigace > <ul> <li><a href=. </a></li>......................... <li><a href=. </a></li> </ul> </div> <div id= obsah > <h1>data Storage</h1> <p>téma správy...</p> </div> </div> </body>
CSS 22 Absolutní pozicování bloku vůči jinému bloku (nadřazenému bloku) hlavní 50px 50px 300px 100 px obsah Blok je umíst ován absolutně vůči svému nadřazenému bloku, nikoliv vůči elementu html nebo výřezu okna prohlížeče.