Lekce 13 - Pozadí webu a velikost elementů

V minulé lekci, HTML layout, jsme započali tvorbu layoutu.

V dnešním HTML/CSS tutoriálu se podíváme na stylování pozadí pomocí vlastnosti background, naučíme se nastavit výšku a šířku elementů a další užitečné styly.

Vlastnost `background` - Nastavení pozadí

Nyní se začneme zajímat o pozadí stránky. Zatímco dříve bylo běžné využívat barvy, pracovat s texturami a vytvářet barevný a veselý web (který ovšem neztrácel na čitelnosti!), dnes je moderní držet se zásad minimalismu. Pozadí většinou zůstává bílé, někdy ve světlých odstínech šedé. Pokud vás kombinování barev zajímá, více se o něm můžete dočíst v lekci Jak na barvy z kurzu User Experience.

Ve styl.css nastavíme jednobarevné pozadí na elementu <body> pomocí vlastnosti background. I s předchozími styly bude selektor body v CSS souboru vypadat takto:

body {
    font: 14px "Poppins";
    color: #414042;
    background: #F9F9F9;
}

Výsledkem je světle šedé pozadí, čímž jsme se zas trochu přiblížili finálnímu webu:

Moje první webová stránka

index.html

Obrázek na pozadí

Zmiňme si jen, jak by to vypadalo, pokud bychom chtěli na pozadí využít nějaký obrázek. Může se jednat o fotografii, ale třeba i šum nebo texturu. Do vlastnosti background můžeme vložit url daného obrázku. Vypadalo by to například takto:

background: url('obrazky/pozadi.png');

K tomu je nutné podotknout dvě věci:

Vždy je lepší odkazovat na obrázek, který máme fyzicky ve složce projektu než na nějaký externí na internetu.
Je dobré počítat s tím, že načíst obrázek je datově náročnější než vykreslit barvu, a může se stát, že se obrázek z různých důvodů nenačte. Pro takový případ je dobré stejně ještě připsat nějakou barvu, která bude v pozadí místo daného obrázku:

background: url('obrazky/pozadi.png') #F9F9F9;

Vlastnost background je opět pouze zkratkou za spoustu jiných vlastností, které se dají použít pro nastavení pozadí. Barvu pozadí bychom mohli například nastavit taktéž pomocí vlastnosti background-color, obrázek bychom však pomocí ní do pozadí nenastavili.

O stylování pozadí by toho vydalo na několik lekcí, zájemce opět odkážeme na český CSS 3 manuál - Pozadí. V našem webovém portfoliu budeme využívat na pozadí pouze barvy :-)

Vlastnosti `width` a `height` - Výška a šířka elementů

Na stránce máme obrázek našeho avatara, kterému jsme v CSS již nastavili menší šířku, nicméně dané vlastnosti jsme detailně neprobrali. Pojďme to napravit.

Výšku a šířku elementů nastavujeme pomocí CSS vlastností height (výška) a width (šířka). Těmto vlastnostem můžeme nastavit především tyto hodnoty:

Číselnou hodnotu s jednotkou - například pixely px, šířky písmene "M" em nebo procenta %
auto - velikost se vypočítá a zvolí automaticky. Jedná se o výchozí hodnotu
max-content - skutečná maximální šířka nebo výška obsahu. U textového obsahu to znamená, že se obsah vůbec nezalomí, i kdyby měl přetéct
min-content - skutečná minimální šířka nebo výška obsahu. Například v případě šířky je to u textového obsahu šířka nejdelšího slova

Obě vlastnosti mají poté ještě minimální a maximální varianty, máme tedy min-height, min-width, max-height a max-width. Vlastnostmi min-height a min-width nastavujeme minimální velikost daného elementu a vlastnostmi max-height a max-width jeho maximální velikost. Při počítání velikosti elementu mají tyto vlastnosti přednost před vlastnostmi height a width.

To znamená, že pokud bychom elementu nastavili šířku width na 200px a max-width na 100px, tak element bude široký pouze 100px.

Nyní si v souboru styl.css na základě získaných vědomostí nastavíme také výšku hlavičky článku na 80px. Do CSS přidáme nový selektor:

article header {
    height: 80px;
}

Nové selektory můžete přidávat jednoduše na konec CSS souboru. Nebo je ideálně seřaďte tak, aby byly ty podobné u sebe a nestylovali jsme např. barvu hlavičky na začátku souboru a písmo hlavičky na konci souboru. Pokud dva selektory nepracují se stejnou vlastností stejného elementu, na jejich pořadí v CSS souboru nezáleží. Jinak platí, že pozdější selektor přepisuje ten, který byl v souboru dříve.

Složitější selektory

Objevuje se nám zde nový typ CSS selektoru, a to takový, kde jednotlivé elementy neoddělujeme čárkou, ale pouze mezerou. Selektor article header vybere všechny hlavičky všech článků na stránce (tedy všechny elementy <header>, vložené v elementu <article>).

