1
00:00:00,095 --> 00:00:02,336
Na této stránce pomocí CSS

2
00:00:02,336 --> 00:00:04,600
stylujeme naše `` nadpisy
(dále navrhuju číst há dvojky) a odstavce tak,

3
00:00:04,600 --> 00:00:08,920
že všechny `` jsou zelené
a všechny odstavce jsou fialové.

4
00:00:09,537 --> 00:00:13,460
Ale co kdybychom chtěli vybrat
jen první `` nadpis

5
00:00:13,460 --> 00:00:16,462
nebo nastylovat
jen druhý odstavec?

6
00:00:16,716 --> 00:00:19,867
Musíme najít způsob,
jak prohlížeči říct,

7
00:00:19,867 --> 00:00:21,513
které z elementů chceme vybrat,

8
00:00:21,513 --> 00:00:24,931
aby se styly nepoužily všude,
jako doposud.

9
00:00:25,333 --> 00:00:27,945
Prvním způsobem je výběr pomocí identifikátoru, neboli ID.

10
00:00:28,265 --> 00:00:30,525
Můžeme libovolnému tagu na naší
stránce přiřadit jedinečné ID

11
00:00:30,525 --> 00:00:32,176
a potom můžeme CSS říct,

12
00:00:32,176 --> 00:00:36,297
"Poslouchej: Chceme použít tyto styly
jen pro element s tímto ID,

13
00:00:36,297 --> 00:00:38,208
pro žádné jiné ne."

14
00:00:38,455 --> 00:00:41,281
Abychom toho dosáhli, musíme
nejprve upravit HTML kód

15
00:00:41,281 --> 00:00:45,132
a přidat naše atributy id k tagům,
které chceme vybrat.

16
00:00:45,741 --> 00:00:48,371
Začneme tady s druhým odstavcem.

17
00:00:48,529 --> 00:00:50,896
Pro přidání atributu id
posuneme náš kurzor

18
00:00:50,896 --> 00:00:53,415
na začátek tagu ``
hned za p,

19
00:00:53,415 --> 00:00:58,357
přidáme jednu mezeru
a za ní `id = "`

20
00:00:58,982 --> 00:01:02,667
Teď musíme vyplnit náš atribut id
nějakou hodnotou.

21
00:01:02,812 --> 00:01:04,180
Jaké ID mu mám dát?

22
00:01:04,180 --> 00:01:06,452
No, mělo by být popisné
a jedinečné.

23
00:01:06,508 --> 00:01:09,229
Nic na této stránce nesmí mít stejné ID.

24
00:01:09,479 --> 00:01:15,080
Protože naše písnička je o králících,
id by mohlo být 'rabbits-song'.

25
00:01:15,422 --> 00:01:19,837
V atributu ID nemůžou být mezery,
a pokud máme více slov,

26
00:01:19,837 --> 00:01:22,596
musíme je oddělit pomlčkami
nebo podtržítky.

27
00:01:22,596 --> 00:01:25,250
Já osobně mám nejradši pomlčky.

28
00:01:25,650 --> 00:01:28,941
Teď už umíme jednoznačně vybrat
tento odstavec.

29
00:01:29,016 --> 00:01:31,646
Takže můžeme přidat CSS
pravidlo přímo pro něj.

30
00:01:31,746 --> 00:01:35,479
V druhém kroku se tedy vraťme 
zpět k našemu tagu ``.

31
00:01:35,598 --> 00:01:38,428
Pod poslední pravidlo přidáme nový řádek.

32
00:01:39,478 --> 00:01:43,255
Nezapomeňte, první část CSS pravidla
je vždy selektor:

33
00:01:43,255 --> 00:01:46,098
ta část, která říká prohlížeči,
co přesně vybrat.

34
00:01:46,098 --> 00:01:51,130
V našich předchozích pravidlech jsme
používali selektory jako 'h2' a 'p'

35
00:01:51,130 --> 00:01:54,031
a tím jsme zvolili všechny tagy
`` a `` na stránce.

36
00:01:54,554 --> 00:01:58,653
Teď když chceme selektor,
který vybere pouze elementy s určitým ID,

37
00:01:58,671 --> 00:02:01,182
náš selektor musí začínat křížkem.

38
00:02:01,293 --> 00:02:04,547
Tím prohlížeči řekneme,
že cokoliv za křížkem je ID.

39
00:02:05,147 --> 00:02:08,798
Teď napíšeme naše ID:
rabbits-song.

