Lekce 13 - Stylování hlavičky HTML stránky

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.

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

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.

Abychom mohli umístit elementy v hlavičce, tedy logo a navigační menu, vedle sebe, tak přidáme ještě vlastnost display s hodnotou flex. Z hlavičky se tak stane nám již známý 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 obsahu podél směru flexboxu. 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 třeba v našem CSS manuálu.

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;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0;
}

Logo

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:

Obrázek si stáhneme a uložíme 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

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 třeba v našem CSS manuálu.

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 50 pixelů. 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:

Moje první webová stránka

index.html

Zbývá nastylovat navigační menu. Nejprve seznamu v navigaci změníme odrážky. Dělá se to CSS vlastností list-style-type, k výběru máme následující hodnoty:

circle - Kruhové
decimal - Číslované
decimal-leading-zero - Číslované na 2 místa (před čísla menší než 10 přidá nulu)
disc (výchozí) - Vyplněný kruh
lower-alpha - Malá písmena latinské abecedy
lower-greek - Malá písmena řecké abecedy
lower-latin - Malá písmena latinské abecedy
lower-roman - Římské číslice malými písmeny
none - Bez odrážek
square - Čtvercové
upper-alpha - Velká písmena latinské abecedy
upper-greek - Velká písmena řecké abecedy
upper-latin - Velká písmena latinské abecedy
upper-roman - Řecké číslice velkými písmeny
inherit - Zdědí typ odrážek od rodičovského elementu.

Jak různé typy vypadají máte jako vždy ukázáno v českém CSS 3 manuálu. Nás bude nyní zajímat hodnota none, která odrážky vypne.

Nastavíme tedy tento styl danému seznamu a zároveň mu vypneme vnější okraje (tím zmizí volné místo nahoře). Dále si ze seznamu uděláme flexbox, aby se nám prvky menu zobrazovaly vedle sebe, což již dobře známe:

nav ul {
    margin: 0;
    list-style-type: none;
    display: flex;
}

Položky seznamu budeme chtít mít vertikálně vycentrované. Ukážeme si nový způsob, jak toho dosáhnout pomocí flexboxu. Již víme, že pomocí vlastnosti justify-content definujeme, jak velký je prostor mezi a kolem položek obsahu podél směru flexboxu. Řešíme pomocí ní tedy umístění položek ve směru flexboxu (pro nás nyní v řádku). Existuje však i vlastnost pro definici umístění ve druhém směru, a to vlastnost align-items. Této vlastnosti můžeme opět nastavit mnoho hodnot, viz náš CSS manuál, my použijeme hodnotu center pro vycentrování položek:

nav ul {
    margin: 0;
    list-style-type: none;
    display: flex;
    align-items: center;
    height: 100%;
}

Zároveň jsme ještě seznam roztáhli přes celou výšku navigačního menu (height: 100%), aby jeho položky byly opravdu ve středu menu.

Zbývá nějak domluvit položkám seznamu, aby vedle sebe vypadaly lépe. Přidáme jim proto nějaké odsazení pomocí padding a margin, změníme velikost fontu a výšku řádku:

nav ul li {
    padding: 0 25px;
    margin: 0 5px;
    font-size: 1em;
    line-height: 4.3em;
}

Odkazy nebudeme chtít modré, ale bílé. Obarvit je není nic těžkého. Jak vypnout podtržení a vypsat je velkými písmeny již také víme:

nav ul a {
    color: white;
    padding: 8px 0;
    text-decoration: none;
    text-transform: uppercase;
}

Zbývá jen nastavit podtržení aktivní položce (položce stránky, na které se aktuálně vyskytujeme) a položce, na kterou najedeme myší. Styl budou mít stejný, proto si pro ně napíšeme pouze jeden selektor. Využijeme zde parametru (pseudoselektoru) :hover, který spouští akci po najetí myší na prvek na stránce. Aktivní položku vybereme pomocí třídy aktivni:

nav ul a:hover, .aktivni a {
    border-bottom: 2px solid #EF6534;
}

Výsledek vypadá takto:

Moje první webová stránka

index.html

Projekt pro kontrolu naleznete jako vždy ke stažení v příloze.

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

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

Uživatelské hodnocení:

493 hlasů

David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 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

Komentáře

Zobrazit starší komentáře (234)

Aleš Chytil

Člen

Aleš Chytil:24. září 19:31

Naprosto výstižně řečeno. Jsem rád, že nejsem sám, kdo to takhle vidí:-)

Odpovědět

24. září 19:31

Aspoň jsem to zkusil

Soňa Handlová

Člen

Soňa Handlová:27. září 18:21

já se teda přidávám do skupiny jednoho velkého guláše . Nevzdávám to, ale tohle pochopit nezabere jenom 2 hodiny denně. Asi budu muset dát jedno dítě k adopci abych zvládla kurz dodělat .

Odpovědět

27. září 18:21

Martin Maksa

Člen

Martin Maksa:21. října 16:40

tady je toho strašně moc najednou, za mě lepší rozložit na 2 kratší lekce. Pro někoho může být frustrující množství nových informací a motivace dokončit lekci najednou je nízká. (já to zvládl, ale mám hlavu jak balón)

Odpovědět

21. října 16:40

Renáta Vyšatová

Člen

Renáta Vyšatová:23. října 1:34

Tato lekce byla podaná podle mě hezky, čitelně a srozumitelně. Vznikla spousta nových selektorů, ale když jsem sledovala řádek po řádku svůj html dokument, tak jsem rozumněla, co konkrétně stylujeme.

Odpovědět

23. října 1:34

Aleš Chytil

Člen

Odpovídá na Martin Maksa
Aleš Chytil:23. října 4:29

Na to jste na tom ještě relativně dobře s tím balónem 🙂, já mám hlavu jako vzducholoď🙂

Odpovědět

23. října 4:29

Aspoň jsem to zkusil

Aleš Chytil

Člen

Odpovídá na Soňa Handlová
Aleš Chytil:23. října 4:33

Strašně mě rozesmál váš komentář s adopcí dítěte 😀. Výstižné, asi budu muset udělat to samé, možná budu muset dát k adopci obě děti i s manželkou.

Odpovědět

23. října 4:33

Aspoň jsem to zkusil

Vlastimil Candra

Člen

Vlastimil Candra:2. listopadu 21:22

nesmyslné popisování, které nevede k naučení látky.

Odpovědět

2. listopadu 21:22

Karolína Švarcová

Člen

Karolína Švarcová:6. listopadu 17:23

V téhle lekci bylo až moc informací, najednou se to pobrat nedá, nicméně, musí se to zkoušet.

Odpovědět

6. listopadu 17:23

Adam Peer

Člen

Adam Peer:11. listopadu 10:26

Kvalitní lekce, je ale potřeba tomu dát více času a zkoušet vlastní projekty.

Odpovědět

11. listopadu 10:26

Jan Trnka

Člen

Jan Trnka:12. listopadu 11:12

Vše co je v lekci popisované do sebe výborně zapadá.

Odpovědět

12. listopadu 11:12

Junior programátor, plat 50.000 Kč/měsíc. Líbí? Do 6.000 Kč ho z tebe uděláme.

Zjistit více...

Junior programátor, plat 50.000 Kč/měsíc. Líbí? Do 6.000 Kč ho z tebe uděláme.

Vyzkoušet zdarma

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 244. Zobrazit vše