[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.10,0:00:02.34,Default,,0000,0000,0000,,Na této stránce pomocí CSS
Dialogue: 0,0:00:02.34,0:00:04.60,Default,,0000,0000,0000,,stylujeme naše `` nadpisy\N(dále navrhuju číst há dvojky) a odstavce tak,
Dialogue: 0,0:00:04.60,0:00:08.92,Default,,0000,0000,0000,,že všechny `` jsou zelené\Na všechny odstavce jsou fialové.
Dialogue: 0,0:00:09.54,0:00:13.46,Default,,0000,0000,0000,,Ale co kdybychom chtěli vybrat\Njen první `` nadpis
Dialogue: 0,0:00:13.46,0:00:16.46,Default,,0000,0000,0000,,nebo nastylovat\Njen druhý odstavec?
Dialogue: 0,0:00:16.72,0:00:19.87,Default,,0000,0000,0000,,Musíme najít způsob,\Njak prohlížeči říct,
Dialogue: 0,0:00:19.87,0:00:21.51,Default,,0000,0000,0000,,které z elementů chceme vybrat,
Dialogue: 0,0:00:21.51,0:00:24.93,Default,,0000,0000,0000,,aby se styly nepoužily všude,\Njako doposud.
Dialogue: 0,0:00:25.33,0:00:27.94,Default,,0000,0000,0000,,Prvním způsobem je výběr pomocí identifikátoru, neboli ID.
Dialogue: 0,0:00:28.26,0:00:30.52,Default,,0000,0000,0000,,Můžeme libovolnému tagu na naší\Nstránce přiřadit jedinečné ID
Dialogue: 0,0:00:30.52,0:00:32.18,Default,,0000,0000,0000,,a potom můžeme CSS říct,
Dialogue: 0,0:00:32.18,0:00:36.30,Default,,0000,0000,0000,,"Poslouchej: Chceme použít tyto styly\Njen pro element s tímto ID,
Dialogue: 0,0:00:36.30,0:00:38.21,Default,,0000,0000,0000,,pro žádné jiné ne."
Dialogue: 0,0:00:38.46,0:00:41.28,Default,,0000,0000,0000,,Abychom toho dosáhli, musíme\Nnejprve upravit HTML kód
Dialogue: 0,0:00:41.28,0:00:45.13,Default,,0000,0000,0000,,a přidat naše atributy id k tagům,\Nkteré chceme vybrat.
Dialogue: 0,0:00:45.74,0:00:48.37,Default,,0000,0000,0000,,Začneme tady s druhým odstavcem.
Dialogue: 0,0:00:48.53,0:00:50.90,Default,,0000,0000,0000,,Pro přidání atributu id\Nposuneme náš kurzor
Dialogue: 0,0:00:50.90,0:00:53.42,Default,,0000,0000,0000,,na začátek tagu ``\Nhned za p,
Dialogue: 0,0:00:53.42,0:00:58.36,Default,,0000,0000,0000,,přidáme jednu mezeru\Na za ní `id = "`
Dialogue: 0,0:00:58.98,0:01:02.67,Default,,0000,0000,0000,,Teď musíme vyplnit náš atribut id\Nnějakou hodnotou.
Dialogue: 0,0:01:02.81,0:01:04.18,Default,,0000,0000,0000,,Jaké ID mu mám dát?
Dialogue: 0,0:01:04.18,0:01:06.45,Default,,0000,0000,0000,,No, mělo by být popisné\Na jedinečné.
Dialogue: 0,0:01:06.51,0:01:09.23,Default,,0000,0000,0000,,Nic na této stránce nesmí mít stejné ID.
Dialogue: 0,0:01:09.48,0:01:15.08,Default,,0000,0000,0000,,Protože naše písnička je o králících,\Nid by mohlo být 'rabbits-song'.
Dialogue: 0,0:01:15.42,0:01:19.84,Default,,0000,0000,0000,,V atributu ID nemůžou být mezery,\Na pokud máme více slov,
Dialogue: 0,0:01:19.84,0:01:22.60,Default,,0000,0000,0000,,musíme je oddělit pomlčkami\Nnebo podtržítky.
Dialogue: 0,0:01:22.60,0:01:25.25,Default,,0000,0000,0000,,Já osobně mám nejradši pomlčky.
Dialogue: 0,0:01:25.65,0:01:28.94,Default,,0000,0000,0000,,Teď už umíme jednoznačně vybrat\Ntento odstavec.
Dialogue: 0,0:01:29.02,0:01:31.65,Default,,0000,0000,0000,,Takže můžeme přidat CSS\Npravidlo přímo pro něj.
Dialogue: 0,0:01:31.75,0:01:35.48,Default,,0000,0000,0000,,V druhém kroku se tedy vraťme \Nzpět k našemu tagu ``.
Dialogue: 0,0:01:35.60,0:01:38.43,Default,,0000,0000,0000,,Pod poslední pravidlo přidáme nový řádek.
Dialogue: 0,0:01:39.48,0:01:43.26,Default,,0000,0000,0000,,Nezapomeňte, první část CSS pravidla\Nje vždy selektor:
Dialogue: 0,0:01:43.26,0:01:46.10,Default,,0000,0000,0000,,ta část, která říká prohlížeči,\Nco přesně vybrat.
Dialogue: 0,0:01:46.10,0:01:51.13,Default,,0000,0000,0000,,V našich předchozích pravidlech jsme\Npoužívali selektory jako 'h2' a 'p'
Dialogue: 0,0:01:51.13,0:01:54.03,Default,,0000,0000,0000,,a tím jsme zvolili všechny tagy\N`` a `` na stránce.
Dialogue: 0,0:01:54.55,0:01:58.65,Default,,0000,0000,0000,,Teď když chceme selektor,\Nkterý vybere pouze elementy s určitým ID,
Dialogue: 0,0:01:58.67,0:02:01.18,Default,,0000,0000,0000,,náš selektor musí začínat křížkem.
Dialogue: 0,0:02:01.29,0:02:04.55,Default,,0000,0000,0000,,Tím prohlížeči řekneme,\Nže cokoliv za křížkem je ID.
Dialogue: 0,0:02:05.15,0:02:08.80,Default,,0000,0000,0000,,Teď napíšeme naše ID:\Nrabbits-song.
Dialogue: 0,0:02:09.60,0:02:11.88,Default,,0000,0000,0000,,Zbytek pravidla bude stejný jako doteď.
Dialogue: 0,0:02:11.93,0:02:14.35,Default,,0000,0000,0000,,Otevřeme a zavřeme naše složené závorky,
Dialogue: 0,0:02:14.35,0:02:17.84,Default,,0000,0000,0000,,přidáme vlastnost,\Ntřeba background-color...
Dialogue: 0,0:02:18.36,0:02:20.57,Default,,0000,0000,0000,,... a ta-dá! Zabralo to!
Dialogue: 0,0:02:20.87,0:02:23.93,Default,,0000,0000,0000,,Žlutou barvu má jen odstavec s písničkou,
Dialogue: 0,0:02:23.93,0:02:26.09,Default,,0000,0000,0000,,první odstavec se nezměnil.
Dialogue: 0,0:02:26.57,0:02:30.76,Default,,0000,0000,0000,,Pojďme si to zopakovat,\Nale vybereme náš první tag ``.
Dialogue: 0,0:02:31.13,0:02:32.87,Default,,0000,0000,0000,,Pamatujete si první krok?
Dialogue: 0,0:02:33.52,0:02:36.59,Default,,0000,0000,0000,,Správně. Nejdřív musíme upravit naše HTML
Dialogue: 0,0:02:36.59,0:02:38.28,Default,,0000,0000,0000,,a přidat atribut `id`.
Dialogue: 0,0:02:38.30,0:02:40.69,Default,,0000,0000,0000,,Takže náš kurzor hezky\Ndo otevíracího tagu,
Dialogue: 0,0:02:40.69,0:02:43.52,Default,,0000,0000,0000,,přidat mezeru, napsat `id=`
Dialogue: 0,0:02:43.58,0:02:46.69,Default,,0000,0000,0000,,a potom opět zcela\Njedinečné a popisné ID.
Dialogue: 0,0:02:46.79,0:02:49.94,Default,,0000,0000,0000,,Třeba, "rabbits-info-heading".
Dialogue: 0,0:02:50.69,0:02:54.04,Default,,0000,0000,0000,,Super, teď druhý krok.\NZpět do našeho tagu 'style',
Dialogue: 0,0:02:54.04,0:02:57.43,Default,,0000,0000,0000,,přidáme nový řádek,\Nnapíšeme křížek,
Dialogue: 0,0:02:57.43,0:03:01.84,Default,,0000,0000,0000,,potom naše ID,\Nrabbits-info-heading
Dialogue: 0,0:03:01.84,0:03:04.95,Default,,0000,0000,0000,,a pak vložíme naše vlastnosti\Ndo složených závorek
Dialogue: 0,0:03:04.95,0:03:08.62,Default,,0000,0000,0000,,background-color: purple;
Dialogue: 0,0:03:08.94,0:03:13.26,Default,,0000,0000,0000,,O-ou! Aha, něco se pokazilo.\NHmm... vidíte, kde je chyba?
Dialogue: 0,0:03:13.42,0:03:15.28,Default,,0000,0000,0000,,Napsala jsem to správně?
Dialogue: 0,0:03:15.36,0:03:18.30,Default,,0000,0000,0000,,rabbits-info-Heading,\Nrabbits-info-heading...
Dialogue: 0,0:03:18.48,0:03:21.05,Default,,0000,0000,0000,,Hmm... vypadají docela stejně.
Dialogue: 0,0:03:21.16,0:03:23.37,Default,,0000,0000,0000,,Můžu je projít písmeno po písmenu
Dialogue: 0,0:03:23.37,0:03:25.08,Default,,0000,0000,0000,,a zkusit najít chybu,
Dialogue: 0,0:03:25.08,0:03:29.63,Default,,0000,0000,0000,,ale já radši sjedu dolů,\Noznačím si naše ID z HTML
Dialogue: 0,0:03:29.68,0:03:33.81,Default,,0000,0000,0000,,a zkopíruju si ho, a potom ho vložím sem\Nnahoru, ať mám jistotu, že jsou přesně stejné.
Dialogue: 0,0:03:33.89,0:03:35.48,Default,,0000,0000,0000,,A... zabralo to!
Dialogue: 0,0:03:35.56,0:03:39.82,Default,,0000,0000,0000,,Moje h2 má nové pozadí.\NA všimli jste si, co se změnilo?
Dialogue: 0,0:03:40.08,0:03:44.47,Default,,0000,0000,0000,,Možná že jo. Bylo to tohle h.\NPředtím jsme použili velké H,
Dialogue: 0,0:03:44.47,0:03:47.00,Default,,0000,0000,0000,,a prohlížeč mezi velikostmi rozlišuje.
Dialogue: 0,0:03:47.10,0:03:50.23,Default,,0000,0000,0000,,Musí to být malé h, aby to bylo stejné\Njako v HTML kódu,
Dialogue: 0,0:03:50.32,0:03:52.85,Default,,0000,0000,0000,,protože v atributu ID záleží\Nna velikosti písmen.
Dialogue: 0,0:03:52.93,0:03:57.14,Default,,0000,0000,0000,,Takže je musíme napsat všude\Npřesně stejnou velikostí.
Dialogue: 0,0:03:57.51,0:04:01.75,Default,,0000,0000,0000,,Já nejradši používám pro moje IDčka\Npouze malá písmena,
Dialogue: 0,0:04:01.75,0:04:05.14,Default,,0000,0000,0000,,protože pak nemusím přemýšlet,\Njakou velikost jsem kde použila.
Dialogue: 0,0:04:05.16,0:04:08.40,Default,,0000,0000,0000,,Dobře, na závěr poslední upozornění:
Dialogue: 0,0:04:08.40,0:04:10.53,Default,,0000,0000,0000,,IDčka musí být jedinečná!
Dialogue: 0,0:04:10.65,0:04:13.44,Default,,0000,0000,0000,,Pokud máte na stránce dva tagy\Ns přesně stejným IDčkem,
Dialogue: 0,0:04:13.44,0:04:17.84,Default,,0000,0000,0000,,prohlížeč může nastylovat oba,\Nale taky může nastylovat jen jeden z nich.
Dialogue: 0,0:04:17.96,0:04:20.34,Default,,0000,0000,0000,,A to určitě nechceme ponechat náhodě.
Dialogue: 0,0:04:20.45,0:04:23.80,Default,,0000,0000,0000,,Takže chceme pěkná, jedinečná a popisná IDčka.