1
00:00:00,705 --> 00:00:02,163
Сада знамо како да
направимо поприлично

2
00:00:02,163 --> 00:00:04,119
комплетну веб страницу
са свакаквим означеним

3
00:00:04,119 --> 00:00:07,949
текстовима и сликама.
Али нешто недостаје. Стил.

4
00:00:07,949 --> 00:00:09,400
Моја веб страница изгледа исто

5
00:00:09,400 --> 00:00:10,982
као страница коју сте ви правили.

6
00:00:10,982 --> 00:00:13,686
Текст црне боје, бела позадина, исти фонт,

7
00:00:13,686 --> 00:00:15,851
све је постављено да иде од горе на доле.

8
00:00:15,851 --> 00:00:18,019
Али ви сте били на вебу
и видели сте да странице

9
00:00:18,019 --> 00:00:20,229
међусобно изгледају веома другачије.

10
00:00:20,229 --> 00:00:21,609
Погледајте около на Кхан Академији

11
00:00:21,609 --> 00:00:24,652
у све различите боје и фонтове и величине.

12
00:00:24,652 --> 00:00:26,819
Заправо, урадимо ово сада.

13
00:00:26,819 --> 00:00:29,895
Паузирајте овај аудио водич и погледајте
неколико различитих сајтова.

14
00:00:29,895 --> 00:00:31,625
По чему се сваки од њих разликује?

15
00:00:31,625 --> 00:00:35,012
Шта волите или не волите
око њихових стилова?

16
00:00:35,012 --> 00:00:37,204
Сачекаћу вас овде...

17
00:00:38,051 --> 00:00:40,750
Важно је да видите колико
веб сајтови могу бити различити,

18
00:00:40,750 --> 00:00:43,229
пошто ћете веома брзо сазнати како да

19
00:00:43,229 --> 00:00:45,442
и ваши сајтови изгледају другачије
и желећете да то урадите

20
00:00:45,442 --> 00:00:48,535
на начин који вас чини срећним,
пошто он представља вас,

21
00:00:48,535 --> 00:00:51,198
али он такође усрећује и друге кориснике.

22
00:00:51,198 --> 00:00:53,001
Добро, да би подесили
нашу страницу, треба

23
00:00:53,001 --> 00:00:55,455
да научимо цео нови језик, CSS.

24
00:00:55,455 --> 00:00:57,878
То означава каскадни стил страница
(енгл: cascading style sheets).

25
00:00:57,878 --> 00:00:59,759
И то је начин дефинисања стилова
који ће се применити

26
00:00:59,759 --> 00:01:01,735
на различите делове наше веб странице.

27
00:01:01,735 --> 00:01:06,306
Уграђујемо CSS унутар HTML-а,
али он заправо није HTML.

28
00:01:06,306 --> 00:01:08,025
Тако да морамо научити читав нов језик

29
00:01:08,025 --> 00:01:11,165
и да покушамо да не бркамо HTML са CSS-ом.

30
00:01:11,165 --> 00:01:13,957
Видећемо како CSS-ом можемо
да стилизујемо свакакве аспекате

31
00:01:13,957 --> 00:01:16,696
наше странице, као што су
фонтови, величине и распоред,

32
00:01:16,696 --> 00:01:20,548
али почећемо са нечим
веома забавним - бојом.

33
00:01:20,548 --> 00:01:22,184
Шта кажете да изменимо неке наслове

34
00:01:22,184 --> 00:01:25,531
на нашој страници у фину травнату зелену?

35
00:01:25,531 --> 00:01:28,404
Да почнемо, треба да додамо таг STYLE

36
00:01:28,404 --> 00:01:30,523
унутар HEAD тага наше веб странице.

37
00:01:31,845 --> 00:01:34,461
Када претраживач то види,
он ће помислити: "У реду,

38
00:01:34,461 --> 00:01:37,388
све унутар овога је CSS.

39
00:01:37,388 --> 00:01:40,061
Користићу мој CSS парсер да то разумем

40
00:01:40,061 --> 00:01:43,105
уместо мог HTML парсера."

41
00:01:43,459 --> 00:01:48,312
Овде унутра, додаћемо CSS стилско правило.

42
00:01:48,312 --> 00:01:50,886
Стилско правило садржи селектор
који претраживачу говори

43
00:01:50,886 --> 00:01:54,063
на који део веб странице
се стил односи и декларације

44
00:01:54,063 --> 00:01:56,791
које претраживачу говоре какав стил
да примени на тај део.

45
00:01:56,791 --> 00:02:00,336
Ако желимо да стилизујемо
све Н2 наслове на нашој страници,

46
00:02:00,336 --> 00:02:03,995
навешћемо тај селектор Н2.

47
00:02:03,995 --> 00:02:06,010
Затим ћемо ставити витичасте заграде.

48
00:02:06,010 --> 00:02:08,475
Постарајте се да буду витичасте,
а не угласте или округле.

49
00:02:08,475 --> 00:02:10,151
Оне неће радити.

50
00:02:10,151 --> 00:02:12,797
Унутра ћемо сместити наше декларације

51
00:02:12,797 --> 00:02:14,402
које садрже својства и вредности.

52
00:02:14,402 --> 00:02:19,240
Дакле, да променимо боју текста,
користимо особину COLOR.

53
00:02:19,240 --> 00:02:22,901
Затим стављамо двотачку и сада
треба да смислимо неку вредност.

54
00:02:22,901 --> 00:02:25,777
Треба да кажемо претраживачу
за коју боју смо заинтересовани.

