NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 17 - Stylování hlavičky HTML stránky a flexbox

Předchozí
Další

V minulé lekci, Navigační menu, patička a HTML entity, jsme si připravili HTML kód hlavičky a patičky.

Dnes si v HTML/CSS tutoriálu ostylujeme hlavičku a patičku stránky. Ukážeme si také přeskládání položek elementu pomocí flexboxu.

Připomeňme si na začátek, jakého výsledku vlastně chceme dosáhnout:

Moderní webdesign

Hlavička

Pusťme se nejprve do stylování hlavičky. Do našeho CSS souboru si vložíme nový selektor, který postupně naplníme vlastnostmi. Začneme těmi, které již dobře známe:

body > header {
    height: 100px;
    width: 100%;
    background: #00386B;
    color: white;
}

Pomocí height a width hlavičce nastavujeme výšku na 100px a šířku na 100% šířky elementu, ve kterém je obsažena. Hlavičku tak budeme mít roztaženou přes celou stránku. Vlastnostmi background a color dáváme barvu pozadí a písmu.

Flexbox

Pro uspořádání hlavičky se naučíme využívat Flexbox (Flexible Box). Jedná se o jednorozměrnou "přepravku", která nám umožňuje skládat položky nějakého elementu za sebe. Jednorozměrná zde znamená, že se řeší rozložení pouze v jednom směru - buď do řádku, nebo do sloupce.

Flexbox nám kromě směru skládání položek umožňuje navíc snadno nastavit, v jakém pořadí se mají položky skládat, kolik místa mají jednotlivé položky zabírat, jaké mají mít mezi sebou mezery a mnohé další.

Abychom tedy mohli umístit elementy v hlavičce (logo a navigační menu) vedle sebe, tak přidáme vlastnost display s hodnotou flex. Z hlavičky se tak stane právě flexbox:

body > header {
    height: 100px;
    width: 100%;
    background: #00386B;
    color: white;
    display: flex;
}

Díky tomu, že je nyní hlavička flexboxem, tak jí můžeme nastavit vlastnost justify-content. Tato vlastnost definuje, jak velký je prostor mezi a kolem položek. V našem případě bude řešit prostor napravo a nalevo od každé položky flexboxu, jelikož my máme nastavený směr našeho flexboxu na řádky (výchozí hodnota).

Této vlastnosti můžeme nastavit vcelku hodně hodnot. My využijeme hodnotu space-evenly, která zajistí, že každá položka bude mít kolem sebe stejně prostoru:

body > header {
    height: 100px;
    width: 100%;
    background: #00386B;
    color: white;
    display: flex;
    justify-content: space-evenly;
}

O dalších hodnotách se dočtete v CSS3 kurzu, v lekci Pozice prvku v CSS3.

Protože <body> má ve výchozím stavu nastavený margin, tak by se nám hlavička zobrazila odsazená od okraje stránky, což by nevypadalo pěkně. Proto mu v našem existujícím selektoru body nastavíme margin na 0:

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

Logo jsme vložili do HTML jako <div>, což je pro zopakování element určený pouze ke stylování a nemající žádný další význam. V logu máme pouze elementy s textem. Rádi bychom v něm však ještě měli jednoduchý obrázek. To zařídíme pomocí CSS, konkrétně tak, že jej umístíme na pozadí daného elementu <div>. Je to alternativa k vložení loga přes obrázek pomocí HTML tagu <img>. Výhodou je, že se s obrázkem lépe pracuje a lépe se pozicuje, když je na pozadí. Do obsahu článku (pro vložené ilustrační fotografie apod.) se tento přístup příliš nehodí, v rozvržení je naopak užitečný.

Jako obrázek loga použijeme tento:

Moderní webdesign

Obrázek si stáhněte z článku pomocí pravého tlačítka myši a uložte do naší složky obrazky/ pod názvem logo.png.

Nabízí se i použití nějaké pěkné ikony, kde je hledat již víte.

Pro nastylování tagu <div> loga si do našeho CSS souboru napíšeme nový ID selektor. Začneme nastavením výšky a vnějšího okraje margin:

#logo {
    height: 40px;
    margin: auto 0 auto 20px;
}

Výšku loga jsme nastavili na 40 pixelů. Vnější okraj jsme pak nastavili shora a zespodu na automatický (auto), díky čemuž se hodnota automaticky dopočítá a logo se vertikálně vycentruje v dostupném prostoru, zprava na 0 a zleva na 20 pixelů.

Dále z loga uděláme flexbox, který bude skládat elementy do sloupce (flex-direction: column). Děláme tak proto, abychom mohli jeho obsah vertikálně (ve směru sloupce) vycentrovat pomocí dnes již zmiňované vlastnosti justify-content s hodnotou center:

#logo {
    height: 40px;
    margin: auto 0 auto 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Naučili jsme se tedy další způsob, jak centrovat obsah, tentokrát svisle :)

Obrázek v pozadí

Nyní si již přidáme do pozadí loga stažený obrázek. Velikost obrázku nastavíme na 40x40 pixelů a zařídíme, aby se v pozadí neopakoval. Ve výchozím chování se totiž obrázek opakuje tak, aby vyplnil celou dostupnou plochu:

#logo {
    height: 40px;
    margin: auto 0 auto 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url('obrazky/logo.png') no-repeat;
    background-size: 40px 40px;
}

Používáme zde nám již známou vlastnost background, která je v tomto případě zkratkou za vlastnosti:

  • background-image - slouží k nastavení obrázku v pozadí. Adresu obrázku jí předáme pomocí funkce url().
  • background-repeat - určuje, jestli se má obrázek opakovat, případně jak. My nastavujeme hodnotu no-repeat, aby se neopakoval. O dalších hodnotách se dočtete v CSS3 kurzu, v lekci Pozadí elementů: velikost, pozice a přichycení v CSS3.

Dále zde pak ještě máme novou vlastnost background-size, kterou určujeme velikost obrázku v pozadí.

Kdybychom si nyní web zobrazili, tak by se nám text i obrázky překrývaly. Takové chování však nechceme, proto všem elementům v logu nastavíme vnější okraj zleva na 50px. Napíšeme si nový selektor, kterým vybereme všechny přímé potomky elementu s ID logo. Všechny elementy jakéhokoliv typu vybíráme pomocí hvězdičky *:

#logo > * {
    margin: 0 0 0 50px;
}

Stylování elementů loga

Ostylujeme také nadpis <h1>, konkrétně tloušťku písma, velikost písma a výšku řádku:

#logo h1 {
    font-weight: normal;
    font-size: 1.5em;
    line-height: 1.2em;
    color: white;
}

Dále si ostylujeme obsah nesémantického tagu <span>, který slouží pouze ke stylování. Chceme zvýraznit příjmení Bittner, proto mu nastavíme tučný font a vypíšeme jej velkými písmeny:

#logo h1 span {
    font-weight: bold;
    text-transform: uppercase;
}

Nakonec ještě nastavíme velikost písma i tagu <small>:

#logo small {
    text-transform: uppercase;
    font-size: 0.85em;
}

Takhle nyní bude vypadat naše logo a navigace:

Moje první webová stránka
index.html

Příloha našeho rozpracovaného webu je opět připojena pod článkem.

V další lekci, Stylování navigačního menu pomocí flexboxu, nastylujeme navigačním menu.


 

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

 

Předchozí článek
Navigační menu, patička a HTML entity
Všechny články v sekci
Moderní webdesign
Přeskočit článek
(nedoporučujeme)
Stylování navigačního menu pomocí flexboxu
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
2616 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity