WEBVTT

00:00:00.526 --> 00:00:03.525
CSS také můžeme použít
ke změně velikosti našeho textu.

00:00:03.666 --> 00:00:07.713
Jak můžete vidět porovnáním velikosti
nadpisů odstavců na stránce,

00:00:07.713 --> 00:00:12.352
prohlížeč již nabízí základní styly
s rozdílnými velikostmi pro různé elementy.

00:00:12.352 --> 00:00:16.452
Obyčejný text má nějakou velikost
a každý stupeň nadpisu má jinou velikost.

00:00:16.452 --> 00:00:18.857
Občas chceme tyto velikosti poupravit.

00:00:18.857 --> 00:00:22.206
A toho můžeme dosáhnout pomocí
CSS vlastnosti 'font-size'.

00:00:22.419 --> 00:00:23.853
Například:

00:00:23.853 --> 00:00:28.643
Co kdybychom chtěli, aby veškerý text
na naší stránce byl o trochu menší?

00:00:28.948 --> 00:00:31.062
No, půjdeme do tagu 

00:00:31.102 --> 00:00:34.889
a přidáme CSS pravidlo pro tag .

00:00:34.889 --> 00:00:39.247
A dovnitř přidáme vlastnost 'font-size'.

00:00:39.477 --> 00:00:42.669
Jaká hodnota pro 'font-size'
by to měla být ?

00:00:42.959 --> 00:00:45.654
A jak měříme velikost fontu?

00:00:45.930 --> 00:00:47.954
To je vlastně dobrá otázka,

00:00:47.954 --> 00:00:50.267
protože existuje nejméně
10 různých jednotek,

00:00:50.267 --> 00:00:52.358
které CSS pro 'font-size' podporuje.

00:00:52.684 --> 00:00:55.674
Začneme s jednotkou,
kterou jsme již potkali: pixely.

00:00:55.674 --> 00:00:58.923
Pixely jsme použili při rozhodování,
jak velké chceme obrázky,

00:00:58.923 --> 00:01:01.286
a v CSS je budeme také často používat.

00:01:01.286 --> 00:01:02.985
Zkusme nastavit 11 pixelů.

00:01:04.040 --> 00:01:06.145
Ha. Vše se zmenšilo.

00:01:06.405 --> 00:01:08.510
Dokonce i nadpisy se zmenšily.

00:01:08.786 --> 00:01:11.172
Proč se zmenšily i nadpisy?

00:01:11.363 --> 00:01:15.316
Neměly by být nastavené již prohlížečem?

00:01:15.502 --> 00:01:16.288
Ne.

00:01:16.432 --> 00:01:21.954
Protože styl nadpisů prohlížeče není
nastavený pomocí pixelů.

00:01:21.962 --> 00:01:25.207
Je určen jinou jednotkou,
kterou nazýváme "em".

00:01:25.495 --> 00:01:27.450
A tato jednotka je relativní jednotkou,

00:01:27.450 --> 00:01:31.695
což znamená, že písmo v nadpisech
bude úměrně velké běžnému písmu.

00:01:32.099 --> 00:01:34.055
Ukážeme si, co tím myslím.

00:01:34.055 --> 00:01:36.439
Pojďme do našeho pravidla
pro nadpisy ''

00:01:36.574 --> 00:01:38.904
a přidejme vlastnost 'font-size'.

00:01:39.446 --> 00:01:44.489
Tentokrát nepoužiji pixely,
musíme uvažovat relativně.

00:01:44.701 --> 00:01:49.903
Kolikrát větší chceme mít ''
oproti zbytku těla stránky?

00:01:50.173 --> 00:01:52.857
Možná… dvakrát?

00:01:53.305 --> 00:01:56.763
Tím pádem napíšeme '2em'.

00:01:56.992 --> 00:02:01.810
Ve skutečnosti si teď prohlížeč
vypočítal velikost fontu v pixelech.

00:02:01.810 --> 00:02:05.048
Prohlížeč ví, že velikost písma
v těle je 11 pixelů.

00:02:05.048 --> 00:02:08.055
A my jsme mu teď řekli, že ''
má být dvakrát větší.

00:02:08.055 --> 00:02:12.078
Takže nyní všechny '' jsou
vysoké 22 pixelů.

00:02:12.142 --> 00:02:16.576
Pokud změníme velikost písma
v těle stránky na 12 pixelů,

00:02:16.576 --> 00:02:18.932
jak velké budou ''?

00:02:19.267 --> 00:02:21.494
Správně, 24 pixelů.

00:02:21.494 --> 00:02:26.760
Co když změníme velikost 'h2' na 1.5em?
(dejte pozor, v CSS píšeme desetinnou tečku místo čárky)

00:02:26.760 --> 00:02:30.805
No, bude to 12 pixelů krát 1,5,

00:02:31.023 --> 00:02:32.666
to je 18 pixelů.

00:02:33.273 --> 00:02:37.754
Můžeme taky pro '' uvést velikost
v pixelech, stejně jako v '',

00:02:37.754 --> 00:02:39.521
a bude to fungovat stejně.

00:02:39.634 --> 00:02:41.692
Záleží to na tom,
co je pro vás jednodušší.

00:02:41.692 --> 00:02:45.258
A jak jsem zmínila,
existuje mnoho dalších jednotek,

00:02:45.258 --> 00:02:47.336
které můžeme použít místo pixelů nebo em.

00:02:47.336 --> 00:02:51.016
Tyto dvě jsou nejpoužívanější,
ale pokud chcete vědět více,

00:02:51.016 --> 00:02:53.193
navštivte dokumentaci
vlastnosti 'font-size',

00:02:53.193 --> 00:02:55.402
nebo si najděte na internetu další tutoriály.

00:02:55.503 --> 00:02:58.883
A teď s fontem vzhůru do oblak!