Lekce 13 - Pozadí webu a velikost elementů Nové

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é. O kombinování barev na webové stránce se dočtete v článku Jak na barvy.

Ve styl.css nastavíme jednobarevné pozadí na elementu <body> pomocí vlastnosti background takto:

background: #F9F9F9;

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ů

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

Číselnou hodnotu s jednotkou - například px, em nebo %
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í zkontrolujeme nastavení šířky obrázku s třídou .avatar z konce předchozí lekce HTML layout. Nastavíme také velikost hlavičky článku:

article header {
    height: 80px;
}

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

.avatar {
    width: 300px;
}

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

Složitější selektory

Objevuje se nám zde nový typ CSS selektorů, a to takových, u kterých jednotlivé elementy neoddělujeme čárkou, ale pouze mezerou. Prvním takovým selektorem je article header, který 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 např. 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 jen element <header>, ale v budoucnu jich na stránce budeme mít více, proto zde vkládáme na první místo ono article, abychom upřesnili výběr.

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 >:

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.

Na selektoru article h1, article h2, article h3, article h4, article h5, article h6 lze hezky vidět, že v jednom selektoru můžeme kombinovat více typů selektorů. Tento selektor vybere nadpisy všech úrovní, které jsou v jakémkoliv elementu <article>.

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 omezíme na šířku 960px pomocí vlastnosti max-width:

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í 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.

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

Zbylé styly

Dále přidáme selektory pro úpravu stylu prvních dvou úrovní nadpisů a odstavců s odkazy:

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

article h2 {
    font-size: 2em;
}

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

article section a {
    color: #EF6534;
}

Rozeberme si, co dělají jednotlivé použité vlastnosti:

Vlastností font-weight určujeme, zda chceme text tučný nebo normální. Pro tučný text použijeme hodnotu bold. Pro normální text použijeme hodnotu normal. Nadpisy jsou jako výchozí tučné, ale je dobré znát možnosti nastavení.
Vlastnost text-transform převede všechna písmena na velká (uppercase), malá (lowercase) nebo například vypíše všechna první písmena velká (capitalize).
Vlastností line-height nastavíme výšku řádky.

Protože nadpis <h1> článku budeme v budoucnu podtrhávat a budeme chtít, aby jeho šířka nebyla delší než jeho text, přidali jsme k němu width: max-content. Nyní se tato změna nijak neprojeví.

Další vlastnosti už známe, a tak si jejich účel v CSS jistě dokážeme odvodit :-)

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

Moje první webová stránka

index.html

V rozložení budeme chtít mít nadpis vlevo a článek pod ním. Do pravé části později přemístíme fotografii. Nemá to žádný význam, jde pouze o design.

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 30x (2.27 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

Článek pro vás napsal David Čápka Hartinger

Uživatelské hodnocení:

105 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ů Nové

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ů

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ů