Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
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í.
BF extended 2022

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

Navigační menu

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

 

Předchozí článek
Navigační menu, patička a HTML entity
Všechny články v sekci
Webové stránky krok za krokem
Přeskočit článek
(nedoporučujeme)
Řešené úlohy k 12.-13. lekci HTML a CSS
Článek pro vás napsal David Čápka
Avatar
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í.
Unicorn university 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)

Avatar
Aleš Chytil
Člen
Avatar
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
Avatar
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
Avatar
Martin Maksa
Člen
Avatar
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
Avatar
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
Avatar
Aleš Chytil
Člen
Avatar
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
Avatar
Aleš Chytil
Člen
Avatar
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
Avatar
Vlastimil Candra:2. listopadu 21:22

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

 
Odpovědět
2. listopadu 21:22
Avatar
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
Avatar
Adam Peer
Člen
Avatar
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
Avatar
Jan Trnka
Člen
Avatar
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
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