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!