17. diel - Štylovanie hlavičky HTML stránky a flexbox

V minulej lekcii, Navigačné menu, pätička a HTML entity , sme si pripravili HTML kód hlavičky a pätičky.

Dnes si v HTML/CSS tutoriále ostylujeme hlavičku a pätičku stránky. Ukážeme si tiež preskladanie položiek elementu pomocou flexboxu.

Pripomeňme si na začiatok, aký výsledok vlastne chceme dosiahnuť:

Webové stránky krok za krokom - Webové stránky krok za krokom

Hlavička

Pusťme sa najskôr do štylovania hlavičky. Do nášho CSS súboru si vložíme nový selektor, ktorý postupne naplníme vlastnosťami. Začneme tými, ktoré už dobre poznáme:

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

Pomocou height a width hlavičke nastavujeme výšku na 100px a šírku na 100% šírky elementu, v ktorom je obsiahnutá. Hlavičku tak budeme mať roztiahnutú cez celú stránku. Vlastnosťami background a color dávame farbu pozadia a písmu.

Flexbox

Pre usporiadanie hlavičky sa naučíme využívať Flexbox (Flexible Box). Jedná sa o jednorozmernú "prípravku", ktorá nám umožňuje skladať položky nejakého elementu za seba. Jednorozmerná tu znamená, že sa rieši rozloženie iba v jednom smere - buď do riadku, alebo do stĺpca.

Flexbox nám okrem smeru skladania položiek umožňuje navyše ľahko nastaviť, v akom poradí sa majú položky skladať, koľko miesta majú jednotlivé položky zaberať, aké majú mať medzi sebou medzery a mnohé ďalšie.

Aby sme teda mohli umiestniť elementy v hlavičke (logo a navigačné menu) vedľa seba, tak pridáme vlastnosť display s hodnotou flex. Z hlavičky sa tak stane práve flexbox:

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

Vďaka tomu, že je teraz hlavička flexboxom, tak jej môžeme nastaviť vlastnosť justify-content. Táto vlastnosť definuje, aký veľký je priestor medzi a okolo položiek. V našom prípade bude riešiť priestor napravo a naľavo od každej položky flexboxu, pretože my máme nastavený smer nášho flexboxu na riadky (predvolená hodnota).

Tejto vlastnosti môžeme nastaviť vcelku veľa hodnôt. My využijeme hodnotu space-evenly, ktorá zaistí, že každá položka bude mať okolo seba rovnako priestoru:

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

O ďalších hodnotách sa dočítate v CSS3 kurze, v lekcii Pozícia prvku v CSS3.

Pretože <body> má v predvolenom stave nastavený margin, tak by sa nám hlavička zobrazila odsadená od okraja stránky, čo by nevyzeralo pekne. Preto mu v našom existujúcom selektore body nastavíme margin na 0:

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

Logo

Logo sme vložili do HTML ako <div>, čo je pre zopakovanie element určený iba na štylovanie a nemajúci žiadny ďalší význam. V logu máme iba elementy s textom. Radi by sme v ňom však ešte mali jednoduchý obrázok. To zariadime pomocou CSS, konkrétne tak, že ho umiestnime na pozadí daného elementu <div>. Je to alternatíva k vloženiu loga cez obrázok pomocou HTML tagu <img>. Výhodou je, že sa s obrázkom lepšie pracuje a lepšie sa pozíciuje, keď je na pozadí. Do obsahu článku (pre vložené ilustračné fotografie a pod.) sa tento prístup príliš nehodí, v rozvrhnutí je naopak užitočný.

Ako obrázok loga použijeme tento:

Obrázok si stiahnite z článku pomocou pravého tlačidla myši a uložte do našej zložky obrazky/ pod názvom logo.png.

Ponúka sa aj použitie nejakej peknej ikony, kde ich hľadať už viete.

Pre nastylovanie tagu <div> loga si do nášho CSS súboru napíšeme nový ID selektor. Začneme nastavením výšky a vonkajšieho okraja margin:

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

Výšku loga sme nastavili na 40 pixelov. Vonkajší okraj sme potom nastavili zhora a zospodu na automatický (auto), vďaka čomu sa hodnota automaticky dopočíta a logo sa vertikálne vycentruje v dostupnom priestore, sprava na 0 a zľava na 20 pixelov.

Ďalej z loga urobíme flexbox, ktorý bude skladať elementy do stĺpca (flex-direction: column). Robíme tak preto, aby sme mohli jeho obsah vertikálne (v smere stĺpca) vycentrovať pomocou dnes už spomínanej vlastnosti justify-content s hodnotou center:

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

Naučili sme sa teda ďalší spôsob, ako centrovať obsah, tentokrát zvisle

Obrázok v pozadí

Teraz si už pridáme do pozadia loga stiahnutý obrázok. Veľkosť obrázku nastavíme na 40x40 pixelov a zariadime, aby sa v pozadí neopakoval. V predvolenom správaní sa totiž obrázok opakuje tak, aby vyplnil celú dostupnú 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žívame tu nám už známu vlastnosť background, ktorá je v tomto prípade skratkou za vlastnosti:

background-image - slúži na nastavenie obrázku v pozadí. Adresu obrázku jej odovzdáme pomocou funkcie url().
background-repeat - určuje, či sa má obrázok opakovať, prípadne ako. My nastavujeme hodnotu no-repeat, aby sa neopakoval. O ďalších hodnotách sa dočítate v CSS3 kurze, v lekcii Pozadie elementov: veľkosť, pozícia a prichytenie v CSS3

Ďalej tu potom ešte máme novú vlastnosť background-size, ktorú určujeme veľkosť obrázku v pozadí.

Keby sme si teraz web zobrazili, tak by sa nám text aj obrázky prekrývali. Takéto správanie však nechceme, preto všetkým elementom v logu nastavíme vonkajší okraj zľava na 50px. Napíšeme si nový selektor, ktorým vyberieme všetky priame potomstvo elementu s ID logo. Všetky elementy akéhokoľvek typu vyberáme pomocou hviezdičky *:

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

Štylovanie elementov loga

Ostylujeme tiež nadpis <h1>, konkrétne hrúbku písma, veľkosť písma a výšku riadku:

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

Ďalej si ostylujeme obsah nesémantického tagu <span>, ktorý slúži iba na štylovanie. Chceme zvýrazniť priezvisko Bittner, preto mu nastavíme tučný font a vypíšeme ho veľkými písmenami:

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

Nakoniec ešte nastavíme veľkosť písma aj tagu <small>:

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

Takto teraz bude vyzerať naše logo a navigácia:

Moje první webová stránka

index.html

Príloha nášho rozpracovaného webu je opäť pripojená pod článkom.

V ďalšej lekcii, Štylovanie navigačného menu pomocou flexboxu , naštylujeme navigačnom menu.

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

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 8119x (2.28 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

2 hlasov

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

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity