Lekce 13 - Pozadí webu a velikost elementů
V minulé lekci, HTML layout, jsme započali tvorbu layoutu.
V dnešním HTML/CSS tutoriálu se podíváme na stylování
pozadí pomocí vlastnosti background
, naučíme se
nastavit výšku a šířku elementů a další užitečné
styly.
Vlastnost
background
- Nastavení pozadí
Nyní se začneme zajímat o pozadí stránky. Zatímco dříve bylo běžné využívat barvy, pracovat s texturami a vytvářet barevný a veselý web (který ovšem neztrácel na čitelnosti!), dnes je moderní držet se zásad minimalismu. Pozadí většinou zůstává bílé, někdy ve světlých odstínech šedé. Pokud vás kombinování barev zajímá, více se o něm můžete dočíst v lekci Jak na barvy z kurzu User Experience.
Ve styl.css
nastavíme jednobarevné pozadí na
elementu <body>
pomocí vlastnosti background
. I
s předchozími styly bude selektor body
v CSS souboru vypadat
takto:
body { font: 14px "Poppins"; color: #414042; background: #F9F9F9; }
Výsledkem je světle šedé pozadí, čímž jsme se zas trochu přiblížili finálnímu webu:
Obrázek na pozadí
Zmiňme si jen, jak by to vypadalo, pokud bychom chtěli na pozadí využít
nějaký obrázek. Může se jednat o fotografii, ale třeba i
šum nebo texturu. Do vlastnosti background
můžeme vložit
url
daného obrázku. Vypadalo by to například takto:
background: url('obrazky/pozadi.png');
K tomu je nutné podotknout dvě věci:
- Vždy je lepší odkazovat na obrázek, který máme fyzicky ve složce projektu než na nějaký externí na internetu.
- Je dobré počítat s tím, že načíst obrázek je datově náročnější než vykreslit barvu, a může se stát, že se obrázek z různých důvodů nenačte. Pro takový případ je dobré stejně ještě připsat nějakou barvu, která bude v pozadí místo daného obrázku:
background: url('obrazky/pozadi.png') #F9F9F9;
Vlastnost background
je opět pouze zkratkou za
spoustu jiných vlastností, které se dají použít pro nastavení pozadí.
Barvu pozadí bychom mohli například nastavit taktéž pomocí vlastnosti
background-color
, obrázek bychom však pomocí ní do pozadí
nenastavili.
O stylování pozadí by toho vydalo na několik lekcí, zájemce opět
odkážeme na český CSS 3 manuál -
Pozadí. V našem webovém portfoliu budeme využívat na pozadí pouze
barvy
Vlastnosti
width
a height
- Výška a šířka elementů
Na stránce máme obrázek našeho avatara, kterému jsme v CSS již nastavili menší šířku, nicméně dané vlastnosti jsme detailně neprobrali. Pojďme to napravit.
Výšku a šířku elementů nastavujeme pomocí CSS vlastností
height
(výška) a width
(šířka). Těmto
vlastnostem můžeme nastavit především tyto hodnoty:
- Číselnou hodnotu s jednotkou - například pixely
px
, šířky písmene "M"em
nebo procenta%
auto
- velikost se vypočítá a zvolí automaticky. Jedná se o výchozí hodnotumax-content
- skutečná maximální šířka nebo výška obsahu. U textového obsahu to znamená, že se obsah vůbec nezalomí, i kdyby měl přetéctmin-content
- skutečná minimální šířka nebo výška obsahu. Například v případě šířky je to u textového obsahu šířka nejdelšího slova
Obě vlastnosti mají poté ještě minimální a maximální varianty, máme
tedy min-height
, min-width
, max-height
a
max-width
. Vlastnostmi min-height
a
min-width
nastavujeme minimální velikost daného
elementu a vlastnostmi max-height
a max-width
jeho
maximální velikost. Při počítání velikosti elementu
mají tyto vlastnosti přednost před vlastnostmi height
a
width
.
To znamená, že pokud bychom elementu nastavili šířku
width
na 200px
a max-width
na
100px
, tak element bude široký pouze 100px
.
Nyní si v souboru styl.css
na základě získaných vědomostí
nastavíme také výšku hlavičky článku na 80px
. Do CSS
přidáme nový selektor:
article header { height: 80px; }
Nové selektory můžete přidávat jednoduše na konec CSS souboru. Nebo je ideálně seřaďte tak, aby byly ty podobné u sebe a nestylovali jsme např. barvu hlavičky na začátku souboru a písmo hlavičky na konci souboru. Pokud dva selektory nepracují se stejnou vlastností stejného elementu, na jejich pořadí v CSS souboru nezáleží. Jinak platí, že pozdější selektor přepisuje ten, který byl v souboru dříve.
Složitější selektory
Objevuje se nám zde nový typ CSS selektoru, a to takový,
kde jednotlivé elementy neoddělujeme čárkou, ale pouze
mezerou. Selektor article header
vybere všechny
hlavičky všech článků na stránce (tedy všechny elementy
<header>
, vložené v elementu
<article>
).
Jelikož na stránce budeme mít vždy jen jeden článek a v něm jednu
hlavičku, bude to fungovat správně. V tuto chvíli by jistě stačilo vybrat
i jen element <header>
, protože na stránce jiný není. V
budoucnu ale bude další hlavička s logem i na začátku stránky, proto zde
vkládáme na první místo ono article
, abychom upřesnili, že
zde myslíme hlavičku <header>
v článku, nikoli
stránky.
Daný zápis by fungoval i v případě, že by byl
<header>
vložen v článku třeba ještě takto do tagu
<div>
:
<article> <div> <header> ... </header> </div> ... </article>
Selektoru stačí, že <header>
bude někde uvnitř
<article>
.
Kdybychom chtěli, aby selektor vybral jen přímo vnořený element
(hovoříme o dítěti - child
), použijeme znak
>
:
article > header { }
Nyní by se <header>
v příkladu výše nevybral,
jelikož není přímo v <article>
, ale je přímým potomkem
elementu <div>
.
To bylo jen malé odbočení, abychom si rozšířili zásobu selektorů. Jaký použijete je na vás.
Vlastnost max-width
-
Maximální šířka
Dnešní monitory jsou hodně široké a kdyby byl článek přes úplně
celou šířku prohlížeče, museli bychom jezdit očima dlouhou vzdálenost a
špatně by se četl. Weby proto omezují maximální šířku svých článků,
nejvíce je to asi vidět na novinových webech, kde jsou krátké články,
které jsou velmi úzké. Náš článek <article>
omezíme
na maximální šířku 960px
pomocí vlastnosti
max-width
. Přidáme další selektor:
article { max-width: 960px; }
margin 0 auto
-
Centrování bloků
Článek je nyní užší, ale je přilepený na levé hraně monitoru (a
uživatel sedí obvykle veprostřed ). Proto článek vycentrujeme. Dostáváme se do situace, kdy
potřebujeme vycentrovat blokový element (
<article>
) v
blokovém elementu (<body>
). Nejjednodušší způsob, který
funguje pouze pro jeden element, je nastavit vlastnost margin
. Ta
nám udává velikost vnějšího okraje daného elementu, tedy odsazení od
okolních elementů. My zde nastavíme velikost horního a dolního okraje na
0
a velikost bočních okrajů na hodnotu auto
, která
zajistí stejné odsazení z obou stran.
Vlastnosti margin
se budeme blíže věnovat dále
v kurzu, proto toto její použití můžeme zatím chápat pouze jako takovou
kouzelnou formulku, pomocí které lze centrovat blokové elementy.
Styl článku upravíme do následující podoby:
article { max-width: 960px; margin: 0 auto; }
Ostylování nadpisů
Podle předlohy nyní nastylujme všechny typy nadpisů
(<h1>
- <h6>
v článku
<article>
). Do CSS přidáme:
article h1, article h2, article h3, article h4, article h5, article h6 { color: #00386B; }
Všechny původní selektory nadpisů h1
,
h2
, h3
, h4
, h5
a
h6
ze souboru odebereme. Už je nebudeme potřebovat.
Dále upravíme font prvních dvou úrovní nadpisů. To uděláme zvlášť pomocí dalších selektorů:
article h1 { font-size: 2.3em; font-weight: bold; text-transform: uppercase; width: max-content; } article h2 { font-size: 2em; }
Použili jsme následující vlastnosti:
font-size
- Nadpisu<h1>
jsme nastavili velikost písma na 2,3 násobek písma rodiče a nadpisu<h2>
na dvojnásobek.font-weight
- Pro tučný text jsme nastavili hodnotu nabold
, pro normální text by to byla hodnotanormal
. Nadpisy jsou jako výchozí tučné, ale je dobré znát možnosti nastavení.text-transform
- První nadpis se vykreslí celý VELKÝMI PÍSMENY pomocí hodnotyuppercase
.max-content
- Šířku prvního nadpisu jsme omezili jen na šířku jeho obsahu, abychom jej později v kurzu mohli snáze podtrhnout. U dalších nadpisů nám nevadí, že element je širší, než text v nadpisu.
Zbylé styly
Dále přidáme selektory pro úpravu odstavců <p>
a
odkazů <a>
v obsahu článku
<section>
:
article section p { line-height: 1.8em; } article section a { color: #EF6534; }
U odstavců jsme zvýšili mezeru mezi řádky line-height
a
odkazy jsme nabarvili na oranžovo.
A zde vidíme výsledek dnešní lekce (všimněme si, že se odsazení ze stran mění v závislosti na velikosti okna):
I k dnešní lekci najdete soubor s naším projektem přímo pod článkem.
V následujícím cvičení, Řešené úlohy k 7.-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 1223x (2.27 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS