1
00:00:00,326 --> 00:00:02,435
Podívejme se na naší webovou stránku.

2
00:00:02,435 --> 00:00:04,540
Máme tu tyto hlavní nadpisy,

3
00:00:04,540 --> 00:00:07,581
odstavec popisující králíky

4
00:00:07,581 --> 00:00:10,588
a dále tu je několik odstavců,

5
00:00:10,588 --> 00:00:13,416
s textem mé oblíbené písničky o králících.

6
00:00:13,543 --> 00:00:17,554
Posledně jsme stylovali první
odstavec pomocí identifikátoru.

7
00:00:17,857 --> 00:00:21,016
Ale teď máme odstavců víc

8
00:00:21,016 --> 00:00:24,083
a chci je mít všechny se žlutým pozadím.

9
00:00:24,613 --> 00:00:27,692
Jak bychom to mohli udělat
pomocí toho, co už známe?

10
00:00:28,221 --> 00:00:30,374
Nejprve jsme se naučili,

11
00:00:30,374 --> 00:00:33,002
jak vybrat všechny tagy určitého typu,

12
00:00:33,002 --> 00:00:34,659
například pomocí selektoru 'p'.

13
00:00:34,886 --> 00:00:39,120
Ale tím bychom obarvili všechny
odstavce, ne jen ty s písničkou.

14
00:00:39,226 --> 00:00:41,290
Potřebujeme něco konkrétnějšího.

15
00:00:41,507 --> 00:00:44,898
Potom jsme se naučili jak vybírat
tagy pomocí jejich vlastního ID,

16
00:00:44,898 --> 00:00:48,140
jako když jsme vybrali odstavec
s identifikátorem "rabbit-song".

17
00:00:48,368 --> 00:00:50,920
Ale tím jsme zase vybrali
jenom první odstavec.

18
00:00:51,120 --> 00:00:53,725
A to IDčko už nemůžeme
přidat k ostatním odstavcům,

19
00:00:53,725 --> 00:00:57,657
protože nemůžeme použít
jedno stejné ID u různých tagů.

20
00:00:57,867 --> 00:01:00,202
Kdybychom chtěli vybrat
i ty ostatní odstavce,

21
00:01:00,202 --> 00:01:02,881
museli bychom každému
z nich dát nové IDčko,

22
00:01:02,881 --> 00:01:05,717
(například "song-lyrics2"
a "song-lyrics3"),

23
00:01:05,717 --> 00:01:07,568
protože každé ID
musí být jedinečné.

24
00:01:07,568 --> 00:01:09,948
A pak bychom pro každý z nich
museli přidat pravidla.

25
00:01:09,948 --> 00:01:12,398
To by šlo, ale fíha,
to je strašně moc práce.

26
00:01:12,398 --> 00:01:14,211
A u každé nové sloky písničky,

27
00:01:14,211 --> 00:01:17,279
bychom nesměli zapomenout
na přidání dalšího IDčka do HTML

28
00:01:17,279 --> 00:01:19,018
a dalšího ID do CSS pravidel,

29
00:01:19,018 --> 00:01:22,830
a kdybychom chtěli přidat sto
slok, tak pojdeme únavou.

30
00:01:22,980 --> 00:01:24,315
Ale, hádejte co?

31
00:01:24,492 --> 00:01:27,383
Existuje lepší způsob. Říkáme mu "třídy".

32
00:01:27,599 --> 00:01:29,009
Třída je v podstatě způsob,

33
00:01:29,009 --> 00:01:32,067
kterým můžeme přidat
libovolný element do nějaké skupiny.

34
00:01:32,162 --> 00:01:35,150
A do této skupiny můžeme přidat
libovolný počet elementů.

35
00:01:35,352 --> 00:01:39,928
Třídu přidáme podobně jako ID,
potřebujeme atribut "class".

36
00:01:40,362 --> 00:01:44,705
Takže nejprve ještě smažu to IDčko,
protože ho nahradíme.

37
00:01:44,705 --> 00:01:47,915
Teď mám kurzor na začátku tagu .

38
00:01:47,915 --> 00:01:51,675
Přidáme mezeru a napíšeme:
class rovná se uvozovky

39
00:01:52,073 --> 00:01:55,333
Teď musíme vymyslet,
jak se třída bude jmenovat.

40
00:01:55,333 --> 00:01:56,927
Hezké popisné jméno.

41
00:01:56,927 --> 00:01:59,624
Nazveme ji "song-lyrics",

42
00:01:59,658 --> 00:02:01,665
tedy česky "text-písně".

43
00:02:01,665 --> 00:02:04,335
Jaké další elementy by
měly mít tuto třídu?

44
00:02:04,416 --> 00:02:07,674
No, přece všechny ostatní
odstavce s textem písničky.

45
00:02:07,674 --> 00:02:10,124
Takže musíme jít dolů

46
00:02:10,124 --> 00:02:14,167
a přidat stejný atribut
ke všem odstavcům.

47
00:02:14,836 --> 00:02:18,003
Tak, super.
Teď už můžeme přidat CSS pravidlo.

48
00:02:18,217 --> 00:02:20,539
Půjdeme zpátky nahoru do tagu 

49
00:02:20,539 --> 00:02:26,157
a smažeme náš ID selektor z minula,
protože ho už nebudeme potřebovat.

50
00:02:26,157 --> 00:02:29,284
A teď musíme vytvořit
selektor pro naši třídu.

51
00:02:29,284 --> 00:02:34,039
Selektor třídy vždycky začíná tečkou.

52
00:02:34,426 --> 00:02:39,027
Hned za ní napíšeme jméno třídy:
song-lyrics

53
00:02:39,027 --> 00:02:46,415
a potom jako vždy, složené závorky,
vlastnost, dvojtečka, hodnota.

54
00:02:46,633 --> 00:02:47,575
Ta-dá!

55
00:02:47,821 --> 00:02:51,007
Celý text písničky má žluté pozadí.

56
00:02:51,343 --> 00:02:55,143
A co by se stalo, kdybychom
tady to "s" napsali velké?

57
00:02:55,240 --> 00:02:56,398
Nefunguje to.

58
00:02:56,491 --> 00:02:59,404
To proto, že u názvů tříd
záleží na velikosti písmen.

59
00:02:59,404 --> 00:03:02,431
Anglicky této vlastnosti
říkáme case-sensitive,

60
00:03:02,431 --> 00:03:04,323
neboli citlivé na velikost.

61
00:03:04,323 --> 00:03:08,295
A co by se stalo, kdybychom
místo tečky napsali křížek?

62
00:03:08,542 --> 00:03:10,144
Zase to nefunguje.

63
00:03:10,144 --> 00:03:13,085
Protože takhle si prohlížeč myslí,
že "song-lyrics" je ID,

64
00:03:13,085 --> 00:03:16,411
a protože v atributu ID nic nenajde,

65
00:03:16,411 --> 00:03:17,584
tak to vzdá.

66
00:03:18,102 --> 00:03:24,512
A co se stane, když do našeho
jména přidáme mezery?

67
00:03:25,248 --> 00:03:27,477
Hm, to taky nefunguje,

68
00:03:27,477 --> 00:03:29,997
protože v názvech tříd mezery být nesmí.

69
00:03:30,192 --> 00:03:31,649
A později uvidíme,

70
00:03:31,649 --> 00:03:34,972
že mezera má ve světě CSS
svůj vlastní význam.

71
00:03:35,868 --> 00:03:38,776
Tak to zase vrátíme zpátky.

72
00:03:39,523 --> 00:03:41,110
Takže ještě jednou:

73
00:03:41,110 --> 00:03:43,387
Když chceme přidat třídu,

74
00:03:43,387 --> 00:03:45,589
vymyslíme jméno třídy,

75
00:03:45,589 --> 00:03:49,000
přidáme ho do atributu
class v HTML.

76
00:03:49,248 --> 00:03:51,317
Potom napíšeme pravidlo stylu,

77
00:03:51,317 --> 00:03:54,691
které začíná s tečkou
a pokračuje jménem třídy.

78
00:03:55,216 --> 00:03:59,098
A teď je vaše CSS opravdu třída!