Obsah toho dílu:
Každý HTML dokument je tvořen stromovou strukturou - tak jak jsou jednotlivé prvky obsaženy v nejvyšší
úrovni (kořeni) dokumentu a postupně vnořeny jeden do druhého. V HTML dokumentu je kořenovým prvkem prvek <html>,
který obsahuje všechny další prvky stránky. V něm mohou být obsaženy další prvky druhé úrovně - typicky prvky <head>
a <body>. A <body> i <head> pak zase obsahují další prvky, které
mohou obsahovat další a další prvky. Tak vznikne zmíněná stromová struktura dokumentu - každý prvek představuje jakousi
přihrádku, v níž mohou být uloženy další zásuvky a krabičky, a sama tato přihrádka je uložena ve větší bedýnce; a všechny
jsou uloženy v hlavní bedně zvané <html>.
V původní dokumentaci se těmto přihrádkám, zásuvkám, krabičkám a bednám říká souhrně anglicky boxy - pro lepší
přehlednost si tento termín podržíme i zde. Specifikace CSS popisuje, jakým způsobem při tvorbě stromu dokumentu vznikají
boxy pro každý prvek, a definuje pravidla pro to, jak jsou tyto boxy vykreslovány na výstupu. Tato pravidla se nazývají
vizuální formátovací model a týkají se pouze vizuálních výstupních zařízení (visual
media) - ostatní média (aural, tactile) s dokumentem nakládají jiným způsobem.
Jednotlivé boxy podle svých vlastností a umístění v dokumentu mohou tvořit vlastní blok (obdélníková oblast, uvnitř
níž je zobrazen obsah boxu), nebo vlastní blok nevytvářejí - pak jsou umístěny v jiném, nadřazeném bloku a jejich obsahem
jsou řádky. Z toho důvodu je nejvyšší, kořenový box dokumentu vždy typu blok. Všechny boxy, ať již jsou to bloky
nebo řádky, mají některé společné vlastnosti, popisující obdélník, v němž se jejich obsah nachází. Pokud se jedná o blok,
tyto vlastnosti popisují přímo obdélník bloku; pokud se o blok nejedná, tyto vlastnosti popisují jednotlivé obdélníky
tvořící každý řádek boxu. Všechny řádky pak mají stejné vlastnosti, definované pro tento box.
Vlastnosti boxů
Každý box je v prvé řadě tvořen svým obsahem (text, obrázek atd.). Kolem něj je několik oblastí, které mohou mít
libovolnou (tedy i nulovou) velikost:
- vnitřní oblastí je samotný obsah boxu. Jeho rozměry určují vlastnosti
width a height
- kolem obsahu je oblast padding (odstup obsahu od rámečku)
- vně oblasti padding je oblast border (rámeček)
- kolem rámečku je pak oblast margin (okraj, odstup prvku od okolních objektů)
Obr. 1: Oblasti boxu
Rozměry všech oblastí mohou být definovány jedinou hodnotou, nebo zvlášť pro každou stranu - vlevo (left), vpravo (right),
nahoře (top) a dole (bottom). Ke každé vlastnosti tak existují vždy čtyři pod-vlastnosti, umožňující samostatně definovat
jeden ze čtyř rozměrů dané oblasti. V CSS je zvykem postupovat shora ve směru hodinových ručiček - zvykneme si tedy postupovat
v tomto pořadí - top, right, bottom, left:
padding = padding-top, padding-right, padding-bottom a padding-leftborder = border-top, border-right, border-bottom, border-leftmargin = margin-top, margin-right, margin-bottom, margin-left
Celkové rozměry boxu jsou tvořeny součtem rozměrů všech jednotlivých oblastí:
- celková šířka boxu = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
- celková výška boxu = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
Pozn.: Některé prohlížeče (včetně majoritního MSIE 5) mají rozměry boxů dosud špatně implementovány a do rozměru
boxu počítají i padding - někdy dokonce i border a margin. Jakkoli je to chyba prohlížeče, designér s ní musí počítat
a je-li v jeho cílové skupině nezanedbatelný počet takovýchto chybných prohlížečů, měl by tuto chybu ošetřit - užitečné
tipy jsou uvedeny např. v předchozím dvoudílném článku o CSS.
Rozměrům boxů (vlastnosti width a height) se budeme věnovat dále.
Vlastnosti popisující okraj boxu:
margin-top, margin-right, margin-bottom, margin-left a margin
Tyto vlastnosti specifikují rozměry oblasti margin daného boxu, tedy odstup boxu od okolních prvků v dokumentu. Vlastnost
margin je zkratkou (shorthand), která definuje shodné hodnoty pro více dílčích vlastností současně.
Popis vlastností margin-top, margin-right, margin-bottom, margin-left:
- povolené hodnoty:
- výchozí hodnota: 0
- lze použít: na všechny prvky
- dědí se: ne
- procenta: vztahují se k rozměrům omezujícího bloku
- media: vizuální
Popis vlastnosti margin:
- povolené hodnoty: stejně jako v dílčích vlastnostech, syntaxe viz dále
- výchozí hodnota: pro zkratky se nedefinuje
- lze použít: na všechny prvky
- dědí se: ne
- procenta: vztahují se k rozměrům omezujícího bloku
- media: vizuální
Pozn.: Hodnoty vlastností margin mohou být záporné, pak ale mohou být omezeny implementací v prohlížeči.
Pozn. 2: Pokud za sebou následují dva boxy (a nejsou-li absolutně či relativně pozicované),
jejich sousedící okraje margin-bottom a margin-top se spojí: tak, aby vzniklá mezera mezi rámečky
obou boxů byla o velikosti větší z obou hodnot. Okraje se spojují tehdy, mají-li oba boxy stejný nadřazený box - nezáleží
však na jejich vzájemném vztahu: druhý box může být na stejné úrovni jako první, ale může mu být nadřazený i podřazený
(např. odsazená položka v UL seznamu). Horizontální okraje (margin-left a margin-right)
se nespojují.
Vlastnosti popisující odstup obsahu od rámečku:
padding-top, padding-right, padding-bottom, padding-left a padding
Tyto vlastnosti specifikují rozměry oblasti padding daného boxu, tedy odstup vlastního obsahu boxu od případného rámečku.
Vlastnost padding je zkratkou (shorthand), která definuje shodné hodnoty pro více dílčích vlastností současně.
Popis vlastností padding-top, padding-right, padding-bottom, padding-left:
- povolené hodnoty:
- výchozí hodnota: 0
- lze použít: na všechny prvky
- dědí se: ne
- procenta: vztahují se k rozměrům omezujícího bloku
- media: vizuální
Popis vlastnosti padding:
- povolené hodnoty: stejně jako v dílčích vlastnostech, syntaxe viz dále
- výchozí hodnota: pro zkratky se nedefinuje
- lze použít: na všechny prvky
- dědí se: ne
- procenta: vztahují se k rozměrům omezujícího bloku
- media: vizuální
Pozn.: Na rozdíl od margin nesmí být hodnoty padding záporné.
Hodnotou zkratek margin a padding mohou být jedna až čtyři hodnoty
povolené pro dílčí vlastnosti, oddělené mezerou (resp. whitespace). Všechny čtyři hodnoty definují po pořadě vlastnosti
top, right, bottom a left. Jsou-li uvedeny pouze tři hodnoty, druhá
z nich je společná pro right i left. Jsou-li uvedeny pouze dvě z nich, první hodnota je určena
pro top a bottom, druhá pro left a right. A je-li uvedena pouze jedna
hodnota, použije se současně pro všechny čtyři dílčí vlastnosti.
Příklady:
P {margin-left: 2px} - nastaví levý okraj na šířku 2px, ostatní okraje budou nulové (výchozí hodnota)H1 {padding-top: 1em; padding-bottom: 2em} - nastaví horní padding na hodnotu 1em a dolní na 2emP {margin: 2em 1ex} - horní a dolní okraj bude 2em, pravý a levý pak 1exH1 {padding: 5% 0 5% 10%} - odstup obsahu od rámu bude shora i zdola 5 % výšky omezujícího bloku,
zprava nulový a zleva o velikosti 10 % šířky omezujícího bloku
Příklad slučování okrajů:
<P style="margin-bottom:2em">První odstavec</P>
<P style="margin-top:1em">Druhý odstavec</P>
Mezi odstavci bude zobrazena mezera pouze o velikosti většího z obou okrajů, tedy 2em.
Vlastnosti rámečku (border)
Tyto vlastnosti popisují postupně rozměry, barvu a styl rámečku. Prohlížeče mohou vykreslovat rámečky u některých prvků
(tlačítka, formulářové prvky atd.) specifickým způsobem, který se liší od ostatních, "běžných" prvků - například
zaoblené okraje tlačítek, 3D efekty apod. Nastavíte-li těmto prvkům v CSS specifické vlastnosti rámečku, mohou se vykreslovat
velmi neobvykle až podivně a je potřeba si jejich vzhled ověřit na různých platformách.
Vlastnosti popisující velikost rámečku:
border-top-width, border-right-width, border-bottom-width, border-left-width
a border-width
Tyto vlastnosti určují "tloušťku" rámečku.
Popis vlastností border-top-width, border-right-width, border-bottom-width,
border-left-width:
- povolené hodnoty:
thin | medium | thick - tenký | střední | tlustý - přesná hodnota závisí
na konkrétním prohlížeči<velikost> - specifikuje fixní rozměr, hodnota
nesmí být zápornáinherit - zdědí spočítanou hodnotu z rodičovského prvku
- výchozí hodnota:
medium
- lze použít: na všechny prvky
- dědí se: ne
- procenta: nelze použít
- media: vizuální
Popis vlastnosti border-width:
- povolené hodnoty: stejně jako v dílčích vlastnostech, syntaxe viz dále
- výchozí hodnota: viz dílčí vlastnosti
- lze použít: na všechny prvky
- dědí se: ne
- procenta: nelze použít
- media: vizuální
Vlastnosti popisující barvu rámečku:
border-top-color, border-right-color, border-bottom-color,
border-left-color a border-color
Tyto vlastnosti určují barvu rámečku.
Popis vlastností border-top-color, border-right-color, border-bottom-color,
border-left-color:
- povolené hodnoty:
<barva>inherit - zdědí spočítanou hodnotu z rodičovského prvku
- výchozí hodnota: hodnota vlastnosti
color
- lze použít: na všechny prvky
- dědí se: ne
- procenta: nelze použít
- media: vizuální
Popis vlastnosti border-color:
- povolené hodnoty: stejně jako v dílčích vlastnostech (syntaxe viz dále) |
transparent
- výchozí hodnota: viz dílčí vlastnosti
- lze použít: na všechny prvky
- dědí se: ne
- procenta: nelze použít
- media: vizuální
Vlastnosti popisující styl rámečku:
border-top-style, border-right-style, border-bottom-style,
border-left-style a border-style
Tyto vlastnosti určují styl čáry rámečku.
Popis vlastností border-top-style, border-right-style, border-bottom-style,
border-left-style:
- povolené hodnoty:
none - žádný rámeček. Tato hodnota současně nastaví nulový border-widthhidden - totéž jako none, pouze se chová jinak u tabulek (viz dále)dotted - tečkovaná čára ( ............. )dashed - čárkovaná čára ( - - - - - - )solid - plná čára ( _____ )double - dvojitá plná čára ( ===== ). Součet tloušťky čar a mezery mezi nimi odpovídá šířce border-widthgroove - žlábek; čára vypadající, jako by byla vyryta do podkladuridge - hřbet; opak ke groove - čára vypadající, jako by vystupovala z podkladuinset - rámeček vykreslený tak, že celý box vypadá jako zapuštěný do podkladuoutset - opak k inset - rámeček vykreslený tak, že celý box vystupuje z podkladuinherit - zdědí spočítanou hodnotu z rodičovského prvku
- výchozí hodnota:
none
- lze použít: na všechny prvky
- dědí se: ne
- procenta: nelze použít
- media: vizuální
Pozn.: Prohlížeče nemusí podporovat všechny styly čar a čáry stylu dotted, dashed, double,
groove, ridge, inset a outset mohou být vykresleny jako solid.
Např. MSIE5/Win takto nahrazuje styly dotted a dashed, protože "neumí" čárkované a
tečkované čáry.
Popis vlastnosti border-style:
- povolené hodnoty: stejně jako v dílčích vlastnostech, syntaxe viz dále
- výchozí hodnota: viz dílčí vlastnosti
- lze použít: na všechny prvky
- dědí se: ne
- procenta: nelze použít
- media: vizuální
Hodnotou zkratek border-width, border-color a border-style
mohou být jedna až čtyři hodnoty, chovají se stejně jako u zkratek margin a
padding.
Další zkratky pro vlastnosti rámečku:
border-top, border-right, border-bottom, border-left a border
Tyto zkratky definují šířku, styl a barvu rámečku současně pro horní, pravou, spodní a levou stranu rámečku, resp. pro
všechny strany rámečku najednou. Hodnotou těchto vlastností je trojice
šířka (viz border-width), styl (viz border-style) a barva (viz border-color)
nebo
hodnota inherit (zdědí všechny hodnoty z rodičovského prvku)
Jednotlivé hodnoty v seznamu jsou přitom odděleny mezerami (resp. whitespace) a není-li některá z nich uvedena,
použije se výchozí hodnota pro danou dílčí vlastnost.
Příklady:
P { border-left-width: thin; border-left-style: solid; border-left-color: black} - levý rámeček odstavce bude
vykreslen tenkou plnou červenou čarou.
P { border-color: black } - všechny čtyři strany rámečku budou černé
P { border-bottom: 1px dotted blue } - dolní strana rámečku bude vykreslena 1px silnou tečkovanou modrou
čarou.
P { border: thick solid orange } - kolem celého odstavce bude tučný oranžový rámeček.
P { border: inherit } - hodnoty rámečku se převezmou z rodičovského prvku, tedy z prvku, v němž je daný odstavec
umístěn.
Společně se zkratkami je vhodné využívat dědičnosti a kaskádování CSS pro snadné definování
složitějších konstrukcí, jejichž popis dílčími vlastnostmi by byl příliš složitý:
H1.nadpis { border: thin solid black; border-left: medium solid red } - první pravidlo nastaví celý rámeček
2px silný, plnou černou čarou, druhé pravidlo (s vyšší prioritou) pak přepíše vlastnosti pro levou stranu rámečku na silnější
červenou čáru. Nadpis tak bude orámován vlevo silněji červeně a na ostatních stranách tenčí černou čarou.
Poznámka k pozadí jednotlivých oblastí:
Styl pozadí jednotlivých oblastí boxu je definován následujícím způsobem:
- Obsah a oblast padding jsou vykresleny s pozadím odpovídajícím vlastnosti
background daného
boxu.
- Oblast border je rovněž vykreslena na stejném pozadí jako obsah boxu; u stylů čar
solid, dotted,
dashed a double se k vykreslení čáry použije barva specifikovaná v border-color;
u "plastických" stylů groove, ridge, inset a outset
se při vykreslování také přihlíží k barvě obsahu (vlastnost color daného prvku).
- Oblast margin je vždy průhledná.
Příklad:
BODY { background:yellow; color:black }
P.odstavec { padding:1em; background:orange; border: 8px dashed black }
...
<BODY>
...
<P class="odstavec">Text obsahu text obsahu...</P>
...
</BODY>
V korektním prohlížeči byste měli vidět tento výsledek:
Obr. 2: Ukázka pozadí v rámečku
Staníček Petr
|
