[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.33,0:00:02.44,Default,,0000,0000,0000,,Podívejme se na naší webovou stránku.
Dialogue: 0,0:00:02.44,0:00:04.54,Default,,0000,0000,0000,,Máme tu tyto hlavní nadpisy,
Dialogue: 0,0:00:04.54,0:00:07.58,Default,,0000,0000,0000,,odstavec popisující králíky
Dialogue: 0,0:00:07.58,0:00:10.59,Default,,0000,0000,0000,,a dále tu je několik odstavců,
Dialogue: 0,0:00:10.59,0:00:13.42,Default,,0000,0000,0000,,s textem mé oblíbené písničky o králících.
Dialogue: 0,0:00:13.54,0:00:17.55,Default,,0000,0000,0000,,Posledně jsme stylovali první\Nodstavec pomocí identifikátoru.
Dialogue: 0,0:00:17.86,0:00:21.02,Default,,0000,0000,0000,,Ale teď máme odstavců víc
Dialogue: 0,0:00:21.02,0:00:24.08,Default,,0000,0000,0000,,a chci je mít všechny se žlutým pozadím.
Dialogue: 0,0:00:24.61,0:00:27.69,Default,,0000,0000,0000,,Jak bychom to mohli udělat\Npomocí toho, co už známe?
Dialogue: 0,0:00:28.22,0:00:30.37,Default,,0000,0000,0000,,Nejprve jsme se naučili,
Dialogue: 0,0:00:30.37,0:00:33.00,Default,,0000,0000,0000,,jak vybrat všechny tagy určitého typu,
Dialogue: 0,0:00:33.00,0:00:34.66,Default,,0000,0000,0000,,například pomocí selektoru 'p'.
Dialogue: 0,0:00:34.89,0:00:39.12,Default,,0000,0000,0000,,Ale tím bychom obarvili všechny\Nodstavce, ne jen ty s písničkou.
Dialogue: 0,0:00:39.23,0:00:41.29,Default,,0000,0000,0000,,Potřebujeme něco konkrétnějšího.
Dialogue: 0,0:00:41.51,0:00:44.90,Default,,0000,0000,0000,,Potom jsme se naučili jak vybírat\Ntagy pomocí jejich vlastního ID,
Dialogue: 0,0:00:44.90,0:00:48.14,Default,,0000,0000,0000,,jako když jsme vybrali odstavec\Ns identifikátorem "rabbit-song".
Dialogue: 0,0:00:48.37,0:00:50.92,Default,,0000,0000,0000,,Ale tím jsme zase vybrali\Njenom první odstavec.
Dialogue: 0,0:00:51.12,0:00:53.72,Default,,0000,0000,0000,,A to IDčko už nemůžeme\Npřidat k ostatním odstavcům,
Dialogue: 0,0:00:53.72,0:00:57.66,Default,,0000,0000,0000,,protože nemůžeme použít\Njedno stejné ID u různých tagů.
Dialogue: 0,0:00:57.87,0:01:00.20,Default,,0000,0000,0000,,Kdybychom chtěli vybrat\Ni ty ostatní odstavce,
Dialogue: 0,0:01:00.20,0:01:02.88,Default,,0000,0000,0000,,museli bychom každému\Nz nich dát nové IDčko,
Dialogue: 0,0:01:02.88,0:01:05.72,Default,,0000,0000,0000,,(například "song-lyrics2"\Na "song-lyrics3"),
Dialogue: 0,0:01:05.72,0:01:07.57,Default,,0000,0000,0000,,protože každé ID\Nmusí být jedinečné.
Dialogue: 0,0:01:07.57,0:01:09.95,Default,,0000,0000,0000,,A pak bychom pro každý z nich\Nmuseli přidat pravidla.
Dialogue: 0,0:01:09.95,0:01:12.40,Default,,0000,0000,0000,,To by šlo, ale fíha,\Nto je strašně moc práce.
Dialogue: 0,0:01:12.40,0:01:14.21,Default,,0000,0000,0000,,A u každé nové sloky písničky,
Dialogue: 0,0:01:14.21,0:01:17.28,Default,,0000,0000,0000,,bychom nesměli zapomenout\Nna přidání dalšího IDčka do HTML
Dialogue: 0,0:01:17.28,0:01:19.02,Default,,0000,0000,0000,,a dalšího ID do CSS pravidel,
Dialogue: 0,0:01:19.02,0:01:22.83,Default,,0000,0000,0000,,a kdybychom chtěli přidat sto\Nslok, tak pojdeme únavou.
Dialogue: 0,0:01:22.98,0:01:24.32,Default,,0000,0000,0000,,Ale, hádejte co?
Dialogue: 0,0:01:24.49,0:01:27.38,Default,,0000,0000,0000,,Existuje lepší způsob. Říkáme mu "třídy".
Dialogue: 0,0:01:27.60,0:01:29.01,Default,,0000,0000,0000,,Třída je v podstatě způsob,
Dialogue: 0,0:01:29.01,0:01:32.07,Default,,0000,0000,0000,,kterým můžeme přidat\Nlibovolný element do nějaké skupiny.
Dialogue: 0,0:01:32.16,0:01:35.15,Default,,0000,0000,0000,,A do této skupiny můžeme přidat\Nlibovolný počet elementů.
Dialogue: 0,0:01:35.35,0:01:39.93,Default,,0000,0000,0000,,Třídu přidáme podobně jako ID,\Npotřebujeme atribut "class".
Dialogue: 0,0:01:40.36,0:01:44.70,Default,,0000,0000,0000,,Takže nejprve ještě smažu to IDčko,\Nprotože ho nahradíme.
Dialogue: 0,0:01:44.70,0:01:47.92,Default,,0000,0000,0000,,Teď mám kurzor na začátku tagu .
Dialogue: 0,0:01:47.92,0:01:51.68,Default,,0000,0000,0000,,Přidáme mezeru a napíšeme:\Nclass rovná se uvozovky
Dialogue: 0,0:01:52.07,0:01:55.33,Default,,0000,0000,0000,,Teď musíme vymyslet,\Njak se třída bude jmenovat.
Dialogue: 0,0:01:55.33,0:01:56.93,Default,,0000,0000,0000,,Hezké popisné jméno.
Dialogue: 0,0:01:56.93,0:01:59.62,Default,,0000,0000,0000,,Nazveme ji "song-lyrics",
Dialogue: 0,0:01:59.66,0:02:01.66,Default,,0000,0000,0000,,tedy česky "text-písně".
Dialogue: 0,0:02:01.66,0:02:04.34,Default,,0000,0000,0000,,Jaké další elementy by\Nměly mít tuto třídu?
Dialogue: 0,0:02:04.42,0:02:07.67,Default,,0000,0000,0000,,No, přece všechny ostatní\Nodstavce s textem písničky.
Dialogue: 0,0:02:07.67,0:02:10.12,Default,,0000,0000,0000,,Takže musíme jít dolů
Dialogue: 0,0:02:10.12,0:02:14.17,Default,,0000,0000,0000,,a přidat stejný atribut\Nke všem odstavcům.
Dialogue: 0,0:02:14.84,0:02:18.00,Default,,0000,0000,0000,,Tak, super.\NTeď už můžeme přidat CSS pravidlo.
Dialogue: 0,0:02:18.22,0:02:20.54,Default,,0000,0000,0000,,Půjdeme zpátky nahoru do tagu 
Dialogue: 0,0:02:20.54,0:02:26.16,Default,,0000,0000,0000,,a smažeme náš ID selektor z minula,\Nprotože ho už nebudeme potřebovat.
Dialogue: 0,0:02:26.16,0:02:29.28,Default,,0000,0000,0000,,A teď musíme vytvořit\Nselektor pro naši třídu.
Dialogue: 0,0:02:29.28,0:02:34.04,Default,,0000,0000,0000,,Selektor třídy vždycky začíná tečkou.
Dialogue: 0,0:02:34.43,0:02:39.03,Default,,0000,0000,0000,,Hned za ní napíšeme jméno třídy:\Nsong-lyrics
Dialogue: 0,0:02:39.03,0:02:46.42,Default,,0000,0000,0000,,a potom jako vždy, složené závorky,\Nvlastnost, dvojtečka, hodnota.
Dialogue: 0,0:02:46.63,0:02:47.58,Default,,0000,0000,0000,,Ta-dá!
Dialogue: 0,0:02:47.82,0:02:51.01,Default,,0000,0000,0000,,Celý text písničky má žluté pozadí.
Dialogue: 0,0:02:51.34,0:02:55.14,Default,,0000,0000,0000,,A co by se stalo, kdybychom\Ntady to "s" napsali velké?
Dialogue: 0,0:02:55.24,0:02:56.40,Default,,0000,0000,0000,,Nefunguje to.
Dialogue: 0,0:02:56.49,0:02:59.40,Default,,0000,0000,0000,,To proto, že u názvů tříd\Nzáleží na velikosti písmen.
Dialogue: 0,0:02:59.40,0:03:02.43,Default,,0000,0000,0000,,Anglicky této vlastnosti\Nříkáme case-sensitive,
Dialogue: 0,0:03:02.43,0:03:04.32,Default,,0000,0000,0000,,neboli citlivé na velikost.
Dialogue: 0,0:03:04.32,0:03:08.30,Default,,0000,0000,0000,,A co by se stalo, kdybychom\Nmísto tečky napsali křížek?
Dialogue: 0,0:03:08.54,0:03:10.14,Default,,0000,0000,0000,,Zase to nefunguje.
Dialogue: 0,0:03:10.14,0:03:13.08,Default,,0000,0000,0000,,Protože takhle si prohlížeč myslí,\Nže "song-lyrics" je ID,
Dialogue: 0,0:03:13.08,0:03:16.41,Default,,0000,0000,0000,,a protože v atributu ID nic nenajde,
Dialogue: 0,0:03:16.41,0:03:17.58,Default,,0000,0000,0000,,tak to vzdá.
Dialogue: 0,0:03:18.10,0:03:24.51,Default,,0000,0000,0000,,A co se stane, když do našeho\Njména přidáme mezery?
Dialogue: 0,0:03:25.25,0:03:27.48,Default,,0000,0000,0000,,Hm, to taky nefunguje,
Dialogue: 0,0:03:27.48,0:03:29.100,Default,,0000,0000,0000,,protože v názvech tříd mezery být nesmí.
Dialogue: 0,0:03:30.19,0:03:31.65,Default,,0000,0000,0000,,A později uvidíme,
Dialogue: 0,0:03:31.65,0:03:34.97,Default,,0000,0000,0000,,že mezera má ve světě CSS\Nsvůj vlastní význam.
Dialogue: 0,0:03:35.87,0:03:38.78,Default,,0000,0000,0000,,Tak to zase vrátíme zpátky.
Dialogue: 0,0:03:39.52,0:03:41.11,Default,,0000,0000,0000,,Takže ještě jednou:
Dialogue: 0,0:03:41.11,0:03:43.39,Default,,0000,0000,0000,,Když chceme přidat třídu,
Dialogue: 0,0:03:43.39,0:03:45.59,Default,,0000,0000,0000,,vymyslíme jméno třídy,
Dialogue: 0,0:03:45.59,0:03:49.00,Default,,0000,0000,0000,,přidáme ho do atributu\Nclass v HTML.
Dialogue: 0,0:03:49.25,0:03:51.32,Default,,0000,0000,0000,,Potom napíšeme pravidlo stylu,
Dialogue: 0,0:03:51.32,0:03:54.69,Default,,0000,0000,0000,,které začíná s tečkou\Na pokračuje jménem třídy.
Dialogue: 0,0:03:55.22,0:03:59.10,Default,,0000,0000,0000,,A teď je vaše CSS opravdu třída!