13. diel - Pozadie webu a veľkosť elementov

V minulej lekcii, HTML layout , sme začali tvorbu layoutu.

V dnešnom HTML/CSS tutoriále sa pozrieme na štylovanie pozadia pomocou vlastnosti background, naučíme sa nastaviť výšku a šírku elementov a ďalšie užitočné štýly.

Vlastnosť `background` - Nastavenie pozadia

Teraz sa začneme zaujímať o pozadí stránky. Zatiaľ čo predtým bolo bežné využívať farby, pracovať s textúrami a vytvárať farebný a veselý web (ktorý však nestrácal na čitateľnosti!), dnes je moderné držať sa zásad minimalizmu. Pozadie väčšinou zostáva biele, niekedy vo svetlých odtieňoch šedej. Pokiaľ vás kombinovanie farieb zaujíma, viac sa o ňom môžete dočítať v lekcii Ako na farby z kurzu User Experience.

V styl.css nastavíme jednofarebné pozadie na elemente <body> pomocou vlastnosti background. Aj s predchádzajúcimi štýlmi bude selektor body v CSS súbore vyzerať takto:

body {
    font: 14px "Poppins";
    color: #414042;
    background: #F9F9F9;
}

Výsledkom je svetlo šedé pozadie, čím sme sa zas trochu priblížili finálnemu webu:

Moje první webová stránka

index.html

Obrázok na pozadí

Spomeňme si len, ako by to vyzeralo, ak by sme chceli na pozadí využiť nejaký obrázok. Môže ísť o fotografiu, ale napríklad aj šum alebo textúru. Do vlastnosti background môžeme vložiť url daného obrázku. Vyzeralo by to napríklad takto:

background: url('obrazky/pozadi.png');

K tomu treba podotknúť dve veci:

Vždy je lepšie odkazovať na obrázok, ktorý máme fyzicky v priečinku projektu ako na nejaký externý na internete.
Je dobré počítať s tým, že načítať obrázok je dátovo náročnejšie ako vykresliť farbu, a môže sa stať, že sa obrázok z rôznych dôvodov nenačíta. Pre taký prípad je dobré rovnako ešte pripísať nejakú farbu, ktorá bude v pozadí namiesto daného obrázku:

background: url('obrazky/pozadi.png') #F9F9F9;

Vlastnosť background je opäť iba skratkou za množstvo iných vlastností, ktoré sa dajú použiť na nastavenie pozadia. Farbu pozadia by sme mohli napríklad nastaviť taktiež pomocou vlastnosti background-color, obrázok by sme však pomocou nej do pozadia nenastavili.

O štylovaní pozadia by toho vydalo na niekoľko lekcií, záujemcov opäť odkážeme na slovenský CSS 3 manuál - Pozadie. V našom webovom portfóliu budeme využívať na pozadí iba farby :-)

Vlastnosti `width` a `height` - Výška a šírka elementov

Na stránke máme obrázok nášho avatara, ktorému sme v CSS už nastavili menšiu šírku, ale dané vlastnosti sme detailne neprebrali. Poďme to napraviť.

Výšku a šírku elementov nastavujeme pomocou CSS vlastností height (výška) a width (šírka). Týmto vlastnostiam môžeme nastaviť predovšetkým tieto hodnoty:

Číselnú hodnotu s jednotkou - napríklad pixely px, šírky písmena "M" em alebo percentá %
auto - veľkosť sa vypočíta a zvolí automaticky. Ide o predvolenú hodnotu
max-content - skutočná maximálna šírka alebo výška obsahu. Pri textovom obsahu to znamená, že sa obsah vôbec nezalomí, aj keby mal pretiecť
min-content - skutočná minimálna šírka alebo výška obsahu. Napríklad v prípade šírky je to pri textovom obsahu šírka najdlhšieho slova

Obe vlastnosti majú potom ešte minimálne a maximálne varianty, máme teda min-height, min-width, max-height a max-width. Vlastnosťami min-height a min-width nastavujeme minimálnu veľkosť daného elementu a vlastnosťami max-height a max-width jeho maximálnu veľkosť. Pri počítaní veľkosti elementu majú tieto vlastnosti prednosť pred vlastnosťami height a width.

To znamená, že ak by sme elementu nastavili šírku width na 200px a max-width na 100px, tak element bude široký iba 100px.

Teraz si v súbore styl.css na základe získaných vedomostí nastavíme aj výšku hlavičky článku na 80px. Do CSS pridáme nový selektor:

article header {
    height: 80px;
}

Nové selektory môžete pridávať jednoducho na koniec CSS súboru. Alebo ich ideálne zoraďte tak, aby boli tie podobné pri sebe a neštýlovali sme napr. farbu hlavičky na začiatku súboru a písmo hlavičky na konci súboru. Ak dva selektory nepracujú s rovnakou vlastnosťou rovnakého elementu, na ich poradí v CSS súbore nezáleží. Inak platí, že neskorší selektor prepisuje ten, ktorý bol v súbore skôr.

Zložitejšie selektory

Objavuje sa nám tu nový typ CSS selektora, a to taký, kde jednotlivé elementy neoddeľujeme čiarkou, ale iba medzerou. Selektor article header vyberie všetky hlavičky všetkých článkov na stránke (teda všetky elementy <header>, vložené v elemente <article>).

