WEBVTT 00:00:00.326 --> 00:00:02.435 Podívejme se na naší webovou stránku. 00:00:02.435 --> 00:00:04.540 Máme tu tyto hlavní nadpisy, 00:00:04.540 --> 00:00:07.581 odstavec popisující králíky 00:00:07.581 --> 00:00:10.588 a dále tu je několik odstavců, 00:00:10.588 --> 00:00:13.416 s textem mé oblíbené písničky o králících. 00:00:13.543 --> 00:00:17.554 Posledně jsme stylovali první odstavec pomocí identifikátoru. 00:00:17.857 --> 00:00:21.016 Ale teď máme odstavců víc 00:00:21.016 --> 00:00:24.083 a chci je mít všechny se žlutým pozadím. 00:00:24.613 --> 00:00:27.692 Jak bychom to mohli udělat pomocí toho, co už známe? 00:00:28.221 --> 00:00:30.374 Nejprve jsme se naučili, 00:00:30.374 --> 00:00:33.002 jak vybrat všechny tagy určitého typu, 00:00:33.002 --> 00:00:34.659 například pomocí selektoru 'p'. 00:00:34.886 --> 00:00:39.120 Ale tím bychom obarvili všechny odstavce, ne jen ty s písničkou. 00:00:39.226 --> 00:00:41.290 Potřebujeme něco konkrétnějšího. 00:00:41.507 --> 00:00:44.898 Potom jsme se naučili jak vybírat tagy pomocí jejich vlastního ID, 00:00:44.898 --> 00:00:48.140 jako když jsme vybrali odstavec s identifikátorem "rabbit-song". 00:00:48.368 --> 00:00:50.920 Ale tím jsme zase vybrali jenom první odstavec. 00:00:51.120 --> 00:00:53.725 A to IDčko už nemůžeme přidat k ostatním odstavcům, 00:00:53.725 --> 00:00:57.657 protože nemůžeme použít jedno stejné ID u různých tagů. 00:00:57.867 --> 00:01:00.202 Kdybychom chtěli vybrat i ty ostatní odstavce, 00:01:00.202 --> 00:01:02.881 museli bychom každému z nich dát nové IDčko, 00:01:02.881 --> 00:01:05.717 (například "song-lyrics2" a "song-lyrics3"), 00:01:05.717 --> 00:01:07.568 protože každé ID musí být jedinečné. 00:01:07.568 --> 00:01:09.948 A pak bychom pro každý z nich museli přidat pravidla. 00:01:09.948 --> 00:01:12.398 To by šlo, ale fíha, to je strašně moc práce. 00:01:12.398 --> 00:01:14.211 A u každé nové sloky písničky, 00:01:14.211 --> 00:01:17.279 bychom nesměli zapomenout na přidání dalšího IDčka do HTML 00:01:17.279 --> 00:01:19.018 a dalšího ID do CSS pravidel, 00:01:19.018 --> 00:01:22.830 a kdybychom chtěli přidat sto slok, tak pojdeme únavou. 00:01:22.980 --> 00:01:24.315 Ale, hádejte co? 00:01:24.492 --> 00:01:27.383 Existuje lepší způsob. Říkáme mu "třídy". 00:01:27.599 --> 00:01:29.009 Třída je v podstatě způsob, 00:01:29.009 --> 00:01:32.067 kterým můžeme přidat libovolný element do nějaké skupiny. 00:01:32.162 --> 00:01:35.150 A do této skupiny můžeme přidat libovolný počet elementů. 00:01:35.352 --> 00:01:39.928 Třídu přidáme podobně jako ID, potřebujeme atribut "class". 00:01:40.362 --> 00:01:44.705 Takže nejprve ještě smažu to IDčko, protože ho nahradíme. 00:01:44.705 --> 00:01:47.915 Teď mám kurzor na začátku tagu . 00:01:47.915 --> 00:01:51.675 Přidáme mezeru a napíšeme: class rovná se uvozovky 00:01:52.073 --> 00:01:55.333 Teď musíme vymyslet, jak se třída bude jmenovat. 00:01:55.333 --> 00:01:56.927 Hezké popisné jméno. 00:01:56.927 --> 00:01:59.624 Nazveme ji "song-lyrics", 00:01:59.658 --> 00:02:01.665 tedy česky "text-písně". 00:02:01.665 --> 00:02:04.335 Jaké další elementy by měly mít tuto třídu? 00:02:04.416 --> 00:02:07.674 No, přece všechny ostatní odstavce s textem písničky. 00:02:07.674 --> 00:02:10.124 Takže musíme jít dolů 00:02:10.124 --> 00:02:14.167 a přidat stejný atribut ke všem odstavcům. 00:02:14.836 --> 00:02:18.003 Tak, super. Teď už můžeme přidat CSS pravidlo. 00:02:18.217 --> 00:02:20.539 Půjdeme zpátky nahoru do tagu 00:02:20.539 --> 00:02:26.157 a smažeme náš ID selektor z minula, protože ho už nebudeme potřebovat. 00:02:26.157 --> 00:02:29.284 A teď musíme vytvořit selektor pro naši třídu. 00:02:29.284 --> 00:02:34.039 Selektor třídy vždycky začíná tečkou. 00:02:34.426 --> 00:02:39.027 Hned za ní napíšeme jméno třídy: song-lyrics 00:02:39.027 --> 00:02:46.415 a potom jako vždy, složené závorky, vlastnost, dvojtečka, hodnota. 00:02:46.633 --> 00:02:47.575 Ta-dá! 00:02:47.821 --> 00:02:51.007 Celý text písničky má žluté pozadí. 00:02:51.343 --> 00:02:55.143 A co by se stalo, kdybychom tady to "s" napsali velké? 00:02:55.240 --> 00:02:56.398 Nefunguje to. 00:02:56.491 --> 00:02:59.404 To proto, že u názvů tříd záleží na velikosti písmen. 00:02:59.404 --> 00:03:02.431 Anglicky této vlastnosti říkáme case-sensitive, 00:03:02.431 --> 00:03:04.323 neboli citlivé na velikost. 00:03:04.323 --> 00:03:08.295 A co by se stalo, kdybychom místo tečky napsali křížek? 00:03:08.542 --> 00:03:10.144 Zase to nefunguje. 00:03:10.144 --> 00:03:13.085 Protože takhle si prohlížeč myslí, že "song-lyrics" je ID, 00:03:13.085 --> 00:03:16.411 a protože v atributu ID nic nenajde, 00:03:16.411 --> 00:03:17.584 tak to vzdá. 00:03:18.102 --> 00:03:24.512 A co se stane, když do našeho jména přidáme mezery? 00:03:25.248 --> 00:03:27.477 Hm, to taky nefunguje, 00:03:27.477 --> 00:03:29.997 protože v názvech tříd mezery být nesmí. 00:03:30.192 --> 00:03:31.649 A později uvidíme, 00:03:31.649 --> 00:03:34.972 že mezera má ve světě CSS svůj vlastní význam. 00:03:35.868 --> 00:03:38.776 Tak to zase vrátíme zpátky. 00:03:39.523 --> 00:03:41.110 Takže ještě jednou: 00:03:41.110 --> 00:03:43.387 Když chceme přidat třídu, 00:03:43.387 --> 00:03:45.589 vymyslíme jméno třídy, 00:03:45.589 --> 00:03:49.000 přidáme ho do atributu class v HTML. 00:03:49.248 --> 00:03:51.317 Potom napíšeme pravidlo stylu, 00:03:51.317 --> 00:03:54.691 které začíná s tečkou a pokračuje jménem třídy. 00:03:55.216 --> 00:03:59.098 A teď je vaše CSS opravdu třída!