15. diel - Rámček a boxmodel v CSS

V minulej lekcii, Obtekanie v HTML - Float, Tieň, sme sa naučili používať float na obtekanie elementu obsahom a ako môžeme pri elementoch nastaviť tieň.

V dnešnom HTML/CSS tutoriále dokončíme pole s článkom a naučíme sa ďalšie nové vlastnosti HTML a CSS.

Referenčné tlačidlo

Vytvoríme si tlačidlo odkazujúce na podstránku s našimi referenciami (súbor references.html si môžeme vytvoriť, budeme na ňom však pracovať až neskôr. Teraz to teda nie je nutné).

Do index.html vložíme na koniec <section> nasledujúce riadky:

<p class="paragraph-button">
    <a href="references.html" class="references-button">My References</a>
</p>

Naše nové tlačidlo bude tvorené práve pridaným odkazom <a>. Budeme teda štylovať triedu paragraph-button a triedu references-button.

Odsadenie

Pred samotným stylovaním tlačidla odsadíme celý odsek s tlačidlom tak, že naštylujeme třídu paragraph-button:

.paragraph-button {
    margin-top: 50px;
}

Tým sa nastaví veľkosť horného okraja tohto odseku s tlačidlom.

Pozadie a písmo

Do nášho CSS súboru si napíšeme nový selektor .references-button. Najprv tlačidlu pridáme nám už známe vlastnosti:

.references-button {
    background: #70B73A;
    color: white;
    font-size: 0.9em;
    text-transform: uppercase;
}

Tlačidlu sme nastavili zelené pozadie, farbu textu na bielu, veľkosť písma a výpis textu veľkými písmenami.

Podčiarknutie textu - text-decoration

Keďže sa jedná o odkaz (na ďalšiu stránku), tak by sa nám v predvolenom nastavení text tlačidla podčiarkol. To by však nevyzeralo veľmi dobre. Preto túto "dekoráciu" zrušíme pridaním vlastnosti text-decoration s hodnotou none:

.references-button {
    ...
    text-decoration: none;
}

Vnútorné odsadenie - padding

Ďalej pomocou vlastnosti padding odsadíme text tlačidla od jeho okrajov, aby na ne nebol tak veľmi nalepený:

.references-button {
    ...
    padding: 12px 25px;
}

Zhora a zdola sme nastavili odsadenie na 12 pixelov a zo strán na 25 pixelov.

Túto vlastnosť si bližšie popíšeme ďalej v lekcii.

Zaguľatenie rohov - border-radius

Pri tlačidlách väčšinou chceme, aby boli rohy oblé. Preto nášmu tlačidlu ešte nastavíme zaguľatené rohy. K tomu využijeme vlastnosť border-radius, ktorú nastavujeme, ako veľmi sa zaguľatia rohy tzv. rámčeka. Celý kód selektora vyzerá takto:

.references-button {
    background: #70B73A;
    color: white;
    font-size: 0.9em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 25px;
}

Teraz má tlačidlo všetky svoje rohy zaoblené s polomerom 25 pixelov:

Vlastnosť border-radius umožňuje nastavenie rôznych zaguľatení jednotlivých rohov. Hodnoty zapisujeme postupne za sebou v poradí ľavý horný, pravý horný, pravý dolný a ľavý dolný roh a oddeľujeme ich medzerami. Našu hodnotu by sme mohli teda rozpísať takto:

border-radius: 25px 25px 25px 25px;

Zaguľatenie napríklad iba ľavého horného a pravého dolného rohu by sme nastavili nasledovne:

border-radius: 25px 0 25px 0;

My ich však necháme všetky zaoblené s polomerom 25 pixelov.

Občas sa stane, že chceme zobrazovať okrúhlu fotku (napríklad profilové obrázky veľmi často bývajú v kruhu) - to docielime aj pomocou vlastnosti border-radius.

Rámček - border

Rámček môžeme ďalej štylovať predovšetkým pomocou vlastnosti border. Túto vlastnosť v našom projekte príliš nevyužijeme, ale pretože je dôležité ju poznať, vysvetlíme si niektoré jej možnosti.

Pre predstavu, ako rámček funguje, môžeme napríklad vlastnosť border vložiť do selektora article:

article {
    margin: 0 auto;
    ...
    border: 3px solid green;
}

Vyššie uvedený zápis vlastnosti border s hodnotami 3px solid green je skráteným zápisom týchto vlastností:

• border-width: 3px; - šírka rámčeka: 3px
• border-style: solid; - štýl čiary: plný
• border-color: green; - farba rámčeka: zelená

S týmto skráteným štýlom zápisu sa budete v praxi často stretávať.

Štýly čiary - border-style

Ako štýl čiary môžeme použiť hodnoty:

• none - Bez rámčeka.
• hidden - Rámček sa nevykreslí, ale zaberá miesto.
• dotted - Bodkovaný.
• dashed - čiarkovaný.
• solid - Plná čiara.
• double - Dvojitý.
• groove - 3D rámček s efektom groove.
• ridge - 3D rámček s efektom ridge.
• inset - 3D rámček s efektom inset.
• outset - 3D rámček s efektom outset.
• inherit - zdedí štýl čiary rámčeka nadradeného elementu.

Posledné 3D štýly sú dobre vidieť len so širokým rámčekom. Všetky hodnoty podrobnejšie vysvetľujeme a ukazujeme na príkladoch v kurze CSS3, konkrétne v lekciách Okraje a rámčeky v CSS3 a Pokročilejšie okraje a rámčeky v CSS3.

