WEBVTT

00:00:00.000 --> 00:00:01.345
Naučili jsme se,

00:00:01.345 --> 00:00:03.074
jak vytvořit celou webovou stránku,

00:00:03.074 --> 00:00:05.440
se všemi druhy textů a obrázků.

00:00:05.440 --> 00:00:07.975
Ale trochu tomu chybí styl.

00:00:07.975 --> 00:00:09.583
Moje stránka
vypadá úplně stejně

00:00:09.583 --> 00:00:10.943
jako vaše webová stránka.

00:00:10.943 --> 00:00:13.774
Černý text, bílé pozadí, 
ten samý druh písma.

00:00:13.774 --> 00:00:15.776
Uspořádáno od horního
okraje až k dolnímu.

00:00:15.776 --> 00:00:17.396
Určitě jste na internetu viděli,

00:00:17.396 --> 00:00:20.308
že každá webová stránka
vypadá trochu jinak.

00:00:20.308 --> 00:00:21.833
Zde na Khan Academy

00:00:21.833 --> 00:00:24.735
také máme různé barvy,
písma a velikosti.

00:00:24.735 --> 00:00:28.031
Klidně se podívejte i teď,
zastavte si toto video

00:00:28.031 --> 00:00:29.911
a podívejte se na několik různých webů.

00:00:29.911 --> 00:00:31.543
V čem se od sebe liší?

00:00:31.543 --> 00:00:35.066
Co se vám na nich líbí nebo naopak nelíbí?

00:00:35.066 --> 00:00:37.240
Já na vás tady počkám.

00:00:38.148 --> 00:00:40.907
Důležité je si všimnout, jak
různé stránky mohou vypadat,

00:00:40.907 --> 00:00:42.914
protože se brzy naučíte,

00:00:42.914 --> 00:00:44.683
jak odlišit vaši stránku od jiných.

00:00:44.683 --> 00:00:46.006
Stylem, který se vám

00:00:46.006 --> 00:00:48.537
líbí, protože
vás to jednak reprezentuje,

00:00:48.537 --> 00:00:51.211
ale také se to líbí
ostatním návštěvníkům.

00:00:51.211 --> 00:00:52.942
Abychom to mohli udělat,

00:00:52.942 --> 00:00:55.609
musíme se naučit jazyk CSS,

00:00:55.609 --> 00:00:57.767
neboli kaskádové styly,

00:00:57.767 --> 00:00:59.746
kterým určíme styly,
které se poté použijí

00:00:59.746 --> 00:01:01.877
na různých částech naší stránky.

00:01:01.877 --> 00:01:06.373
CSS použijeme uvnitř HTML,
ale ve skutečnosti to není HTML,

00:01:06.373 --> 00:01:08.045
takže se musíme naučit nový jazyk,

00:01:08.045 --> 00:01:11.211
a nesmíme si plést HTML s CSS.

00:01:11.211 --> 00:01:13.375
Naučíme se, jak použít CSS
k různým stylům

00:01:13.375 --> 00:01:15.278
naší stránky, jako jsou písma,

00:01:15.278 --> 00:01:17.434
velikosti a uspořádání
obsahu, ale začneme

00:01:17.434 --> 00:01:19.069
s něčím zábavným.

00:01:19.069 --> 00:01:22.107
A to jsou barvy.
Co třeba změnit barvu nadpisů,

00:01:22.107 --> 00:01:25.409
aby byly pěkně zelené jako tráva.

00:01:25.409 --> 00:01:28.407
Nejprve musíme přidat tag style

00:01:28.407 --> 00:01:30.408
do tagu head v naší stránce.

00:01:31.500 --> 00:01:33.504
Jakmile ji prohlížeč načte, řekne si:

00:01:33.504 --> 00:01:37.371
"Fajn, tady uvnitř je vše jen CSS."

00:01:37.371 --> 00:01:40.102
"Použiji můj CSS parser,
abych tomu rozuměl,

00:01:40.102 --> 00:01:42.802
ne HTML parser."

00:01:43.469 --> 00:01:48.270
Tady uvnitř teď přidáme
pravidlo CSS stylu.

00:01:48.270 --> 00:01:50.251
Každé pravidlo má selektor, určující,

00:01:50.251 --> 00:01:51.716
jakou část obsahu má prohlížeč

00:01:51.716 --> 00:01:54.177
upravit, a obsah určující,

00:01:54.177 --> 00:01:56.938
jak má prohlížeč tuto část změnit.

00:01:56.938 --> 00:02:00.276
Pokud bychom chtěli změnit
všechny nadpisy H2,

00:02:00.276 --> 00:02:05.276
jako selektor napíšeme H2
a složené závorky.

00:02:06.082 --> 00:02:07.533
Musí být složené, ne hranaté

00:02:07.533 --> 00:02:10.133
nebo kulaté, jinak to nebude fungovat.

00:02:10.133 --> 00:02:12.812
Dovnitř napíšeme naši deklaraci,

00:02:12.812 --> 00:02:14.711
s vlastnostmi a hodnotami.

00:02:14.711 --> 00:02:18.673
Abychom změnili barvu,
použijeme vlastnost color,

00:02:19.307 --> 00:02:22.904
poté napíšeme dvojtečku a hodnotu.

00:02:22.904 --> 00:02:25.774
Musíme říct prohlížeči,
jakou barvu chceme.

