Vianoce v ITnetwork sú tu! Dobí si teraz kredity a získaj až 80 % extra kreditov na e-learningové kurzy ZADARMO. Zisti viac.
Hľadáme nové posily do ITnetwork tímu. Pozri sa na voľné pozície a pridaj sa k najagilnejšej firme na trhu - Viac informácií.

17. diel - Štýlovanie hlavičky HTML stránky a flexbox

Predchádzajúci
Ďalší

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 oštýlujeme hlavičku a pätičku stránky. Ukážeme si tiež preskladanie položiek elementu pomocou flexboxu.

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

Výsledná webová stránka - Webové stránky krok za krokom

Hlavička

Pusťme sa najskôr do štýlovania 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 pozadiu a písmu.

Flexbox

Pre usporiadanie hlavičky sa naučíme využívať Flexbox (Flexible Box). Jedná sa o jednorozmernú "prepravku", ktorá nám umožňuje skladať položky nejakého elementu za seba. Jednorozmerná 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 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 hlavička je teraz flexboxom, tak jej môžeme nastaviť vlastnosť justify-content. Táto vlastnosť definuje, aký veľký je priestor medzi položkami a okolo nich. 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 rovnaký priestor:

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 sme vložili do HTML ako <div>, čo je pre zopakovanie element určený iba na štýlovanie a nemá žiaden ď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 tak, že ho umiestnime na pozadie 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 pozicionuje, 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:

Logo - Webové stránky krok za krokom

Obrázok si stiahnite z článku pomocou pravého tlačidla myši a uložte do nášho priečinka images/ pod názvom logo.png.

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

Pre naštýlovanie 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('images/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, konkrétne v lekcii Pozadia elementov - Veľkosť, pozícia a prichytenie v CSS3.

Ďalej tu ešte máme novú vlastnosť background-size, ktorou 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šetkých priamych potomkov elementu s ID logo. Všetky elementy akéhokoľvek typu vyberáme pomocou hviezdičky *:

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

Štýlovanie elementov loga

Oštýlujeme 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 oštýlujeme obsah nesémantického tagu <span>, ktorý slúži iba na štýlovanie. 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:

Sam Bittner - Web Developer
index.html

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

V ďalšej lekcii, Štýlovanie navigačného menu pomocou flexboxu, naštýlujeme navigačné 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é 59x (2.29 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

Predchádzajúci článok
Navigačné menu, pätička a HTML entity
Všetky články v sekcii
Webové stránky krok za krokom
Preskočiť článok
(neodporúčame)
Štýlovanie navigačného menu pomocou flexboxu
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
68 hlasov
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 sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity