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

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

V dnešnom HTML/CSS tutoriále sa pozrieme na štýlovanie 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 pozadie 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. Ak vás kombinovanie farieb zaujíma, viac sa o ňom môžete dočítať v lekcii Ako na farby v kurze User Experience.

V style.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 svetlosivé pozadie, čím sme sa zas trochu priblížili finálnemu webu:

Sam Bittner - Web Developer

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('images/background.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 obrázok sa z rôznych dôvodov nenačíta. Pre taký prípad je dobré tiež ešte pripísať nejakú farbu, ktorá bude v pozadí namiesto daného obrázku:

background: url('images/background.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.

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, šírku 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 style.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íklad 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, 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 a v ňom jednu hlavičku, bude to fungovať správne. V tejto chvíli by určite stačilo vybrať 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 article, aby sme upresnili, že tu myslíme hlavičku <header> v článku, nie hlavičku stránky.

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

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

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

Ak by 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 je už 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 použí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;
}

Oštýlovanie nadpisov

Podľa predlohy teraz naštýlujeme 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šimnite si, že sa odsadenie zo strán mení v závislosti od veľkosti okna):

Sam Bittner - Web Developer

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. lekcii 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é 41x (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:

71 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

Najčastejšie vyhľadávané

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

Oštýlovanie nadpisov

Zvyšné štýly

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