0:00:00.326,0:00:02.435
Podívejme se na naší webovou stránku.

0:00:02.435,0:00:04.540
Máme tu tyto hlavní nadpisy,

0:00:04.540,0:00:07.581
odstavec popisující králíky

0:00:07.581,0:00:10.588
a dále tu je několik odstavců,

0:00:10.588,0:00:13.416
s textem mé oblíbené písničky o králících.

0:00:13.543,0:00:17.554
Posledně jsme stylovali první[br]odstavec pomocí identifikátoru.

0:00:17.857,0:00:21.016
Ale teď máme odstavců víc

0:00:21.016,0:00:24.083
a chci je mít všechny se žlutým pozadím.

0:00:24.613,0:00:27.692
Jak bychom to mohli udělat[br]pomocí toho, co už známe?

0:00:28.221,0:00:30.374
Nejprve jsme se naučili,

0:00:30.374,0:00:33.002
jak vybrat všechny tagy určitého typu,

0:00:33.002,0:00:34.659
například pomocí selektoru 'p'.

0:00:34.886,0:00:39.120
Ale tím bychom obarvili všechny[br]odstavce, ne jen ty s písničkou.

0:00:39.226,0:00:41.290
Potřebujeme něco konkrétnějšího.

0:00:41.507,0:00:44.898
Potom jsme se naučili jak vybírat[br]tagy pomocí jejich vlastního ID,

0:00:44.898,0:00:48.140
jako když jsme vybrali odstavec[br]s identifikátorem "rabbit-song".

0:00:48.368,0:00:50.920
Ale tím jsme zase vybrali[br]jenom první odstavec.

0:00:51.120,0:00:53.725
A to IDčko už nemůžeme[br]přidat k ostatním odstavcům,

0:00:53.725,0:00:57.657
protože nemůžeme použít[br]jedno stejné ID u různých tagů.

0:00:57.867,0:01:00.202
Kdybychom chtěli vybrat[br]i ty ostatní odstavce,

0:01:00.202,0:01:02.881
museli bychom každému[br]z nich dát nové IDčko,

0:01:02.881,0:01:05.717
(například "song-lyrics2"[br]a "song-lyrics3"),

0:01:05.717,0:01:07.568
protože každé ID[br]musí být jedinečné.

0:01:07.568,0:01:09.948
A pak bychom pro každý z nich[br]museli přidat pravidla.

0:01:09.948,0:01:12.398
To by šlo, ale fíha,[br]to je strašně moc práce.

0:01:12.398,0:01:14.211
A u každé nové sloky písničky,

0:01:14.211,0:01:17.279
bychom nesměli zapomenout[br]na přidání dalšího IDčka do HTML

0:01:17.279,0:01:19.018
a dalšího ID do CSS pravidel,

0:01:19.018,0:01:22.830
a kdybychom chtěli přidat sto[br]slok, tak pojdeme únavou.

0:01:22.980,0:01:24.315
Ale, hádejte co?

0:01:24.492,0:01:27.383
Existuje lepší způsob. Říkáme mu "třídy".

0:01:27.599,0:01:29.009
Třída je v podstatě způsob,

0:01:29.009,0:01:32.067
kterým můžeme přidat[br]libovolný element do nějaké skupiny.

0:01:32.162,0:01:35.150
A do této skupiny můžeme přidat[br]libovolný počet elementů.

0:01:35.352,0:01:39.928
Třídu přidáme podobně jako ID,[br]potřebujeme atribut "class".

0:01:40.362,0:01:44.705
Takže nejprve ještě smažu to IDčko,[br]protože ho nahradíme.

0:01:44.705,0:01:47.915
Teď mám kurzor na začátku tagu .

0:01:47.915,0:01:51.675
Přidáme mezeru a napíšeme:[br]class rovná se uvozovky

0:01:52.073,0:01:55.333
Teď musíme vymyslet,[br]jak se třída bude jmenovat.

0:01:55.333,0:01:56.927
Hezké popisné jméno.

0:01:56.927,0:01:59.624
Nazveme ji "song-lyrics",

0:01:59.658,0:02:01.665
tedy česky "text-písně".

0:02:01.665,0:02:04.335
Jaké další elementy by[br]měly mít tuto třídu?

0:02:04.416,0:02:07.674
No, přece všechny ostatní[br]odstavce s textem písničky.

0:02:07.674,0:02:10.124
Takže musíme jít dolů

0:02:10.124,0:02:14.167
a přidat stejný atribut[br]ke všem odstavcům.

0:02:14.836,0:02:18.003
Tak, super.[br]Teď už můžeme přidat CSS pravidlo.

0:02:18.217,0:02:20.539
Půjdeme zpátky nahoru do tagu

0:02:20.539,0:02:26.157
a smažeme náš ID selektor z minula,[br]protože ho už nebudeme potřebovat.

0:02:26.157,0:02:29.284
A teď musíme vytvořit[br]selektor pro naši třídu.

0:02:29.284,0:02:34.039
Selektor třídy vždycky začíná tečkou.

0:02:34.426,0:02:39.027
Hned za ní napíšeme jméno třídy:[br]song-lyrics

0:02:39.027,0:02:46.415
a potom jako vždy, složené závorky,[br]vlastnost, dvojtečka, hodnota.

0:02:46.633,0:02:47.575
Ta-dá!

0:02:47.821,0:02:51.007
Celý text písničky má žluté pozadí.

0:02:51.343,0:02:55.143
A co by se stalo, kdybychom[br]tady to "s" napsali velké?

0:02:55.240,0:02:56.398
Nefunguje to.

0:02:56.491,0:02:59.404
To proto, že u názvů tříd[br]záleží na velikosti písmen.

0:02:59.404,0:03:02.431
Anglicky této vlastnosti[br]říkáme case-sensitive,

0:03:02.431,0:03:04.323
neboli citlivé na velikost.

0:03:04.323,0:03:08.295
A co by se stalo, kdybychom[br]místo tečky napsali křížek?

0:03:08.542,0:03:10.144
Zase to nefunguje.

0:03:10.144,0:03:13.085
Protože takhle si prohlížeč myslí,[br]že "song-lyrics" je ID,

0:03:13.085,0:03:16.411
a protože v atributu ID nic nenajde,

0:03:16.411,0:03:17.584
tak to vzdá.

0:03:18.102,0:03:24.512
A co se stane, když do našeho[br]jména přidáme mezery?

0:03:25.248,0:03:27.477
Hm, to taky nefunguje,

0:03:27.477,0:03:29.997
protože v názvech tříd mezery být nesmí.

0:03:30.192,0:03:31.649
A později uvidíme,

0:03:31.649,0:03:34.972
že mezera má ve světě CSS[br]svůj vlastní význam.

0:03:35.868,0:03:38.776
Tak to zase vrátíme zpátky.

0:03:39.523,0:03:41.110
Takže ještě jednou:

0:03:41.110,0:03:43.387
Když chceme přidat třídu,

0:03:43.387,0:03:45.589
vymyslíme jméno třídy,

0:03:45.589,0:03:49.000
přidáme ho do atributu[br]class v HTML.

0:03:49.248,0:03:51.317
Potom napíšeme pravidlo stylu,

0:03:51.317,0:03:54.691
které začíná s tečkou[br]a pokračuje jménem třídy.

0:03:55.216,0:03:59.098
A teď je vaše CSS opravdu třída!