Lekce 13 - Pozadí webu a velikost elementů Nové
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é. O kombinování barev na webové stránce se dočtete v článku Jak na barvy.
Ve styl.css
nastavíme jednobarevné pozadí na
elementu <body>
pomocí vlastnosti background
takto:
background: #F9F9F9;
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ů
Výšku a šířku elementů nastavujeme pomocí vlastností
height
a width
. Těmto vlastnostem můžeme nastavit
především tyto hodnoty:
- Číselnou hodnotu s jednotkou - například
px
,em
nebo%
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í
zkontrolujeme nastavení šířky obrázku s třídou .avatar
z
konce předchozí lekce HTML
layout. Nastavíme také velikost hlavičky článku:
article header { height: 80px; } article h1, article h2, article h3, article h4, article h5, article h6 { color: #00386B; } .avatar { width: 300px; }
Všechny původní selektory nadpisů h1
,
h2
, h3
, h4
, h5
a
h6
ze souboru odebereme. Už je nebudeme potřebovat.
Složitější selektory
Objevuje se nám zde nový typ CSS selektorů, a to
takových, u kterých jednotlivé elementy neoddělujeme čárkou, ale pouze
mezerou. Prvním takovým selektorem je
article header
, který 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 např. 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 jen element <header>
, ale v budoucnu jich na stránce
budeme mít více, proto zde vkládáme na první místo ono
article
, abychom upřesnili výběr.
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
>
:
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.
Na selektoru
article h1, article h2, article h3, article h4, article h5, article h6
lze hezky vidět, že v jednom selektoru můžeme kombinovat více typů
selektorů. Tento selektor vybere nadpisy všech úrovní, které jsou v
jakémkoliv elementu <article>
.
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 omezíme na šířku 960px
pomocí vlastnosti max-width
:
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í 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.
article { max-width: 960px; margin: 0 auto; }
Zbylé styly
Dále přidáme selektory pro úpravu stylu prvních dvou úrovní nadpisů a odstavců s odkazy:
article h1 { font-size: 2.3em; font-weight: bold; text-transform: uppercase; width: max-content; } article h2 { font-size: 2em; } article section p { line-height: 1.8em; } article section a { color: #EF6534; }
Rozeberme si, co dělají jednotlivé použité vlastnosti:
- Vlastností
font-weight
určujeme, zda chceme text tučný nebo normální. Pro tučný text použijeme hodnotubold
. Pro normální text použijeme hodnotunormal
. Nadpisy jsou jako výchozí tučné, ale je dobré znát možnosti nastavení. - Vlastnost
text-transform
převede všechna písmena na velká (uppercase
), malá (lowercase
) nebo například vypíše všechna první písmena velká (capitalize
). - Vlastností
line-height
nastavíme výšku řádky.
Protože nadpis <h1>
článku budeme v
budoucnu podtrhávat a budeme chtít, aby jeho šířka nebyla delší než jeho
text, přidali jsme k němu width: max-content
. Nyní se tato
změna nijak neprojeví.
Další vlastnosti už známe, a tak si jejich účel v CSS jistě dokážeme
odvodit
A zde vidíme výsledek dnešní lekce (všimněme si, že se odsazení mění v závislosti na velikosti okna):
V rozložení budeme chtít mít nadpis vlevo a článek pod ním. Do pravé části později přemístíme fotografii. Nemá to žádný význam, jde pouze o design.
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 30x (2.27 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS