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: 3px
• border-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š.