Jelikož na stránce budeme mít vždy jen jeden článek a v něm jednu hlavičku, bude to fungovat správně. V tuto chvíli by jistě stačilo vybrat i jen element <header>, protože na stránce jiný není. V budoucnu ale bude další hlavička s logem i na začátku stránky, proto zde vkládáme na první místo ono article, abychom upřesnili, že zde myslíme hlavičku <header> v článku, nikoli stránky.

Daný zápis by fungoval i v případě, že by byl <header> vložen v článku třeba ještě takto do tagu <div>:

<article>
    <div>
        <header>
        ...
        </header>
    </div>
    ...
</article>

Selektoru stačí, že <header> bude někde uvnitř <article>.

Kdybychom chtěli, aby selektor vybral jen přímo vnořený element (hovoříme o dítěti - child), použijeme znak >:

article > header {
}

Nyní by se <header> v příkladu výše nevybral, jelikož není přímo v <article>, ale je přímým potomkem elementu <div>.

To bylo jen malé odbočení, abychom si rozšířili zásobu selektorů. Jaký použijete je na vás.

Vlastnost `max-width` - Maximální šířka

Dnešní monitory jsou hodně široké a kdyby byl článek přes úplně celou šířku prohlížeče, museli bychom jezdit očima dlouhou vzdálenost a špatně by se četl. Weby proto omezují maximální šířku svých článků, nejvíce je to asi vidět na novinových webech, kde jsou krátké články, které jsou velmi úzké. Náš článek <article> omezíme na maximální šířku 960px pomocí vlastnosti max-width. Přidáme další selektor:

article {
    max-width: 960px;
}

`margin 0 auto` - Centrování bloků

Článek je nyní užší, ale je přilepený na levé hraně monitoru (a uživatel sedí obvykle veprostřed ). Proto článek vycentrujeme. Dostáváme se do situace, kdy potřebujeme vycentrovat blokový element (<article>) v blokovém elementu (<body>). Nejjednodušší způsob, který funguje pouze pro jeden element, je nastavit vlastnost margin. Ta nám udává velikost vnějšího okraje daného elementu, tedy odsazení od okolních elementů. My zde nastavíme velikost horního a dolního okraje na 0 a velikost bočních okrajů na hodnotu auto, která zajistí stejné odsazení z obou stran.

Vlastnosti margin se budeme blíže věnovat dále v kurzu, proto toto její použití můžeme zatím chápat pouze jako takovou kouzelnou formulku, pomocí které lze centrovat blokové elementy.

Styl článku upravíme do následující podoby:

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

Ostylování nadpisů

Podle předlohy nyní nastylujme všechny typy nadpisů (<h1> - <h6> v článku <article>). Do CSS přidáme:

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

Všechny původní selektory nadpisů h1, h2, h3, h4, h5 a h6 ze souboru odebereme. Už je nebudeme potřebovat.

Dále upravíme font prvních dvou úrovní nadpisů. To uděláme zvlášť pomocí dalších selektorů:

article h1 {
    font-size: 2.3em;
    font-weight: bold;
    text-transform: uppercase;
    width: max-content;
}

article h2 {
    font-size: 2em;
}

Použili jsme následující vlastnosti:

font-size - Nadpisu <h1> jsme nastavili velikost písma na 2,3 násobek písma rodiče a nadpisu <h2> na dvojnásobek.
font-weight - Pro tučný text jsme nastavili hodnotu na bold, pro normální text by to byla hodnota normal. Nadpisy jsou jako výchozí tučné, ale je dobré znát možnosti nastavení.
text-transform - První nadpis se vykreslí celý VELKÝMI PÍSMENY pomocí hodnoty uppercase.
max-content - Šířku prvního nadpisu jsme omezili jen na šířku jeho obsahu, abychom jej později v kurzu mohli snáze podtrhnout. U dalších nadpisů nám nevadí, že element je širší, než text v nadpisu.

Zbylé styly

Dále přidáme selektory pro úpravu odstavců <p> a odkazů <a> v obsahu článku <section>:

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

article section a {
    color: #EF6534;
}

U odstavců jsme zvýšili mezeru mezi řádky line-height a odkazy jsme nabarvili na oranžovo.

A zde vidíme výsledek dnešní lekce (všimněme si, že se odsazení ze stran mění v závislosti na velikosti okna):

Moje první webová stránka

index.html

I k dnešní lekci najdete soubor s naším projektem přímo pod článkem.

V následujícím cvičení, Řešené úlohy k 7.-13. 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 572x (2.27 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

Článek pro vás napsal David Hartinger

Uživatelské hodnocení:

790 hlasů

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity

Lekce 13 - Pozadí webu a velikost elementů

Vlastnost background - Nastavení pozadí

Obrázek na pozadí

Vlastnosti width a height - Výška a šířka elementů

Složitější selektory

Vlastnost max-width - Maximální šířka

margin 0 auto - Centrování bloků

Ostylování nadpisů

Zbylé styly

Stáhnout

Vlastnost `background` - Nastavení pozadí

Vlastnosti `width` a `height` - Výška a šířka elementů

Vlastnost `max-width` - Maximální šířka

`margin 0 auto` - Centrování bloků