13. diel - Pozadie webu a veľkosť elementov
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. O kombinovaní farieb na webovej stránke sa dočítate v článku Ako na farby.
V styl.css nastavíme jednofarebné pozadie na
elemente <body> pomocou vlastnosti background
takto:
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:
K tomu treba podotknúť dve veci:
- Vždy je lepšie odkazovať na obrázok, ktorý máme fyzicky v zložke 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 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
Výšku a šírku elementov nastavujeme pomocou vlastností
height a width. Týmto vlastnostiam môžeme nastaviť
predovšetkým tieto hodnoty:
- Číselnú hodnotu s jednotkou - napríklad
px,emalebo% auto- veľkosť sa vypočíta a zvolí automaticky. Ide o predvolenú hodnotumax-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
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í skontrolujeme
nastavenie šírky obrázku s triedou .avatar z konca
predchádzajúcej lekcie HTML
layout. Nastavíme tiež veľkosť hlavičky článku:
Všetky
pôvodné selektory nadpisov h1, h2, h3,
h4, h5 a h6 zo súboru odoberieme. Už
ich nebudeme potrebovať.
Zložitejšie selektory
Objavuje sa nám tu nový typ CSS selektorov, a to takých,
pri ktorých jednotlivé elementy neoddeľujeme čiarkou, ale iba
medzerou. Prvým takým selektorom je
article header, ktorý 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 napr. len jeden článok av ňom jednu
hlavičku, bude to fungovať správne. V tejto chvíli by určite stačilo
vybrať len element <header>, ale v budúcnosti ich na
stránke budeme mať viac, preto tu vkladáme na prvé miesto ono
article, aby sme upresnili výber.
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>:
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 >:
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.
Na selektore
article h1, article h2, article h3, article h4, article h5, article h6
možno pekne vidieť, že v jednom selektore môžeme kombinovať viacero typov
selektorov. Tento selektor vyberie nadpisy všetkých úrovní, ktoré sú v
akomkoľvek elemente <article>.
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 obmedzíme na šírku 960px pomocou
vlastnosti max-width:
margin 0 auto - Centrovanie blokov
Článok je teraz užší, ale je prilepený na ľavej hrane monitora (a
užívateľ sedí v strede). Preto článok vycentrujeme. Dostávame sa do
situácie, keď 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.
Zvyšné štýly
Ďalej pridáme selektory na úpravu štýlu prvých dvoch úrovní nadpisov a odsekov s odkazmi:
Rozoberme si, čo robia jednotlivé použité vlastnosti:
- Vlastnosťou
font-weighturčujeme, či chceme text tučný alebo normálny. Pre tučný text použijeme hodnotubold. Pre normálny text použijeme hodnotunormal. Nadpisy sú ako predvolené tučné, ale je dobré poznať možnosti nastavenia. - Vlastnosť
text-transformprevedie všetky písmená na veľké (uppercase), malé (lowercase) alebo napríklad vypíše všetky prvé písmená veľké (capitalize). - Vlastnosťou
line-heightnastavíme výšku riadku.
<h1> článku budeme v budúcnosti
podčiarkovať a budeme chcieť, aby jeho šírka nebola dlhšia ako jeho text,
pridali sme k nemu width: max-content. Teraz sa táto zmena nijako
neprejaví.
Ďalšie vlastnosti už poznáme, a tak si ich účel v CSS určite dokážeme odvodiť:-)
A tu vidíme výsledok dnešnej lekcie (všimnime si, že sa odsadenie mení v závislosti od veľkosti okna):
V rozložení budeme chcieť mať nadpis vľavo a článok pod ním. Do pravej časti neskôr premiestnime fotografiu. Nemá to žiadny význam, ide iba o dizajn.
Aj k dnešnej lekcii nájdete súbor s naším projektom priamo pod článkom.
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é 567x (2.27 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS
David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.