Lekce 11 - Rámeček, stín a boxmodel v CSS
V minulé lekci, Plovoucí obsah v HTML, jsme se naučili pracovat s plovoucím obsahem a pozicovat elementy vedle sebe.
V dnešním HTML/CSS tutoriálu dokončíme pole s článkem a naučíme se další nové vlastnosti HTML.
Rámeček
Pole s článkem jsme rozdělili do 2 elementů, header
a
section
, které jsme napozicovali vedle sebe. Dejme elementu
section
(bílému poli s obsahem článku) rámeček.
Rámeček se v CSS nastaví přes shrnující vlastnost border
.
Jako hodnotu uvedeme tloušťku rámečku, typ čáry a nakonec barvu. Selektor
pro section v souboru styl.css
již máme, jelikož v něm
nastavujeme float
, šířku a pozadí. Rozšiřme tento styl o
nastavení rámečku:
article section { width: 706px; float: left; background: white; border: 2px solid #006797; }
U vlastnosti border
jsme uvedli šířku rámečku
2px
, styl čáry "plná čára" (solid
) a barvu čáry
přes nám již známý šestnáctkový zápis, je to tmavě modrá.
Bystřejší si jistě všimli, že jsme snížili šířku elementu z
710px
na 706px
. To proto, že k šířce elementu se
připočítá z obou stran ještě 2px
široký rámeček (šířka
elementu se tedy zvětší o 4px
a jelikož chceme celkovou
původní šířku 710px
zachovat, je nutné tyto 4px
ubrat). Šířka rámečku se tedy do width
nepočítá a
element je vždy kvůli rámečku o chlup větší.
Podívejme se na výsledek:

Jen opět připomenu, že jsme použili barvu, co nám do designu ladí.
Stejného stylu lze dosáhnout tak, že vlastnost border rozepíšeme na její 3 složky:
border-style: solid; border-width: 2px; border-color: #006797;
Jelikož je tento zápis delší, není důvod ho používat, pokud nechceme třeba jen změnit určitou složku. Uvádím ho pro úplnost a hlavně proto, abyste mu rozuměli, když se s ním někde setkáte.
Styly čáry
Jako styl čáry můžete použít hodnoty:
- none - Bez rámečku.
- hidden - Rámeček se nevykreslí, ale zabírá místo.
- dotted - Tečkovaný.
- dashed - Čárkovaný.
- solid - Plná čára.
- double - Dvojitý.
- groove - 3D rámeček s efektem
groove
. - ridge - 3D rámeček s efektem
ridge
. - inset - 3D rámeček s efektem
inset
. - outset - 3D rámeček s efektem
outset
. - inherit - Zdědí styl čáry rámečku nadřazeného elementu.
Vyzkoušejte si je
Poslední 3D styly jsou dobře vidět jen s širokým rámečkem. Všechny
hodnoty jsou samozřejmě opět popsané v českém
CSS 3 manuálu - Border style včetně ukázek toho, jak vypadají.
Kulaté rohy
Zajímavou vlastností je border-radius
, která umožňuje
zakulatit rohy rámečku. Zkusme si to a přidejme si ji do stylu section:
border-radius: 10px;
Výsledek:

Obvykle se nepoužívají hodnoty vyšší než 10px
, protože
nevypadají dobře. Pokud nastavíme velmi vysokou hodnotu, stane se z elementu
kruh. Lze tak udělat např. kruhová tlačítka.
Zajímavé je, že border-radius lze použít i u obrázků, rohy se poté zakulatí. Vysoké hodnoty dají obrázek do kruhu. Vyzkoušíme si to.
Pro testovací účely lze obejít psaní selektoru a napsat styl přímo do
HTML, slouží k tomu HTML atribut style
. Říká se tomu také
inline styl (v řádku). Je určitě jasné, že tím
znepřehledňujeme kód a porušujeme hlavní princip oddělení obsahu a
vzhledu. Nicméně pokud vymýšlíme design a zkoušíme co vypadá dobře, je
tento atribut velmi užitečný. Upravme tedy náš obrázek v HTML:
<img src="obrazky/avatar.png" alt="Programátor HoBi" style="border-radius: 500px;" />
Výsledek:

Do designu naší konkrétní šablony se kulaté rohy příliš nehodí,
proto vlastnosti zase odstraňme. Pokud by se nám líbily, odstraníme atribut
style
a uděláme pro ně plnohodnotný selektor v souboru
styl.css
. Na hotových stránkách by se ideálně atribut
style
neměl u HTML elementů nikde objevit.
Více o rámečkách naleznete v českém CSS 3 manuálu - Rámečky.
Stín
Se stínem jsme se již v CSS setkali, byl to stín u textu pomocí CSS 3
vlastnosti text-shadow.
Stín můžeme nastavit libovolnému elementu na stránce pomocí vlastnosti box-shadow.
My ostylujeme stín section
takto:
box-shadow: 2px 2px 7px #1c2228;
První 2 hodnoty jsou pozice stínu, další rozostření, poslední barva. Vlastnost ostyluje obdélníkový stín okolo elementu. Podívejme se na výsledek:

Odsazení
Obsah section je velmi nalepený na okraje, což působí nevzhledně. Bývá
dobrým zvykem udržovat mezi elementy určité rozestupy. Ty můžeme nastavit
pomocí CSS vlastností padding
a margin
. Rozdíl mezi
nimi se vysvětluje na tzv. boxmodelu (česky někdy bývá přeloženo jako
"krabičkový model"). Vypadá takto:

Na obrázku vidíme element (např. náš section
) a rámeček
(border
) kolem něj. Rozestup mezi rámečkem a obsahem elementu se
nazývá padding
. Rozestup mezi rámečkem a okolím elementu se
nazývá margin
. Zjednodušeně řečeno: padding
je
vnitřní odsazení, margin
to
vnější.
Ani jeden okraj se podobně jako rámeček nepočítá do velikosti
elementu! Do stylu k section
nastavme padding
na 20px
a musíme také opět snížit šířku elementu o
40px
(20px
z každé strany):
padding: 20px; width: 666px;
Tím jsme docílili vnitřního odsazení o 20px
na všech
stranách:

Vlastnost lze rozepsat i takto:
padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;
Zápis výše bychom použili v případě, že bychom chtěli nastavit třeba jen okraj z jedné strany nebo z každé strany jiný. Jednotlivé hodnoty můžeme uvést i ve shrnujícím zápisu (v pořadí horní, pravý, dolní, levý):
padding: 20px 20px 20px 20px;
Jako třetí typ zápisu se někdy používá:
padding: 20px 20px;
Kde první hodnota udává okraj svislý (horní a dolní) a druhá vodorovný (levý a pravý). Kód z dnešního HTML/CSS tutoriálu naleznete jako vždy ke stažení v příloze níže.
V následujícím cvičení, Řešené úlohy k 10.-11. lekci HTML a CSS, si procvičíme nabyté zkušenosti z předchozích lekcí.
Stáhnout
Staženo 1880x (75.2 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS
Komentáře


Zobrazeno 10 zpráv z 47. Zobrazit vše