Lekce 15 - Rámeček a boxmodel v CSS
V minulé lekci, Obtékání v HTML - Float, Stín, jsme se naučili používat float k obtékání elementu obsahem a jak můžeme u elementů nastavit stín.
V dnešním HTML/CSS tutoriálu dokončíme pole s článkem a naučíme se další nové vlastnosti HTML a CSS.
Referenční tlačítko
Vytvoříme si tlačítko odkazující na podstránku s našimi referencemi
(soubor reference.html
si můžeme vytvořit, budeme na něm však
pracovat až později. Nyní to tedy není nutné).
Do index.html
vložíme na konec <section>
následující řádky:
<p class="tlacitko-odstavec"> <a href="reference.html" class="reference-tlacitko">Moje reference</a> </p>
Naše nové tlačítko bude tvořeno právě přidaným odkazem
<a>
. Budeme tedy stylovat třídu
.reference-tlacitko
, třídu .tlacitko-odstavec
využijeme v pozdější lekci.
Pozadí a písmo
Do našeho CSS souboru si napíšeme nový selektor
.reference-tlacitko
. Nejprve tlačítku přidáme nám již známé
vlastnosti:
.reference-tlacitko { background: #70B73A; color: white; font-size: 0.9em; text-transform: uppercase; }
Tlačítku jsme nastavili zelené pozadí, barvu textu na bílou, velikost písma a výpis textu velkými písmeny.
Podtržení textu -
text-decoration
Jelikož se jedná o odkaz (na další stránku), tak by se nám ve
výchozím nastavení text tlačítka podtrhl. To by ovšem nevypadalo moc
dobře. Proto tuto "dekoraci" zrušíme přidáním vlastnosti
text-decoration
s hodnotou none
:
.reference-tlacitko { ... text-decoration: none; }
Vnitřní odsazení -
padding
Dále pomocí vlastnosti padding
odsadíme text tlačítka od
jeho okrajů, aby na ně nebyl tak moc nalepený:
.reference-tlacitko { ... padding: 12px 25px; }
Shora a zdola jsme nastavili odsazení na 12
pixelů a ze stran
na 25
pixelů.
Tuto vlastnost si blíže popíšeme dále v lekci.
Zakulacení rohů -
border-radius
U tlačítek většinou chceme, aby byly rohy oblé. Proto našemu tlačítku
ještě nastavíme zakulacené rohy. K tomu využijeme vlastnost
border-radius
, kterou nastavujeme, jak moc se zakulatí rohy tzv.
rámečku. Celý kód selektoru vypadá takto:
.reference-tlacitko { background: #70B73A; color: white; font-size: 0.9em; text-transform: uppercase; text-decoration: none; padding: 12px 25px; border-radius: 25px; }
Nyní má tlačítko všechny své rohy zaoblené s poloměrem
25
pixelů:
Vlastnost border-radius
umožňuje nastavení různých
zakulacení jednotlivých rohů. Hodnoty zapisujeme postupně za sebou v
pořadí levý horní, pravý horní, pravý dolní a levý dolní roh a
oddělujeme je mezerami. Naši hodnotu bychom mohli tedy rozepsat takto:
border-radius: 25px 25px 25px 25px;
Zakulacení například pouze levého horního a pravého dolního rohu bychom nastavili následovně:
border-radius: 25px 0 25px 0;
My je však necháme všechny zaoblené s poloměrem 25
pixelů.
Občas se stane, že chceme zobrazovat kulatou fotku
(například profilové obrázky velice často bývají v kruhu) - toho
docílíme rovněž pomocí vlastnosti border-radius
.
Rámeček - border
Rámeček můžeme dále stylovat především pomocí vlastnosti
border
. Tuto vlastnost v našem projektu příliš nevyužijeme,
ale protože je důležité ji znát, vysvětlíme si některé její
možnosti.
Pro představu, jak rámeček funguje, můžeme například vlastnost
border
vložit do selektoru article
:
article { margin: 0 auto; ... border: 3px solid green; }
Výše uvedený zápis vlastnosti border
s hodnotami
3px solid green
je zkráceným zápisem těchto vlastností:
border-width: 3px;
- šířka rámečku: 3pxborder-style: solid;
- styl čáry: plnýborder-color: green;
- barva rámečku: zelená
S tímto zkráceným stylem zápisu se budete v praxi často setkávat.
Styly čáry - border-style
Jako styl čáry můžeme 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.
Poslední 3D styly jsou dobře vidět jen s širokým rámečkem. Všechny hodnoty podrobněji vysvětlujeme a ukazujeme na příkladech v kurzu CSS3, konkrétně v lekcích Okraje a rámečky v CSS3 a Pokročilejší okraje a rámečky v CSS3.
Strany rámečku
Rámeček nemusí být nutně kolem celého elementu, ale může být třeba
jen na některých jeho stranách. Vlastnost border
s hodnotou
3px solid green
bychom totiž mohli rozepsat na horní, pravou,
dolní a levou stranu rámečku:
border-top: 3px solid green; border-right: 3px solid green; border-bottom: 3px solid green; border-left: 3px solid green;
Tyto jednotlivé zápisy je pak možné ještě dále rozepsat i
na border-top-width
, border-top-style
atd.
My si pomocí spodního rámečku vytvoříme podtržení hlavního nadpisu v
našem článku <article>
. Upravme si tedy selektor
article h1
:
article h1 { font-size: 2.3em; font-weight: bold; text-transform: uppercase; border-bottom: 4px solid #EF6534; width: max-content; }
Stránka s rámečky nyní vypadá takto:
Vlastnost border
s hodnotami 3px solid green
ze
selektoru article
jsme si vyzkoušeli a nyní ji
smažeme.
Podrobněji se rámečkům a jejich vlastnostem věnujeme v kurzu Základy CSS3.
Odsazení - margin
a
padding
V předchozích lekcích jsme se již setkali s vlastností
padding
a margin
. Nyní si pojďme lépe vysvětlit,
jak tyto vlastnosti fungují.
Rozdíl mezi paddingem a marginem se vysvětluje na tzv. boxmodelu (česky někdy bývá přeloženo jako "krabičkový model"), který vypadá takto:

Na obrázku vidíme element 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ší.
Pokud chceme nastavit odsazení na všechny strany stejné, tak můžeme
použít takovýto zápis vlastností padding
a
margin
:
padding: 20px; margin: 20px;
Vlastnosti padding
a margin
lze však rozepsat i na
jednotlivé strany:
padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; margin-top: 20px; margin-right: 20px; margin-bottom: 20px; margin-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, který je v pořadí horní, pravý, dolní, levý:
padding: 20px 20px 20px 20px; margin: 20px 20px 20px 20px;
Jako třetí typ zápisu se někdy používá uvedení pouze dvou hodnot:
padding: 20px 20px; margin: 20px 20px;
Zde první hodnota udává okraj svislý (horní a dolní) a druhá vodorovný (levý a pravý).
Nastavení odsazení
Nyní si nastavíme odsazení některým elementům na našem webu.
Využijeme k tomu již existující selektory. Začneme odstavci
<p>
v elementu <article>
, kterým
nastavíme dolní vnější okraj (margin-bottom
) na
1.5em
:
article section p { margin-bottom: 1.5em; line-height: 1.8em; }
Elementu <article>
přidáme ještě padding
,
abychom ho měli hezky odsazený:
article { padding: 50px 50px 10px 50px; }
Dále přidáme horní a dolní vnitřní okraj nadpisům všech úrovní, které se v článku nacházejí:
article h1, article h2, article h3, article h4, article h5, article h6 { padding: 10px 0; color: #00386B; }
Některé elementy, jako třeba nadpisy a odstavce, mají nastavenu výchozí
hodnotu margin
. Nám se to v článku u nadpisu první úrovně
ovšem nehodí, proto ji nastavíme na 0
ze všech stran:
article h1 { margin: 0; font-size: 2.3em; font-weight: bold; text-transform: uppercase; width: max-content; border-bottom: 4px solid #EF6534; }
Výpočet velikosti
elementu - vlastnost box-sizing
S boxmodelem úzce souvisí vlastnost box-sizing
, jejíž
výchozí hodnotou je content-box
. Představme si, že nastavíme
šířku nějakého elementu např. na 100px
a dále mu nastavíme
padding
nebo rámeček z každé strany na 10px
.
Element bude zabírat celkem 120px
, protože se k šířce
připočítají ještě okraje. To může být u vytváření layoutu
problematické.
Proto existuje ještě hodnota border-box
, která udává, že
se do nastavené šířky a výšky započítává i velikost
padding
a šířka rámečku. Tím se stane, že náš
element zůstane pořád stejně široký (oněch 100px
),
protože přidaný padding
nebo rámeček zaberou jeho vnitřní
prostor a jeho obsah se tím v našem příkladu zmenší na
80px
.
Tuto vlastnost si ukážeme na elementu <body>
. U něj v
budoucnu budeme chtít nastavit minimální výšku na výšku celé obrazovky,
aby se nám patička zobrazovala vždy na konci stránky, a zároveň mu budeme
chtít nastavit i padding
. Nastavíme proto hodnotu vlastnosti
box-sizing
na border-box
:
body { font: 14px "Poppins"; background: #f9f9f9; color: #414042; box-sizing: border-box; }
Takto nyní vypadá náš web:
Kód z dnešního HTML/CSS tutoriálu naleznete jako vždy ke stažení v
příloze níže. Rámeček však nebudeme v příštích lekcích používat,
jedná se pouze o ukázku. To co si však na našem budoucím webu ponecháme je
referenční tlačítko
V následujícím cvičení, Řešené úlohy k 14.-15. lekci HTML a CSS, si procvičíme nabyté zkušenosti z předchozích lekcí.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 3898x (2.27 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS