WEBVTT

00:00:00.705 --> 00:00:02.163
Сада знамо како да
направимо поприлично

00:00:02.163 --> 00:00:04.119
комплетну веб страницу
са свакаквим означеним

00:00:04.119 --> 00:00:07.949
текстовима и сликама.
Али нешто недостаје. Стил.

00:00:07.949 --> 00:00:09.400
Моја веб страница изгледа исто

00:00:09.400 --> 00:00:10.982
као страница коју сте ви правили.

00:00:10.982 --> 00:00:13.686
Текст црне боје, бела позадина, исти фонт,

00:00:13.686 --> 00:00:15.851
све је постављено да иде од горе на доле.

00:00:15.851 --> 00:00:18.019
Али ви сте били на вебу
и видели сте да странице

00:00:18.019 --> 00:00:20.229
међусобно изгледају веома другачије.

00:00:20.229 --> 00:00:21.609
Погледајте около на Кхан Академији

00:00:21.609 --> 00:00:24.652
у све различите боје и фонтове и величине.

00:00:24.652 --> 00:00:26.819
Заправо, урадимо ово сада.

00:00:26.819 --> 00:00:29.895
Паузирајте овај аудио водич и погледајте
неколико различитих сајтова.

00:00:29.895 --> 00:00:31.625
По чему се сваки од њих разликује?

00:00:31.625 --> 00:00:35.012
Шта волите или не волите
око њихових стилова?

00:00:35.012 --> 00:00:37.204
Сачекаћу вас овде...

00:00:38.051 --> 00:00:40.750
Важно је да видите колико
веб сајтови могу бити различити,

00:00:40.750 --> 00:00:43.229
пошто ћете веома брзо сазнати како да

00:00:43.229 --> 00:00:45.442
и ваши сајтови изгледају другачије
и желећете да то урадите

00:00:45.442 --> 00:00:48.535
на начин који вас чини срећним,
пошто он представља вас,

00:00:48.535 --> 00:00:51.198
али он такође усрећује и друге кориснике.

00:00:51.198 --> 00:00:53.001
Добро, да би подесили
нашу страницу, треба

00:00:53.001 --> 00:00:55.455
да научимо цео нови језик, CSS.

00:00:55.455 --> 00:00:57.878
То означава каскадни стил страница
(енгл: cascading style sheets).

00:00:57.878 --> 00:00:59.759
И то је начин дефинисања стилова
који ће се применити

00:00:59.759 --> 00:01:01.735
на различите делове наше веб странице.

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

00:01:06.306 --> 00:01:08.025
Тако да морамо научити читав нов језик

00:01:08.025 --> 00:01:11.165
и да покушамо да не бркамо HTML са CSS-ом.

00:01:11.165 --> 00:01:13.957
Видећемо како CSS-ом можемо
да стилизујемо свакакве аспекате

00:01:13.957 --> 00:01:16.696
наше странице, као што су
фонтови, величине и распоред,

00:01:16.696 --> 00:01:20.548
али почећемо са нечим
веома забавним - бојом.

00:01:20.548 --> 00:01:22.184
Шта кажете да изменимо неке наслове

00:01:22.184 --> 00:01:25.531
на нашој страници у фину травнату зелену?

00:01:25.531 --> 00:01:28.404
Да почнемо, треба да додамо таг STYLE

00:01:28.404 --> 00:01:30.523
унутар HEAD тага наше веб странице.

00:01:31.845 --> 00:01:34.461
Када претраживач то види,
он ће помислити: "У реду,

00:01:34.461 --> 00:01:37.388
све унутар овога је CSS.

00:01:37.388 --> 00:01:40.061
Користићу мој CSS парсер да то разумем

00:01:40.061 --> 00:01:43.105
уместо мог HTML парсера."

00:01:43.459 --> 00:01:48.312
Овде унутра, додаћемо CSS стилско правило.

00:01:48.312 --> 00:01:50.886
Стилско правило садржи селектор
који претраживачу говори

00:01:50.886 --> 00:01:54.063
на који део веб странице
се стил односи и декларације

00:01:54.063 --> 00:01:56.791
које претраживачу говоре какав стил
да примени на тај део.

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

00:02:00.336 --> 00:02:03.995
навешћемо тај селектор Н2.

00:02:03.995 --> 00:02:06.010
Затим ћемо ставити витичасте заграде.

00:02:06.010 --> 00:02:08.475
Постарајте се да буду витичасте,
а не угласте или округле.

00:02:08.475 --> 00:02:10.151
Оне неће радити.

00:02:10.151 --> 00:02:12.797
Унутра ћемо сместити наше декларације

00:02:12.797 --> 00:02:14.402
које садрже својства и вредности.

00:02:14.402 --> 00:02:19.240
Дакле, да променимо боју текста,
користимо особину COLOR.

00:02:19.240 --> 00:02:22.901
Затим стављамо двотачку и сада
треба да смислимо неку вредност.

00:02:22.901 --> 00:02:25.777
Треба да кажемо претраживачу
за коју боју смо заинтересовани.

00:02:25.777 --> 00:02:28.706
Па, можемо просто записати
зелена (енгл. green).

00:02:29.306 --> 00:02:32.197
Он ће то разумети,
пошто је зелена уобичајена боја.

00:02:32.197 --> 00:02:33.833
Али то није зелена коју сам желела.

00:02:33.833 --> 00:02:35.930
Желела сам зелену боју траве.

00:02:35.930 --> 00:02:39.422
Ако напишем травнато зелена... Упс.

00:02:39.422 --> 00:02:42.401
Сада се претраживач збунио
и исписује наслове

00:02:42.401 --> 00:02:45.656
поново у црној боји пошто никад није чуо
за травнато зелену боју.

00:02:45.656 --> 00:02:48.446
Ако желимо да можемо да
наведемо било коју боју,

00:02:48.446 --> 00:02:51.638
онда морамо да користимо
нешто што се зове RGB спектар.

00:02:51.638 --> 00:02:54.150
За њега сте можда чули на часу ликовног.

00:02:54.150 --> 00:02:55.996
Не морате бити неки експерт за то,

00:02:55.996 --> 00:02:58.806
пошто имамо за вас овде један RGB бирач.

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

00:03:04.083 --> 00:03:06.559
Бирач боја ће искочити и можете померити

00:03:06.559 --> 00:03:09.330
миш унутар њега и изабрати боју

00:03:09.330 --> 00:03:12.405
и видећете боју моментално ажурирану.

00:03:12.405 --> 00:03:14.874
И када сте задовољни, кликните.

00:03:14.874 --> 00:03:17.024
Сада, да ли сте приметили ова три броја

00:03:17.024 --> 00:03:20.407
која су се изменила у нашим RGB заградама?

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

00:03:22.933 --> 00:03:25.818
компонента које чине ту боју.

00:03:26.464 --> 00:03:29.928
У реду, згодна ствар
око овог CSS селектора H2

00:03:29.928 --> 00:03:33.940
који користимо јесте то што он утиче
на све Н2 на страници.

00:03:33.940 --> 00:03:36.532
Тако да можемо променити више наслова,
пошто желимо

00:03:36.532 --> 00:03:40.360
да сви ови Н2-ови буду зелени,
и то јесте доследно

00:03:40.360 --> 00:03:43.475
за све ове Н2-ове који се
налазе на страници.

00:03:43.475 --> 00:03:45.123
Ако наставите даље са CSS-ом,
можете научити

00:03:45.123 --> 00:03:47.482
о многим другим начинима
за селектовање делова странце,

00:03:47.482 --> 00:03:50.020
као када би желели
само један од ових Н2-ова.

00:03:50.020 --> 00:03:54.408
Али можете урадити доста тога и са овим
селекторима заснованим на таговима.

00:03:54.408 --> 00:03:56.318
Хајде да додамо још једно
CSS стилско правило.

00:03:56.318 --> 00:03:59.213
Овај пут да направимо
позадину небеско плавом.

00:03:59.213 --> 00:04:02.056
Како бисмо обојили позадину странице?

00:04:02.056 --> 00:04:05.811
Па, који таг обухвата целу страницу?

00:04:05.811 --> 00:04:07.204
То није Н1.

00:04:07.204 --> 00:04:10.571
То није Р, није слика.

00:04:10.571 --> 00:04:13.168
То је BODY таг. Запамтите, све

00:04:13.168 --> 00:04:16.201
видљиво је увек унутар тог BODY тага.

00:04:16.201 --> 00:04:18.380
Значи, ако желимо да
стилизујемо целу страницу,

00:04:18.380 --> 00:04:22.617
треба да користимо селектор
да изаберемо тај таг.

00:04:22.617 --> 00:04:25.412
Дакле, написаћемо BODY.

00:04:26.905 --> 00:04:31.278
Сада, уместо color,
написаћемо background color,

00:04:31.709 --> 00:04:36.359
двотачку и онда RGB, па заграде.

00:04:36.359 --> 00:04:41.049
Добијемо наш бирач боја
и отворићу га и одабрати плаву

00:04:41.049 --> 00:04:45.646
која ме потсећа на смешне зеке
и облачно небо.

00:04:45.646 --> 00:04:46.661
Ето га!

00:04:46.661 --> 00:04:49.370
Погледајте моју стилизовану страницу!

00:04:49.370 --> 00:04:51.494
Постоји још стотине CSS својстава

00:04:51.494 --> 00:04:54.116
поред боје и позадине,

00:04:54.116 --> 00:04:56.743
али ове су забавне да се са њима почне.

00:04:56.758 --> 00:04:59.157
Заправо, када завршим са причом,
поиграјте се

00:04:59.157 --> 00:05:01.534
бојама које сам изабрала
и прилагодите ову страницу

00:05:01.534 --> 00:05:04.043
да буде више по вашем укусу него по мом.

00:05:04.043 --> 00:05:06.489
У реду? Крените!