[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:01.34,Default,,0000,0000,0000,,Naučili jsme se,
Dialogue: 0,0:00:01.34,0:00:03.07,Default,,0000,0000,0000,,jak vytvořit celou webovou stránku,
Dialogue: 0,0:00:03.07,0:00:05.44,Default,,0000,0000,0000,,se všemi druhy textů a obrázků.
Dialogue: 0,0:00:05.44,0:00:07.98,Default,,0000,0000,0000,,Ale trochu tomu chybí styl.
Dialogue: 0,0:00:07.98,0:00:09.58,Default,,0000,0000,0000,,Moje stránka\Nvypadá úplně stejně
Dialogue: 0,0:00:09.58,0:00:10.94,Default,,0000,0000,0000,,jako vaše webová stránka.
Dialogue: 0,0:00:10.94,0:00:13.77,Default,,0000,0000,0000,,Černý text, bílé pozadí, \Nten samý druh písma.
Dialogue: 0,0:00:13.77,0:00:15.78,Default,,0000,0000,0000,,Uspořádáno od horního\Nokraje až k dolnímu.
Dialogue: 0,0:00:15.78,0:00:17.40,Default,,0000,0000,0000,,Určitě jste na internetu viděli,
Dialogue: 0,0:00:17.40,0:00:20.31,Default,,0000,0000,0000,,že každá webová stránka\Nvypadá trochu jinak.
Dialogue: 0,0:00:20.31,0:00:21.83,Default,,0000,0000,0000,,Zde na Khan Academy
Dialogue: 0,0:00:21.83,0:00:24.74,Default,,0000,0000,0000,,také máme různé barvy,\Npísma a velikosti.
Dialogue: 0,0:00:24.74,0:00:28.03,Default,,0000,0000,0000,,Klidně se podívejte i teď,\Nzastavte si toto video
Dialogue: 0,0:00:28.03,0:00:29.91,Default,,0000,0000,0000,,a podívejte se na několik různých webů.
Dialogue: 0,0:00:29.91,0:00:31.54,Default,,0000,0000,0000,,V čem se od sebe liší?
Dialogue: 0,0:00:31.54,0:00:35.07,Default,,0000,0000,0000,,Co se vám na nich líbí nebo naopak nelíbí?
Dialogue: 0,0:00:35.07,0:00:37.24,Default,,0000,0000,0000,,Já na vás tady počkám.
Dialogue: 0,0:00:38.15,0:00:40.91,Default,,0000,0000,0000,,Důležité je si všimnout, jak\Nrůzné stránky mohou vypadat,
Dialogue: 0,0:00:40.91,0:00:42.91,Default,,0000,0000,0000,,protože se brzy naučíte,
Dialogue: 0,0:00:42.91,0:00:44.68,Default,,0000,0000,0000,,jak odlišit vaši stránku od jiných.
Dialogue: 0,0:00:44.68,0:00:46.01,Default,,0000,0000,0000,,Stylem, který se vám
Dialogue: 0,0:00:46.01,0:00:48.54,Default,,0000,0000,0000,,líbí, protože\Nvás to jednak reprezentuje,
Dialogue: 0,0:00:48.54,0:00:51.21,Default,,0000,0000,0000,,ale také se to líbí\Nostatním návštěvníkům.
Dialogue: 0,0:00:51.21,0:00:52.94,Default,,0000,0000,0000,,Abychom to mohli udělat,
Dialogue: 0,0:00:52.94,0:00:55.61,Default,,0000,0000,0000,,musíme se naučit jazyk CSS,
Dialogue: 0,0:00:55.61,0:00:57.77,Default,,0000,0000,0000,,neboli kaskádové styly,
Dialogue: 0,0:00:57.77,0:00:59.75,Default,,0000,0000,0000,,kterým určíme styly,\Nkteré se poté použijí
Dialogue: 0,0:00:59.75,0:01:01.88,Default,,0000,0000,0000,,na různých částech naší stránky.
Dialogue: 0,0:01:01.88,0:01:06.37,Default,,0000,0000,0000,,CSS použijeme uvnitř HTML,\Nale ve skutečnosti to není HTML,
Dialogue: 0,0:01:06.37,0:01:08.04,Default,,0000,0000,0000,,takže se musíme naučit nový jazyk,
Dialogue: 0,0:01:08.04,0:01:11.21,Default,,0000,0000,0000,,a nesmíme si plést HTML s CSS.
Dialogue: 0,0:01:11.21,0:01:13.38,Default,,0000,0000,0000,,Naučíme se, jak použít CSS\Nk různým stylům
Dialogue: 0,0:01:13.38,0:01:15.28,Default,,0000,0000,0000,,naší stránky, jako jsou písma,
Dialogue: 0,0:01:15.28,0:01:17.43,Default,,0000,0000,0000,,velikosti a uspořádání\Nobsahu, ale začneme
Dialogue: 0,0:01:17.43,0:01:19.07,Default,,0000,0000,0000,,s něčím zábavným.
Dialogue: 0,0:01:19.07,0:01:22.11,Default,,0000,0000,0000,,A to jsou barvy.\NCo třeba změnit barvu nadpisů,
Dialogue: 0,0:01:22.11,0:01:25.41,Default,,0000,0000,0000,,aby byly pěkně zelené jako tráva.
Dialogue: 0,0:01:25.41,0:01:28.41,Default,,0000,0000,0000,,Nejprve musíme přidat tag style
Dialogue: 0,0:01:28.41,0:01:30.41,Default,,0000,0000,0000,,do tagu head v naší stránce.
Dialogue: 0,0:01:31.50,0:01:33.50,Default,,0000,0000,0000,,Jakmile ji prohlížeč načte, řekne si:
Dialogue: 0,0:01:33.50,0:01:37.37,Default,,0000,0000,0000,,"Fajn, tady uvnitř je vše jen CSS."
Dialogue: 0,0:01:37.37,0:01:40.10,Default,,0000,0000,0000,,"Použiji můj CSS parser,\Nabych tomu rozuměl,
Dialogue: 0,0:01:40.10,0:01:42.80,Default,,0000,0000,0000,,ne HTML parser."
Dialogue: 0,0:01:43.47,0:01:48.27,Default,,0000,0000,0000,,Tady uvnitř teď přidáme\Npravidlo CSS stylu.
Dialogue: 0,0:01:48.27,0:01:50.25,Default,,0000,0000,0000,,Každé pravidlo má selektor, určující,
Dialogue: 0,0:01:50.25,0:01:51.72,Default,,0000,0000,0000,,jakou část obsahu má prohlížeč
Dialogue: 0,0:01:51.72,0:01:54.18,Default,,0000,0000,0000,,upravit, a obsah určující,
Dialogue: 0,0:01:54.18,0:01:56.94,Default,,0000,0000,0000,,jak má prohlížeč tuto část změnit.
Dialogue: 0,0:01:56.94,0:02:00.28,Default,,0000,0000,0000,,Pokud bychom chtěli změnit\Nvšechny nadpisy H2,
Dialogue: 0,0:02:00.28,0:02:05.28,Default,,0000,0000,0000,,jako selektor napíšeme H2\Na složené závorky.
Dialogue: 0,0:02:06.08,0:02:07.53,Default,,0000,0000,0000,,Musí být složené, ne hranaté
Dialogue: 0,0:02:07.53,0:02:10.13,Default,,0000,0000,0000,,nebo kulaté, jinak to nebude fungovat.
Dialogue: 0,0:02:10.13,0:02:12.81,Default,,0000,0000,0000,,Dovnitř napíšeme naši deklaraci,
Dialogue: 0,0:02:12.81,0:02:14.71,Default,,0000,0000,0000,,s vlastnostmi a hodnotami.
Dialogue: 0,0:02:14.71,0:02:18.67,Default,,0000,0000,0000,,Abychom změnili barvu,\Npoužijeme vlastnost color,
Dialogue: 0,0:02:19.31,0:02:22.90,Default,,0000,0000,0000,,poté napíšeme dvojtečku a hodnotu.
Dialogue: 0,0:02:22.90,0:02:25.77,Default,,0000,0000,0000,,Musíme říct prohlížeči,\Njakou barvu chceme.
Dialogue: 0,0:02:25.77,0:02:28.24,Default,,0000,0000,0000,,Mohli bychom napsat green (zelená),
Dialogue: 0,0:02:29.14,0:02:31.96,Default,,0000,0000,0000,,a prohlížeč by to pochopil,\Nprotože je to standardní barva,
Dialogue: 0,0:02:31.96,0:02:33.93,Default,,0000,0000,0000,,ale to není taková zelená,\Njakou chci já.
Dialogue: 0,0:02:33.93,0:02:35.91,Default,,0000,0000,0000,,Já chci trávově zelenou.
Dialogue: 0,0:02:35.91,0:02:39.55,Default,,0000,0000,0000,,Když bych napsala trávově zelenou,\Nhmmmm.
Dialogue: 0,0:02:39.55,0:02:41.91,Default,,0000,0000,0000,,Prohlížeč najednou nebude vědět,\Njakou barvu myslím
Dialogue: 0,0:02:41.91,0:02:43.71,Default,,0000,0000,0000,,a vrátí nadpisu černou barvu,
Dialogue: 0,0:02:43.71,0:02:45.71,Default,,0000,0000,0000,,protože nikdy neslyšel o trávově zelené.
Dialogue: 0,0:02:45.71,0:02:48.34,Default,,0000,0000,0000,,Pokud chceme definovat jakoukoliv barvu,
Dialogue: 0,0:02:48.34,0:02:51.56,Default,,0000,0000,0000,,potřebujeme něco, čemu\Nse říká RGB spektrum.
Dialogue: 0,0:02:51.56,0:02:54.18,Default,,0000,0000,0000,,Možná jste o něm slyšeli\Nv hodinách výtvarné výchovy.
Dialogue: 0,0:02:54.18,0:02:56.07,Default,,0000,0000,0000,,Ale nemusíte být experty na RGB,
Dialogue: 0,0:02:56.07,0:02:58.94,Default,,0000,0000,0000,,protože tu pro vás máme RGB\Nbarevnou paletu.
Dialogue: 0,0:02:58.94,0:03:03.94,Default,,0000,0000,0000,,Aby se zobrazila, nahraďte toto\NR-G-B a závorkami,
Dialogue: 0,0:03:04.07,0:03:06.12,Default,,0000,0000,0000,,a paleta vyskočí sama.
Dialogue: 0,0:03:06.12,0:03:08.15,Default,,0000,0000,0000,,Myší na ní můžete najet
Dialogue: 0,0:03:08.15,0:03:10.53,Default,,0000,0000,0000,,a vybrat si barvu,\Na vidíte, jak se barva mění
Dialogue: 0,0:03:10.53,0:03:14.58,Default,,0000,0000,0000,,okamžitě, a až si vyberete,\Ntak stačí kliknout na tu barvu.
Dialogue: 0,0:03:14.94,0:03:17.01,Default,,0000,0000,0000,,Všimli jste si těch tří čísel,
Dialogue: 0,0:03:17.01,0:03:20.41,Default,,0000,0000,0000,,která se měnila v našich RGB závorkách?
Dialogue: 0,0:03:20.41,0:03:22.94,Default,,0000,0000,0000,,To je červená, zelená a modrá
Dialogue: 0,0:03:22.94,0:03:25.87,Default,,0000,0000,0000,,složka výsledné barvy.
Dialogue: 0,0:03:26.50,0:03:29.98,Default,,0000,0000,0000,,Skvělé na našem CSS selektoru H2 je,
Dialogue: 0,0:03:29.98,0:03:33.70,Default,,0000,0000,0000,,že platí pro všechny nadpisy\NH2 na naší stránce,
Dialogue: 0,0:03:33.70,0:03:35.87,Default,,0000,0000,0000,,takže můžeme změnit najednou\Nněkolik nadpisů,
Dialogue: 0,0:03:35.87,0:03:39.19,Default,,0000,0000,0000,,protože chceme všechny H2 nadpisy zelené.
Dialogue: 0,0:03:39.19,0:03:42.70,Default,,0000,0000,0000,,Je to stejné pro všechny\NH2 nadpisy naší stránky.
Dialogue: 0,0:03:42.70,0:03:44.70,Default,,0000,0000,0000,,Jak budete pokračovat ve studiu CSS,
Dialogue: 0,0:03:44.70,0:03:47.59,Default,,0000,0000,0000,,naučíte se více způsobů, jak vybrat\Nrůzné části vaší stránky,
Dialogue: 0,0:03:47.59,0:03:50.14,Default,,0000,0000,0000,,třeba pokud chcete jen jeden nadpis H2.
Dialogue: 0,0:03:50.14,0:03:54.08,Default,,0000,0000,0000,,Se selektory tagů si můžete\Nvcelku dobře vystačit.
Dialogue: 0,0:03:54.57,0:03:56.40,Default,,0000,0000,0000,,Přidejme další CSS pravidlo.
Dialogue: 0,0:03:56.40,0:03:59.21,Default,,0000,0000,0000,,Teď uděláme pozadí\Nmodré jako nebe.
Dialogue: 0,0:03:59.21,0:04:02.08,Default,,0000,0000,0000,,Jak to uděláme?
Dialogue: 0,0:04:02.08,0:04:05.87,Default,,0000,0000,0000,,Který tag obaluje celou stránku?
Dialogue: 0,0:04:05.87,0:04:08.81,Default,,0000,0000,0000,,Není to tag H1, ani tag P,
Dialogue: 0,0:04:08.81,0:04:11.76,Default,,0000,0000,0000,,není to ani obrázek, ale body tag.
Dialogue: 0,0:04:11.76,0:04:14.41,Default,,0000,0000,0000,,Pamatujte si, že vše, co jde vidět,
Dialogue: 0,0:04:14.41,0:04:16.48,Default,,0000,0000,0000,,je uvnitř tagu body.
Dialogue: 0,0:04:16.48,0:04:18.63,Default,,0000,0000,0000,,Pokud chceme stylovat celou stránku,
Dialogue: 0,0:04:18.63,0:04:22.26,Default,,0000,0000,0000,,musíme použít selektor,\Nkterý vybere tento tag.
Dialogue: 0,0:04:22.71,0:04:24.53,Default,,0000,0000,0000,,Napíšeme tedy body.
Dialogue: 0,0:04:26.76,0:04:31.83,Default,,0000,0000,0000,,Místo color napíšeme\Nbackground-color, barva pozadí,
Dialogue: 0,0:04:31.83,0:04:33.10,Default,,0000,0000,0000,,dvojtečka
Dialogue: 0,0:04:33.32,0:04:36.24,Default,,0000,0000,0000,,a pak rgb a závorky.
Dialogue: 0,0:04:36.49,0:04:39.80,Default,,0000,0000,0000,,Vyskočí naše barevná paleta.
Dialogue: 0,0:04:39.80,0:04:41.93,Default,,0000,0000,0000,,A vyberu takovou modrou,
Dialogue: 0,0:04:41.93,0:04:45.70,Default,,0000,0000,0000,,která mi připomíná mráčky\Njako zajíčky na obloze.
Dialogue: 0,0:04:45.70,0:04:48.94,Default,,0000,0000,0000,,Tak, mám svoji stylovou stránku.
Dialogue: 0,0:04:49.48,0:04:51.64,Default,,0000,0000,0000,,Existují stovky CSS vlastností,
Dialogue: 0,0:04:51.64,0:04:54.24,Default,,0000,0000,0000,,kromě barvy a pozadí,
Dialogue: 0,0:04:54.24,0:04:56.91,Default,,0000,0000,0000,,ale tyhle jsou ty zábavné,\Nproto s nimi začínáme.
Dialogue: 0,0:04:56.91,0:04:59.32,Default,,0000,0000,0000,,Jakmile domluvím,\Nhrajte si klidně dál
Dialogue: 0,0:04:59.32,0:05:01.54,Default,,0000,0000,0000,,s barvami a upravte si tuto stránku
Dialogue: 0,0:05:01.54,0:05:05.17,Default,,0000,0000,0000,,podle vašich představ.
Dialogue: 0,0:05:05.17,0:05:06.53,Default,,0000,0000,0000,,Tak, jen do toho!