CSS
1
Blokový model ■ Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. blokové To je blokové
vložené
Zde je dlouhý text v kterém nachazí 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.
CSS
2
Blokový model
hranice vnějšího okraje
TM (top margin), průhledný TB (top border) RB
hranice rámečku
TP vnítřní okraj (padding) LM
LP
Obsah
RM
RP
BP LB BM
BB
hranice vnítřního okraje
CSS 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.
3
CSS Vnější okraje Příklad. Použivání vňejších okrajů elementů. 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; }
4
CSS Data Storage 15 px
5
h1
Workshop 2007
100 px
horní okraj h1 je nastavený na 0, pravý okraj je nastavený na 100 px
Text odstavec 1…………………………………………………………. Levý a horní ……………………………………………………………………………. okraj h1 nastavený …………………………………………………………………………….
P
na 0 100 px
Levý okraj odstavce p nastavený na 100 px
Text odstavec 2…………………………………………………………. ……………………………………………………………………………. …………………………………………………………………………….
P
5 px
Text odstavec 3…………………………………………………………. ……………………………………………………………………………. …………………………………………………………………………….
Odstavec p má vnější horní okraj nastavený na 5 px
P
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
30 px
5 px
body
P P
5 px 65 px
P 30 px
30 px
CSS 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%;}
7
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á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;
CSS
9
Styl rámečku
Styl
Efekt
dotted
Rámeček z řady teček
dashed
Rámeček z řady čárek
solid
Rámeček zobrazený plnou čarou
double
Rámeček zobrazený dvojitou čarou
groove
Rámeček s přesahujícími okraji
ridge
Přesažený rámeček
inset
Propadlý rámeček
outset
Vystouplý rámeček
hidden
Skrytý rámeček, který je možno zobrazit pomocí skriptů
none Příklad.
Bez rámečku
border-right-style: dotted;
CSS Příklad. Různé kombinace vlastností rámečku. 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;}
10
CSS 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;
11
CSS 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; }
12
CSS
13
Vnitřní okraj Element h1
10 px
Element h2 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; }
30 px
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ění elementu s horním, spodním, levým a pravým odsažením s konkrétními hodnotami. 2. Pojmy: - normální obtékání - bloky - okno prohlížeče
CSS
15
Normá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.
CSS
16
Obalující bloky Ještě jeden obalující blok neboli kontejner:
kontejner
■ 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
Výřez okna Složky
(Stránka) Výřez okna prohlížeče – je oblast, v niž se objevuje strámka (dokument).
CSS Absolutní pozicování vůči kořenovému elementu ■ 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.
18
CSS 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; }
Data Storage
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á.