Strany rámčeka

Rámček nemusí byť nutne okolo celého elementu, ale môže byť treba len na niektorých jeho stranách. Vlastnosť border s hodnotou 3px solid green by sme totiž mohli rozpísať na hornú, pravú, dolnú a ľavú stranu rámčeka:

border-top: 3px solid green;
border-right: 3px solid green;
border-bottom: 3px solid green;
border-left: 3px solid green;

Tieto jednotlivé zápisy je potom možné ešte ďalej rozpísať aj na border-top-width, border-top-style atď.

My si pomocou spodného rámčeka vytvoríme podčiarknutie hlavného nadpisu v našom článku <article>. Upravme si teda selektor article h1:

article h1 {
    font-size: 2.3em;
    font-weight: bold;
    text-transform: uppercase;
    width: max-content;
    border-bottom: 4px solid #EF6534;
}

Stránka s rámčekmi teraz vyzerá takto:

Vlastnosť border s hodnotami 3px solid green zo selektora article sme si vyskúšali a teraz ju zmažeme.

Podrobnejšie sa rámčekom a ich vlastnostiam venujeme v kurze Základy CSS3.

Odsadenie - margin a padding

V predchádzajúcich lekciách sme sa už stretli s vlastnosťou padding a margin. Teraz si poďme lepšie vysvetliť, ako tieto vlastnosti fungujú.

Rozdiel medzi paddingom a marginom sa vysvetľuje na tzv. boxmodelu (slovensky niekedy býva preložené ako "krabičkový model"), ktorý vyzerá takto:

Na obrázku vidíme element a rámček (border) okolo neho. Rozostup medzi rámčekom a obsahom elementu sa nazýva padding. Rozostup medzi rámčekom a okolím elementu sa nazýva margin. Zjednodušene povedané: padding je vnútorné odsadenie, margin to vonkajšie.

Pokiaľ chceme nastaviť odsadenie na všetky strany rovnaké, tak môžeme použiť takýto zápis vlastností padding a margin:

padding: 20px;

margin: 20px;

Vlastnosti padding a margin je však možné rozpísať aj 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 vyššie by sme použili v prípade, že by sme chceli nastaviť napríklad len okraj z jednej strany alebo z každej strany iný. Jednotlivé hodnoty môžeme uviesť aj v zhrňujúcom zápise, ktorý je v poradí horný, pravý, dolný, ľavý:

padding: 20px 20px 20px 20px;
margin: 20px 20px 20px 20px;

Ako tretí typ zápisu sa niekedy používa uvedenie iba dvoch hodnôt:

padding: 20px 20px;
margin: 20px 20px;

Tu prvá hodnota udáva okraj zvislý (horný a dolný) a druhá vodorovný (ľavý a pravý).

Nastavenie odsadenia

Teraz si nastavíme odsadenie niektorým elementom na našom webe. Využijeme na to už existujúce selektory. Začneme odseku <p> v elemente <article>, ktorým nastavíme dolný vonkajší okraj (margin-bottom) na 1.5em:

article section p {
    margin-bottom: 1.5em;
    line-height: 1.8em;
}

Elementu <article> pridáme ešte padding, aby sme ho mali pekne odsadený:

article {
    margin: 0 auto;
    max-width: 960px;
    padding: 50px 50px 10px 50px;
}

Ďalej pridáme horný a dolný vnútorný okraj nadpisom všetkých úrovní, ktoré sa v článku nachádzajú:

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
    padding: 10px 0;
    color: #00386B;
}

Niektoré elementy, ako napríklad nadpisy a odseky, majú nastavenú východiskovú hodnotu margin. Nám sa to v článku pri nadpise prvej úrovne však nehodí, preto ju nastavíme na 0 zo všetkých strán:

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 veľkosti elementu - vlastnosť box-sizing

S boxmodelom úzko súvisí vlastnosť box-sizing, ktorej východiskovou hodnotou je content-box. Predstavme si, že nastavíme šírku nejakého elementu napr. na 100px a ďalej mu nastavíme padding alebo rámček z každej strany na 10px. Element bude zaberať celkom 120px, pretože sa k šírke pripočítajú ešte okraje. To môže byť pri vytváraní layoutu problematické.

Preto existuje ešte hodnota border-box, ktorá udáva, že sa do nastavenej šírky a výšky započítava aj veľkosť padding a šírka rámčeka. Tým sa stane, že náš element zostane stále rovnako široký (oných 100px), pretože pridaný padding alebo rámček zaberú jeho vnútorný priestor a jeho obsah sa tým v našom príklade zmenší na 80px.

Túto vlastnosť si ukážeme na elemente <body>. U neho v budúcnosti budeme chcieť nastaviť minimálnu výšku na výšku celej obrazovky, aby sa nám pätička zobrazovala vždy na konci stránky, a zároveň mu budeme chcieť nastaviť aj padding. Nastavíme preto hodnotu vlastnosti box-sizing na border-box:

body {
    font: 14px "Poppins";
    background: #f9f9f9;
    color: #414042;
    box-sizing: border-box;
}

Takto teraz vyzerá náš web:

Kód z dnešného HTML/CSS tutoriálu nájdete ako vždy na stiahnutie v prílohe nižšie.

V nasledujúcom cvičení, Riešené úlohy k 14.-15. lekciu HTML a CSS, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.