11. lekce - rámečky, okraje

V této lekci se naučíme přidávat objektům na stránce rámečky, kterým můžeme nastavit tloušťku, barvu, případně typ (vzhled, styl). Pokud nebudeme chtít, aby text (nebo jiný objekt) nebyl na rámečku přímo "přilepený" určíme mezeru mezi rámečkem a textem (objektem). Dále můžeme přidat ještě okraj objektu, což je mezera mezi jednotlivými objekty, to všechno definujeme v souboru stylů (css). Bohužel jde také o vlastnosti, které nezobrazují všechny prohlížeče správně podle standardů CSS, a to ještě záleží na jejich verzích, proto je potřeba zkusit otevřít stránky ve více prohlížečích, nejen v IE (který se CSS drží nejméně).

Padding, margin, border

Vlastní objekt je na obrázku vyznačený žlutou barvou, jeho velikost je určena šířkou width a výškou height (právě IE ve verzích 5. a 6. ale šířku a výšku počítá i s okrajem a rámečkem).
Rozměry je možné nastavit tzv. blokovým elementům, to je například především div, ale také odstavec p nebo nadpisy h1..., za těmito elementy se také odřádkuje.
Pokud chceme nastavit rozměry tzv. řádkovým elementům, což jsou například odkazy a, span a další, potom musíme v jejich stylu použít vlastnost display: block.

Mezi objektem a rámečkem je vnitřní mezera, díky které není objekt (například text odkazu) "nalepený" přímo na rámečku - padding.

Následuje rámeček (na obrázku dosti tlustý :-) oranžový) - border, okolo kterého může být okraj margin, to je prázdné místo kolem rámečku, mezera mezi objekty na stránce (například mezi "orámečkovanými" obrázky nebo odkazy). Protože například odstavce nebo nadpisy mají automaticky přednastavené vnější mezery, někteří autoři někde na začátku souboru stylů "vynulují" všechny mezery, aby je mohli nastavit podle svého:
*{margin: 0; padding: 0;}
- hvězdička podobně jako třeba při hledání souborů znamená libovolný element, všem tagům budou tedy nastavené mezery na 0px, na dalších řádcích si je potom u jednotlivých elementů nastavují autoři tak, jak jim vyhovuje.

Velikosti mezer padding a margin lze nastavit rozměrově (px, em apod.) nebo v procentech. Častěji se používají jednotky em (násobky velikosti písma), protože potom jsou mezery proporcionálně přizpůsobené velikosti písma.
Například v tagu body uvedené margin určuje okraj pro celou stránku:
BODY {BACKGROUND: #ffffcc; COLOR: blue; FONT: 11pt/130% "Arial CE", "Helvetica CE", Arial, sans-serif; MARGIN: 2em}
Je možno také nastavit okraj jen na jedné straně (pomocí top, right, bottom, left), nebo různé na jednotlivých stranách. Například:
p {PADDING-BOTTOM: 1ex; PADDING-LEFT: 2ex;}

Při zápisu lze použít takzvanou hromadnou deklaraci, za vlastností se píše více parametrů oddělených mezerou. Chceme-li například mít na různých stranách jiné margin nebo padding, potom se uvádí jako první horní hodnota a pokračuje se ve směru hodinových ručiček (top, right, bottom, left), například:
p {BACKGROUND: white; FONT-SIZE: 90%; MARGIN: 2em 0px 1em 5px;}
Pokud uvedete jen dvě velikosti mezer, platí první hodnota pro vodorovné a druhá pro svislé mezery
MARGIN: 2em 1px; .

Zvláštností je, že ve chvíli, kdy jsou pod sebou dvě vnější mezery (marginy, například spodní od jednoho odstavce a horní od druhého odstavce pod tím prvním), není výsledná mezera jejich součtem, ale je stejná jako větší z nich.

Pro rámeček border můžete nastavit jeho
- tloušťku = border-width - třeba jen na některé straně border-left-width: 2px; apod., lze i hromadně jako u mezer border-width: 20px 10px 5px 1px; (horní pravý dolní levý)
- barvu = border-color - podobně jako tloušťka může být na jednotlivých stranách různá - border-color: green red blue black;
- styl = border-style (pozor - pokud neuvedete styl, rámeček se nevykreslí!!) - je možné opět na každé straně různý - border-style: solid double inset dashed;.
Styl rámečku může mít tyto možnosti:
none - žádný, dotted - tečkovaný, dashed - čárkovaný, solid - plný, double - dvojitý, groove - příkop, ridge - val, inset - ďolík, outset - návrší
Parametry pro rámeček můžeme opět vypisovat jeden po druhém, nebo zapsat hromadně:
h1 {border-width: 8px; border-color: red; border-style: solid}
je totéž jako:
h1 {border: 8px red solid} (při pokusu hromadného zápisu různých stylů, barev nebo tlouštěk na jednotlivých stranách neuspějete)

Pomocí nastavení vlastností pozadí a rámečků je například možno vytvořit "tlačítkový" vzhled odkazů, který se mění podle akce myši:
a { display: block; padding: 10px; width: 200px; height: 20px; border: outset 3px ; font-weight: bold; text-decoration: none}
a:link, a:visited {background-color: green; color: white;}
a:hover {background-color: blue; color: yellow; border: inset 3px}
Zápis ve druhém řádku určuje stejné vlastnosti pro a:link a a:visited - zobrazený a navštívený odkaz.

Název školy:	Základní škola, Hradec Králové, M. Horákové 258
Název projektu:	EU peníze školám
Číslo projektu:	CZ.1.07/1.4.00/21.2575
Téma:	Tvorba WWW stránek
Název:	VY_32_INOVACE_11_10B_tvorba www11
Autor:	Pavel Petr

Použité zdroje: Není-li uvedeno jinak, jsou všechny ilustrační obrázky dílem autora.