00:02:25.774 --> 00:02:28.242
Mohli bychom napsat green (zelená),

00:02:29.140 --> 00:02:31.956
a prohlížeč by to pochopil,
protože je to standardní barva,

00:02:31.956 --> 00:02:33.928
ale to není taková zelená,
jakou chci já.

00:02:33.928 --> 00:02:35.912
Já chci trávově zelenou.

00:02:35.912 --> 00:02:39.547
Když bych napsala trávově zelenou,
hmmmm.

00:02:39.547 --> 00:02:41.912
Prohlížeč najednou nebude vědět,
jakou barvu myslím

00:02:41.912 --> 00:02:43.707
a vrátí nadpisu černou barvu,

00:02:43.707 --> 00:02:45.707
protože nikdy neslyšel o trávově zelené.

00:02:45.707 --> 00:02:48.344
Pokud chceme definovat jakoukoliv barvu,

00:02:48.344 --> 00:02:51.564
potřebujeme něco, čemu
se říká RGB spektrum.

00:02:51.564 --> 00:02:54.180
Možná jste o něm slyšeli
v hodinách výtvarné výchovy.

00:02:54.180 --> 00:02:56.067
Ale nemusíte být experty na RGB,

00:02:56.067 --> 00:02:58.936
protože tu pro vás máme RGB
barevnou paletu.

00:02:58.936 --> 00:03:03.936
Aby se zobrazila, nahraďte toto
R-G-B a závorkami,

00:03:04.069 --> 00:03:06.120
a paleta vyskočí sama.

00:03:06.120 --> 00:03:08.146
Myší na ní můžete najet

00:03:08.146 --> 00:03:10.533
a vybrat si barvu,
a vidíte, jak se barva mění

00:03:10.533 --> 00:03:14.579
okamžitě, a až si vyberete,
tak stačí kliknout na tu barvu.

00:03:14.935 --> 00:03:17.010
Všimli jste si těch tří čísel,

00:03:17.010 --> 00:03:20.412
která se měnila v našich RGB závorkách?

00:03:20.412 --> 00:03:22.939
To je červená, zelená a modrá

00:03:22.939 --> 00:03:25.867
složka výsledné barvy.

00:03:26.502 --> 00:03:29.981
Skvělé na našem CSS selektoru H2 je,

00:03:29.981 --> 00:03:33.701
že platí pro všechny nadpisy
H2 na naší stránce,

00:03:33.701 --> 00:03:35.866
takže můžeme změnit najednou
několik nadpisů,

00:03:35.866 --> 00:03:39.189
protože chceme všechny H2 nadpisy zelené.

00:03:39.189 --> 00:03:42.704
Je to stejné pro všechny
H2 nadpisy naší stránky.

00:03:42.704 --> 00:03:44.703
Jak budete pokračovat ve studiu CSS,

00:03:44.703 --> 00:03:47.586
naučíte se více způsobů, jak vybrat
různé části vaší stránky,

00:03:47.586 --> 00:03:50.139
třeba pokud chcete jen jeden nadpis H2.

00:03:50.139 --> 00:03:54.078
Se selektory tagů si můžete
vcelku dobře vystačit.

00:03:54.574 --> 00:03:56.400
Přidejme další CSS pravidlo.

00:03:56.400 --> 00:03:59.210
Teď uděláme pozadí
modré jako nebe.

00:03:59.210 --> 00:04:02.077
Jak to uděláme?

00:04:02.077 --> 00:04:05.870
Který tag obaluje celou stránku?

00:04:05.870 --> 00:04:08.808
Není to tag H1, ani tag P,

00:04:08.808 --> 00:04:11.762
není to ani obrázek, ale body tag.

00:04:11.762 --> 00:04:14.412
Pamatujte si, že vše, co jde vidět,

00:04:14.412 --> 00:04:16.481
je uvnitř tagu body.

00:04:16.481 --> 00:04:18.630
Pokud chceme stylovat celou stránku,

00:04:18.630 --> 00:04:22.262
musíme použít selektor,
který vybere tento tag.

00:04:22.710 --> 00:04:24.534
Napíšeme tedy body.

00:04:26.764 --> 00:04:31.829
Místo color napíšeme
background-color, barva pozadí,

00:04:31.829 --> 00:04:33.102
dvojtečka

00:04:33.318 --> 00:04:36.245
a pak rgb a závorky.

00:04:36.491 --> 00:04:39.803
Vyskočí naše barevná paleta.

00:04:39.803 --> 00:04:41.933
A vyberu takovou modrou,

00:04:41.933 --> 00:04:45.703
která mi připomíná mráčky
jako zajíčky na obloze.

00:04:45.703 --> 00:04:48.944
Tak, mám svoji stylovou stránku.

00:04:49.480 --> 00:04:51.637
Existují stovky CSS vlastností,

00:04:51.637 --> 00:04:54.243
kromě barvy a pozadí,

00:04:54.243 --> 00:04:56.907
ale tyhle jsou ty zábavné,
proto s nimi začínáme.

00:04:56.907 --> 00:04:59.321
Jakmile domluvím,
hrajte si klidně dál

00:04:59.321 --> 00:05:01.544
s barvami a upravte si tuto stránku

00:05:01.544 --> 00:05:05.166
podle vašich představ.

00:05:05.166 --> 00:05:06.534
Tak, jen do toho!