Keďže na stránke budeme mať vždy len jeden článok av ňom jednu hlavičku, bude to fungovať správne. V tejto chvíli by určite stačilo vybrať aj len element <header>, pretože na stránke iný nie je. V budúcnosti ale bude ďalšia hlavička s logom aj na začiatku stránky, preto tu vkladáme na prvé miesto ono article, aby sme upresnili, že tu myslíme hlavičku <header> v článku, nie stránky.

Daný zápis by fungoval aj v prípade, že by bol <header> vložený v článku treba ešte takto do tagu <div>:

<article>
    <div>
        <header>
        ...
        </header>
    </div>
    ...
</article>

Selektoru stačí, že <header> bude niekde vo vnútri <article>.

Keby sme chceli, aby selektor vybral len priamo vnorený element (hovoríme o dieťati - child), použijeme znak >:

article > header {
}

Teraz by sa <header> v príklade vyššie nevybral, pretože nie je priamo v <article>, ale je priamym potomkom elementu <div>.

To bolo len malé odbočenie, aby sme si rozšírili zásobu selektorov. Aký použijete ich na vás.

Vlastnosť `max-width` - Maximálna šírka

Dnešné monitory sú veľmi široké a keby bol článok cez úplne celú šírku prehliadača, museli by sme jazdiť očami dlhú vzdialenosť a zle by sa čítal. Weby preto obmedzujú maximálnu šírku svojich článkov, najviac je to asi vidieť na novinových weboch, kde sú krátke články, ktoré sú veľmi úzke. Náš článok <article> obmedzíme na maximálnu šírku 960px pomocou vlastnosti max-width. Pridáme ďalší selektor:

article {
    max-width: 960px;
}

`margin 0 auto` - Centrovanie blokov

Článok je teraz užší, ale je prilepený na ľavej hrane monitora (a užívateľ sedí obvykle v strede:) ). Preto článok vycentrujeme. Dostávame sa do situácie, kedy potrebujeme vycentrovať blokový element (<article>) v blokovom elemente (<body>). Najjednoduchší spôsob, ktorý funguje iba pre jeden element, je nastaviť vlastnosť margin. Tá nám udáva veľkosť vonkajšieho okraja daného elementu, teda odsadenie od okolitých elementov. My tu nastavíme veľkosť horného a dolného okraja na 0 a veľkosť bočných okrajov na hodnotu auto, ktorá zaistí rovnaké odsadenie z oboch strán.

Vlastnosti margin sa budeme bližšie venovať ďalej v kurze, preto toto jej použitie môžeme zatiaľ chápať iba ako takú kúzelnú formulku, pomocou ktorej je možné centrovať blokové elementy.

Štýl článku upravíme do nasledujúcej podoby:

article {
    max-width: 960px;
    margin: 0 auto;
}

Ostylovanie nadpisov

Podľa predlohy teraz naštylujeme všetky typy nadpisov (<h1> - <h6> v článku <article>). Do CSS pridáme:

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
    color: #00386B;
}

Všetky pôvodné selektory nadpisov h1, h2, h3, h4, h5 a h6 zo súboru odoberieme. Už ich nebudeme potrebovať.

Ďalej upravíme font prvých dvoch úrovní nadpisov. To urobíme zvlášť pomocou ďalších selektorov:

article h1 {
    font-size: 2.3em;
    font-weight: bold;
    text-transform: uppercase;
    width: max-content;
}

article h2 {
    font-size: 2em;
}

Použili sme nasledujúce vlastnosti:

font-size - Nadpisu <h1> sme nastavili veľkosť písma na 2,3 násobok písma rodiča a nadpisu <h2> na dvojnásobok.
font-weight - Pre tučný text sme nastavili hodnotu na bold, pre normálny text by to bola hodnota normal. Nadpisy sú ako predvolené tučné, ale je dobré poznať možnosti nastavenia.
text-transform - Prvý nadpis sa vykreslí celý VEĽKÝMI PÍSMENAMI pomocou hodnoty uppercase.
max-content - Šírku prvého nadpisu sme obmedzili len na šírku jeho obsahu, aby sme ho neskôr v kurze mohli ľahšie podčiarknuť. Pri ďalších nadpisoch nám nevadí, že element je širší, než text v nadpise.

Zvyšné štýly

Ďalej pridáme selektory na úpravu odsekov <p> a odkazov <a> v obsahu článku <section>:

article section p {
    line-height: 1.8em;
}

article section a {
    color: #EF6534;
}

Pri odsekoch sme zvýšili medzeru medzi riadkami line-height a odkazy sme nafarbili na oranžovo.

A tu vidíme výsledok dnešnej lekcie (všimnime si, že sa odsadenie zo strán mení v závislosti od veľkosti okna):

Moje první webová stránka

index.html

Aj k dnešnej lekcii nájdete súbor s naším projektom priamo pod článkom.

V nasledujúcom cvičení, Riešené úlohy k 7.-13. lekciu HTML a CSS, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.

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é 600x (2.27 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:

1 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

13. diel - Pozadie webu a veľkosť elementov

Vlastnosť background - Nastavenie pozadia

Obrázok na pozadí

Vlastnosti width a height - Výška a šírka elementov

Zložitejšie selektory

Vlastnosť max-width - Maximálna šírka

margin 0 auto - Centrovanie blokov

Ostylovanie nadpisov

Stiahnuť

Vlastnosť `background` - Nastavenie pozadia

Vlastnosti `width` a `height` - Výška a šírka elementov

Vlastnosť `max-width` - Maximálna šírka

`margin 0 auto` - Centrovanie blokov