-
CSS také můžeme použít
ke změně velikosti našeho textu.
-
Jak můžete vidět porovnáním velikosti
nadpisů odstavců na stránce,
-
prohlížeč již nabízí základní styly
s rozdílnými velikostmi pro různé elementy.
-
Obyčejný text má nějakou velikost
a každý stupeň nadpisu má jinou velikost.
-
Občas chceme tyto velikosti poupravit.
-
A toho můžeme dosáhnout pomocí
CSS vlastnosti 'font-size'.
-
Například:
-
Co kdybychom chtěli, aby veškerý text
na naší stránce byl o trochu menší?
-
No, půjdeme do tagu
-
a přidáme CSS pravidlo pro tag .
-
A dovnitř přidáme vlastnost 'font-size'.
-
Jaká hodnota pro 'font-size'
by to měla být ?
-
A jak měříme velikost fontu?
-
To je vlastně dobrá otázka,
-
protože existuje nejméně
10 různých jednotek,
-
které CSS pro 'font-size' podporuje.
-
Začneme s jednotkou,
kterou jsme již potkali: pixely.
-
Pixely jsme použili při rozhodování,
jak velké chceme obrázky,
-
a v CSS je budeme také často používat.
-
Zkusme nastavit 11 pixelů.
-
Ha. Vše se zmenšilo.
-
Dokonce i nadpisy se zmenšily.
-
Proč se zmenšily i nadpisy?
-
Neměly by být nastavené již prohlížečem?
-
Ne.
-
Protože styl nadpisů prohlížeče není
nastavený pomocí pixelů.
-
Je určen jinou jednotkou,
kterou nazýváme "em".
-
A tato jednotka je relativní jednotkou,
-
což znamená, že písmo v nadpisech
bude úměrně velké běžnému písmu.
-
Ukážeme si, co tím myslím.
-
Pojďme do našeho pravidla
pro nadpisy ''
-
a přidejme vlastnost 'font-size'.
-
Tentokrát nepoužiji pixely,
musíme uvažovat relativně.
-
Kolikrát větší chceme mít ''
oproti zbytku těla stránky?
-
Možná… dvakrát?
-
Tím pádem napíšeme '2em'.
-
Ve skutečnosti si teď prohlížeč
vypočítal velikost fontu v pixelech.
-
Prohlížeč ví, že velikost písma
v těle je 11 pixelů.
-
A my jsme mu teď řekli, že ''
má být dvakrát větší.
-
Takže nyní všechny '' jsou
vysoké 22 pixelů.
-
Pokud změníme velikost písma
v těle stránky na 12 pixelů,
-
jak velké budou ''?
-
Správně, 24 pixelů.
-
Co když změníme velikost 'h2' na 1.5em?
(dejte pozor, v CSS píšeme desetinnou tečku místo čárky)
-
No, bude to 12 pixelů krát 1,5,
-
to je 18 pixelů.
-
Můžeme taky pro '' uvést velikost
v pixelech, stejně jako v '',
-
a bude to fungovat stejně.
-
Záleží to na tom,
co je pro vás jednodušší.
-
A jak jsem zmínila,
existuje mnoho dalších jednotek,
-
které můžeme použít místo pixelů nebo em.
-
Tyto dvě jsou nejpoužívanější,
ale pokud chcete vědět více,
-
navštivte dokumentaci
vlastnosti 'font-size',
-
nebo si najděte na internetu další tutoriály.
-
A teď s fontem vzhůru do oblak!