55
00:02:25,777 --> 00:02:28,706
Па, можемо просто записати
зелена (енгл. green).

56
00:02:29,306 --> 00:02:32,197
Он ће то разумети,
пошто је зелена уобичајена боја.

57
00:02:32,197 --> 00:02:33,833
Али то није зелена коју сам желела.

58
00:02:33,833 --> 00:02:35,930
Желела сам зелену боју траве.

59
00:02:35,930 --> 00:02:39,422
Ако напишем травнато зелена... Упс.

60
00:02:39,422 --> 00:02:42,401
Сада се претраживач збунио
и исписује наслове

61
00:02:42,401 --> 00:02:45,656
поново у црној боји пошто никад није чуо
за травнато зелену боју.

62
00:02:45,656 --> 00:02:48,446
Ако желимо да можемо да
наведемо било коју боју,

63
00:02:48,446 --> 00:02:51,638
онда морамо да користимо
нешто што се зове RGB спектар.

64
00:02:51,638 --> 00:02:54,150
За њега сте можда чули на часу ликовног.

65
00:02:54,150 --> 00:02:55,996
Не морате бити неки експерт за то,

66
00:02:55,996 --> 00:02:58,806
пошто имамо за вас овде један RGB бирач.

67
00:02:58,806 --> 00:03:03,806
Да бисте га користили,
само замените ово са RGB и заграде.

68
00:03:04,083 --> 00:03:06,559
Бирач боја ће искочити и можете померити

69
00:03:06,559 --> 00:03:09,330
миш унутар њега и изабрати боју

70
00:03:09,330 --> 00:03:12,405
и видећете боју моментално ажурирану.

71
00:03:12,405 --> 00:03:14,874
И када сте задовољни, кликните.

72
00:03:14,874 --> 00:03:17,024
Сада, да ли сте приметили ова три броја

73
00:03:17,024 --> 00:03:20,407
која су се изменила у нашим RGB заградама?

74
00:03:20,407 --> 00:03:22,933
То су црвена, зелена и плава
(енгл: [R]ed, [G]reen, [B]lue)

75
00:03:22,933 --> 00:03:25,818
компонента које чине ту боју.

76
00:03:26,464 --> 00:03:29,928
У реду, згодна ствар
око овог CSS селектора H2

77
00:03:29,928 --> 00:03:33,940
који користимо јесте то што он утиче
на све Н2 на страници.

78
00:03:33,940 --> 00:03:36,532
Тако да можемо променити више наслова,
пошто желимо

79
00:03:36,532 --> 00:03:40,360
да сви ови Н2-ови буду зелени,
и то јесте доследно

80
00:03:40,360 --> 00:03:43,475
за све ове Н2-ове који се
налазе на страници.

81
00:03:43,475 --> 00:03:45,123
Ако наставите даље са CSS-ом,
можете научити

82
00:03:45,123 --> 00:03:47,482
о многим другим начинима
за селектовање делова странце,

83
00:03:47,482 --> 00:03:50,020
као када би желели
само један од ових Н2-ова.

84
00:03:50,020 --> 00:03:54,408
Али можете урадити доста тога и са овим
селекторима заснованим на таговима.

85
00:03:54,408 --> 00:03:56,318
Хајде да додамо још једно
CSS стилско правило.

86
00:03:56,318 --> 00:03:59,213
Овај пут да направимо
позадину небеско плавом.

87
00:03:59,213 --> 00:04:02,056
Како бисмо обојили позадину странице?

88
00:04:02,056 --> 00:04:05,811
Па, који таг обухвата целу страницу?

89
00:04:05,811 --> 00:04:07,204
То није Н1.

90
00:04:07,204 --> 00:04:10,571
То није Р, није слика.

91
00:04:10,571 --> 00:04:13,168
То је BODY таг. Запамтите, све

92
00:04:13,168 --> 00:04:16,201
видљиво је увек унутар тог BODY тага.

93
00:04:16,201 --> 00:04:18,380
Значи, ако желимо да
стилизујемо целу страницу,

94
00:04:18,380 --> 00:04:22,617
треба да користимо селектор
да изаберемо тај таг.

95
00:04:22,617 --> 00:04:25,412
Дакле, написаћемо BODY.

96
00:04:26,905 --> 00:04:31,278
Сада, уместо color,
написаћемо background color,

97
00:04:31,709 --> 00:04:36,359
двотачку и онда RGB, па заграде.

98
00:04:36,359 --> 00:04:41,049
Добијемо наш бирач боја
и отворићу га и одабрати плаву

99
00:04:41,049 --> 00:04:45,646
која ме потсећа на смешне зеке
и облачно небо.

100
00:04:45,646 --> 00:04:46,661
Ето га!

101
00:04:46,661 --> 00:04:49,370
Погледајте моју стилизовану страницу!

102
00:04:49,370 --> 00:04:51,494
Постоји још стотине CSS својстава

103
00:04:51,494 --> 00:04:54,116
поред боје и позадине,

104
00:04:54,116 --> 00:04:56,743
али ове су забавне да се са њима почне.

105
00:04:56,758 --> 00:04:59,157
Заправо, када завршим са причом,
поиграјте се

106
00:04:59,157 --> 00:05:01,534
бојама које сам изабрала
и прилагодите ову страницу

107
00:05:01,534 --> 00:05:04,043
да буде више по вашем укусу него по мом.

108
00:05:04,043 --> 00:05:06,489
У реду? Крените!