1
00:00:00,000 --> 00:00:01,345
Naučili jsme se,

2
00:00:01,345 --> 00:00:03,074
jak vytvořit celou webovou stránku,

3
00:00:03,074 --> 00:00:05,440
se všemi druhy textů a obrázků.

4
00:00:05,440 --> 00:00:07,975
Ale trochu tomu chybí styl.

5
00:00:07,975 --> 00:00:09,583
Moje stránka
vypadá úplně stejně

6
00:00:09,583 --> 00:00:10,943
jako vaše webová stránka.

7
00:00:10,943 --> 00:00:13,774
Černý text, bílé pozadí, 
ten samý druh písma.

8
00:00:13,774 --> 00:00:15,776
Uspořádáno od horního
okraje až k dolnímu.

9
00:00:15,776 --> 00:00:17,396
Určitě jste na internetu viděli,

10
00:00:17,396 --> 00:00:20,308
že každá webová stránka
vypadá trochu jinak.

11
00:00:20,308 --> 00:00:21,833
Zde na Khan Academy

12
00:00:21,833 --> 00:00:24,735
také máme různé barvy,
písma a velikosti.

13
00:00:24,735 --> 00:00:28,031
Klidně se podívejte i teď,
zastavte si toto video

14
00:00:28,031 --> 00:00:29,911
a podívejte se na několik různých webů.

15
00:00:29,911 --> 00:00:31,543
V čem se od sebe liší?

16
00:00:31,543 --> 00:00:35,066
Co se vám na nich líbí nebo naopak nelíbí?

17
00:00:35,066 --> 00:00:37,240
Já na vás tady počkám.

18
00:00:38,148 --> 00:00:40,907
Důležité je si všimnout, jak
různé stránky mohou vypadat,

19
00:00:40,907 --> 00:00:42,914
protože se brzy naučíte,

20
00:00:42,914 --> 00:00:44,683
jak odlišit vaši stránku od jiných.

21
00:00:44,683 --> 00:00:46,006
Stylem, který se vám

22
00:00:46,006 --> 00:00:48,537
líbí, protože
vás to jednak reprezentuje,

23
00:00:48,537 --> 00:00:51,211
ale také se to líbí
ostatním návštěvníkům.

24
00:00:51,211 --> 00:00:52,942
Abychom to mohli udělat,

25
00:00:52,942 --> 00:00:55,609
musíme se naučit jazyk CSS,

26
00:00:55,609 --> 00:00:57,767
neboli kaskádové styly,

27
00:00:57,767 --> 00:00:59,746
kterým určíme styly,
které se poté použijí

28
00:00:59,746 --> 00:01:01,877
na různých částech naší stránky.

29
00:01:01,877 --> 00:01:06,373
CSS použijeme uvnitř HTML,
ale ve skutečnosti to není HTML,

30
00:01:06,373 --> 00:01:08,045
takže se musíme naučit nový jazyk,

31
00:01:08,045 --> 00:01:11,211
a nesmíme si plést HTML s CSS.

32
00:01:11,211 --> 00:01:13,375
Naučíme se, jak použít CSS
k různým stylům

33
00:01:13,375 --> 00:01:15,278
naší stránky, jako jsou písma,

34
00:01:15,278 --> 00:01:17,434
velikosti a uspořádání
obsahu, ale začneme

35
00:01:17,434 --> 00:01:19,069
s něčím zábavným.

36
00:01:19,069 --> 00:01:22,107
A to jsou barvy.
Co třeba změnit barvu nadpisů,

37
00:01:22,107 --> 00:01:25,409
aby byly pěkně zelené jako tráva.

38
00:01:25,409 --> 00:01:28,407
Nejprve musíme přidat tag style

39
00:01:28,407 --> 00:01:30,408
do tagu head v naší stránce.

40
00:01:31,500 --> 00:01:33,504
Jakmile ji prohlížeč načte, řekne si:

41
00:01:33,504 --> 00:01:37,371
"Fajn, tady uvnitř je vše jen CSS."

42
00:01:37,371 --> 00:01:40,102
"Použiji můj CSS parser,
abych tomu rozuměl,

43
00:01:40,102 --> 00:01:42,802
ne HTML parser."

44
00:01:43,469 --> 00:01:48,270
Tady uvnitř teď přidáme
pravidlo CSS stylu.

45
00:01:48,270 --> 00:01:50,251
Každé pravidlo má selektor, určující,

46
00:01:50,251 --> 00:01:51,716
jakou část obsahu má prohlížeč

47
00:01:51,716 --> 00:01:54,177
upravit, a obsah určující,

48
00:01:54,177 --> 00:01:56,938
jak má prohlížeč tuto část změnit.

49
00:01:56,938 --> 00:02:00,276
Pokud bychom chtěli změnit
všechny nadpisy H2,

50
00:02:00,276 --> 00:02:05,276
jako selektor napíšeme H2
a složené závorky.

51
00:02:06,082 --> 00:02:07,533
Musí být složené, ne hranaté

52
00:02:07,533 --> 00:02:10,133
nebo kulaté, jinak to nebude fungovat.

53
00:02:10,133 --> 00:02:12,812
Dovnitř napíšeme naši deklaraci,

54
00:02:12,812 --> 00:02:14,711
s vlastnostmi a hodnotami.

55
00:02:14,711 --> 00:02:18,673
Abychom změnili barvu,
použijeme vlastnost color,

56
00:02:19,307 --> 00:02:22,904
poté napíšeme dvojtečku a hodnotu.

57
00:02:22,904 --> 00:02:25,774
Musíme říct prohlížeči,
jakou barvu chceme.

58
00:02:25,774 --> 00:02:28,242
Mohli bychom napsat green (zelená),

59
00:02:29,140 --> 00:02:31,956
a prohlížeč by to pochopil,
protože je to standardní barva,

60
00:02:31,956 --> 00:02:33,928
ale to není taková zelená,
jakou chci já.

61
00:02:33,928 --> 00:02:35,912
Já chci trávově zelenou.

62
00:02:35,912 --> 00:02:39,547
Když bych napsala trávově zelenou,
hmmmm.

63
00:02:39,547 --> 00:02:41,912
Prohlížeč najednou nebude vědět,
jakou barvu myslím

64
00:02:41,912 --> 00:02:43,707
a vrátí nadpisu černou barvu,

65
00:02:43,707 --> 00:02:45,707
protože nikdy neslyšel o trávově zelené.

66
00:02:45,707 --> 00:02:48,344
Pokud chceme definovat jakoukoliv barvu,

67
00:02:48,344 --> 00:02:51,564
potřebujeme něco, čemu
se říká RGB spektrum.

68
00:02:51,564 --> 00:02:54,180
Možná jste o něm slyšeli
v hodinách výtvarné výchovy.

69
00:02:54,180 --> 00:02:56,067
Ale nemusíte být experty na RGB,

70
00:02:56,067 --> 00:02:58,936
protože tu pro vás máme RGB
barevnou paletu.

71
00:02:58,936 --> 00:03:03,936
Aby se zobrazila, nahraďte toto
R-G-B a závorkami,

72
00:03:04,069 --> 00:03:06,120
a paleta vyskočí sama.

73
00:03:06,120 --> 00:03:08,146
Myší na ní můžete najet

74
00:03:08,146 --> 00:03:10,533
a vybrat si barvu,
a vidíte, jak se barva mění

75
00:03:10,533 --> 00:03:14,579
okamžitě, a až si vyberete,
tak stačí kliknout na tu barvu.

76
00:03:14,935 --> 00:03:17,010
Všimli jste si těch tří čísel,

77
00:03:17,010 --> 00:03:20,412
která se měnila v našich RGB závorkách?

78
00:03:20,412 --> 00:03:22,939
To je červená, zelená a modrá

79
00:03:22,939 --> 00:03:25,867
složka výsledné barvy.

80
00:03:26,502 --> 00:03:29,981
Skvělé na našem CSS selektoru H2 je,

81
00:03:29,981 --> 00:03:33,701
že platí pro všechny nadpisy
H2 na naší stránce,

82
00:03:33,701 --> 00:03:35,866
takže můžeme změnit najednou
několik nadpisů,

83
00:03:35,866 --> 00:03:39,189
protože chceme všechny H2 nadpisy zelené.

84
00:03:39,189 --> 00:03:42,704
Je to stejné pro všechny
H2 nadpisy naší stránky.

85
00:03:42,704 --> 00:03:44,703
Jak budete pokračovat ve studiu CSS,

86
00:03:44,703 --> 00:03:47,586
naučíte se více způsobů, jak vybrat
různé části vaší stránky,

87
00:03:47,586 --> 00:03:50,139
třeba pokud chcete jen jeden nadpis H2.

88
00:03:50,139 --> 00:03:54,078
Se selektory tagů si můžete
vcelku dobře vystačit.

89
00:03:54,574 --> 00:03:56,400
Přidejme další CSS pravidlo.

90
00:03:56,400 --> 00:03:59,210
Teď uděláme pozadí
modré jako nebe.

91
00:03:59,210 --> 00:04:02,077
Jak to uděláme?

92
00:04:02,077 --> 00:04:05,870
Který tag obaluje celou stránku?

93
00:04:05,870 --> 00:04:08,808
Není to tag H1, ani tag P,

94
00:04:08,808 --> 00:04:11,762
není to ani obrázek, ale body tag.

95
00:04:11,762 --> 00:04:14,412
Pamatujte si, že vše, co jde vidět,

96
00:04:14,412 --> 00:04:16,481
je uvnitř tagu body.

97
00:04:16,481 --> 00:04:18,630
Pokud chceme stylovat celou stránku,

98
00:04:18,630 --> 00:04:22,262
musíme použít selektor,
který vybere tento tag.

99
00:04:22,710 --> 00:04:24,534
Napíšeme tedy body.

100
00:04:26,764 --> 00:04:31,829
Místo color napíšeme
background-color, barva pozadí,

101
00:04:31,829 --> 00:04:33,102
dvojtečka

102
00:04:33,318 --> 00:04:36,245
a pak rgb a závorky.

103
00:04:36,491 --> 00:04:39,803
Vyskočí naše barevná paleta.

104
00:04:39,803 --> 00:04:41,933
A vyberu takovou modrou,

105
00:04:41,933 --> 00:04:45,703
která mi připomíná mráčky
jako zajíčky na obloze.

106
00:04:45,703 --> 00:04:48,944
Tak, mám svoji stylovou stránku.

107
00:04:49,480 --> 00:04:51,637
Existují stovky CSS vlastností,

108
00:04:51,637 --> 00:04:54,243
kromě barvy a pozadí,

109
00:04:54,243 --> 00:04:56,907
ale tyhle jsou ty zábavné,
proto s nimi začínáme.

110
00:04:56,907 --> 00:04:59,321
Jakmile domluvím,
hrajte si klidně dál

111
00:04:59,321 --> 00:05:01,544
s barvami a upravte si tuto stránku

112
00:05:01,544 --> 00:05:05,166
podle vašich představ.

113
00:05:05,166 --> 00:05:06,534
Tak, jen do toho!