40
00:02:09,603 --> 00:02:11,882
Zbytek pravidla bude stejný jako doteď.

41
00:02:11,934 --> 00:02:14,352
Otevřeme a zavřeme naše složené závorky,

42
00:02:14,352 --> 00:02:17,844
přidáme vlastnost,
třeba background-color...

43
00:02:18,364 --> 00:02:20,574
... a ta-dá! Zabralo to!

44
00:02:20,873 --> 00:02:23,934
Žlutou barvu má jen odstavec s písničkou,

45
00:02:23,934 --> 00:02:26,093
první odstavec se nezměnil.

46
00:02:26,574 --> 00:02:30,764
Pojďme si to zopakovat,
ale vybereme náš první tag ``.

47
00:02:31,133 --> 00:02:32,866
Pamatujete si první krok?

48
00:02:33,515 --> 00:02:36,586
Správně. Nejdřív musíme upravit naše HTML

49
00:02:36,586 --> 00:02:38,285
a přidat atribut `id`.

50
00:02:38,300 --> 00:02:40,693
Takže náš kurzor hezky
do otevíracího tagu,

51
00:02:40,693 --> 00:02:43,520
přidat mezeru, napsat `id=`

52
00:02:43,580 --> 00:02:46,691
a potom opět zcela
jedinečné a popisné ID.

53
00:02:46,791 --> 00:02:49,944
Třeba, "rabbits-info-heading".

54
00:02:50,690 --> 00:02:54,043
Super, teď druhý krok.
Zpět do našeho tagu 'style',

55
00:02:54,043 --> 00:02:57,429
přidáme nový řádek,
napíšeme křížek,

56
00:02:57,429 --> 00:03:01,840
potom naše ID,
rabbits-info-heading

57
00:03:01,840 --> 00:03:04,947
a pak vložíme naše vlastnosti
do složených závorek

58
00:03:04,947 --> 00:03:08,625
background-color: purple;

59
00:03:08,945 --> 00:03:13,260
O-ou! Aha, něco se pokazilo.
Hmm... vidíte, kde je chyba?

60
00:03:13,420 --> 00:03:15,279
Napsala jsem to správně?

61
00:03:15,359 --> 00:03:18,305
rabbits-info-Heading,
rabbits-info-heading...

62
00:03:18,485 --> 00:03:21,049
Hmm... vypadají docela stejně.

63
00:03:21,160 --> 00:03:23,374
Můžu je projít písmeno po písmenu

64
00:03:23,374 --> 00:03:25,079
a zkusit najít chybu,

65
00:03:25,079 --> 00:03:29,633
ale já radši sjedu dolů,
označím si naše ID z HTML

66
00:03:29,679 --> 00:03:33,810
a zkopíruju si ho, a potom ho vložím sem
nahoru, ať mám jistotu, že jsou přesně stejné.

67
00:03:33,887 --> 00:03:35,481
A... zabralo to!

68
00:03:35,561 --> 00:03:39,825
Moje h2 má nové pozadí.
A všimli jste si, co se změnilo?

69
00:03:40,085 --> 00:03:44,474
Možná že jo. Bylo to tohle h.
Předtím jsme použili velké H,

70
00:03:44,474 --> 00:03:47,003
a prohlížeč mezi velikostmi rozlišuje.

71
00:03:47,103 --> 00:03:50,231
Musí to být malé h, aby to bylo stejné
jako v HTML kódu,

72
00:03:50,315 --> 00:03:52,850
protože v atributu ID záleží
na velikosti písmen.

73
00:03:52,930 --> 00:03:57,143
Takže je musíme napsat všude
přesně stejnou velikostí.

74
00:03:57,513 --> 00:04:01,753
Já nejradši používám pro moje IDčka
pouze malá písmena,

75
00:04:01,753 --> 00:04:05,145
protože pak nemusím přemýšlet,
jakou velikost jsem kde použila.

76
00:04:05,158 --> 00:04:08,404
Dobře, na závěr poslední upozornění:

77
00:04:08,404 --> 00:04:10,530
IDčka musí být jedinečná!

78
00:04:10,648 --> 00:04:13,444
Pokud máte na stránce dva tagy
s přesně stejným IDčkem,

79
00:04:13,444 --> 00:04:17,835
prohlížeč může nastylovat oba,
ale taky může nastylovat jen jeden z nich.

80
00:04:17,962 --> 00:04:20,341
A to určitě nechceme ponechat náhodě.

81
00:04:20,451 --> 00:04:23,796
Takže chceme pěkná, jedinečná a popisná IDčka.