CSS Blokový model

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.
<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>
CSS
16
Obalující bloky
Ještě jeden obalující blok neboli kontejner:
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
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;
}
</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>
19
CSS
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.
20
CSS
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>
21
CSS
22
Absolutní pozicování bloku vůči jinému bloku (nadřazenému bloku)
hlavní
50px
300px
50px
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.