< Return to Video

www.youtube.com/.../watch?v=dC34rfY8Eyk

  • 0:01 - 0:02
    Сада знамо како да
    направимо поприлично
  • 0:02 - 0:04
    комплетну веб страницу
    са свакаквим означеним
  • 0:04 - 0:08
    текстовима и сликама.
    Али нешто недостаје. Стил.
  • 0:08 - 0:09
    Моја веб страница изгледа исто
  • 0:09 - 0:11
    као страница коју сте ви правили.
  • 0:11 - 0:14
    Текст црне боје, бела позадина, исти фонт,
  • 0:14 - 0:16
    све је постављено да иде од горе на доле.
  • 0:16 - 0:18
    Али ви сте били на вебу
    и видели сте да странице
  • 0:18 - 0:20
    међусобно изгледају веома другачије.
  • 0:20 - 0:22
    Погледајте около на Кхан Академији
  • 0:22 - 0:25
    у све различите боје и фонтове и величине.
  • 0:25 - 0:27
    Заправо, урадимо ово сада.
  • 0:27 - 0:30
    Паузирајте овај аудио водич и погледајте
    неколико различитих сајтова.
  • 0:30 - 0:32
    По чему се сваки од њих разликује?
  • 0:32 - 0:35
    Шта волите или не волите
    око њихових стилова?
  • 0:35 - 0:37
    Сачекаћу вас овде...
  • 0:38 - 0:41
    Важно је да видите колико
    веб сајтови могу бити различити,
  • 0:41 - 0:43
    пошто ћете веома брзо сазнати како да
  • 0:43 - 0:45
    и ваши сајтови изгледају другачије
    и желећете да то урадите
  • 0:45 - 0:49
    на начин који вас чини срећним,
    пошто он представља вас,
  • 0:49 - 0:51
    али он такође усрећује и друге кориснике.
  • 0:51 - 0:53
    Добро, да би подесили
    нашу страницу, треба
  • 0:53 - 0:55
    да научимо цео нови језик, CSS.
  • 0:55 - 0:58
    То означава каскадни стил страница
    (енгл: cascading style sheets).
  • 0:58 - 1:00
    И то је начин дефинисања стилова
    који ће се применити
  • 1:00 - 1:02
    на различите делове наше веб странице.
  • 1:02 - 1:06
    Уграђујемо CSS унутар HTML-а,
    али он заправо није HTML.
  • 1:06 - 1:08
    Тако да морамо научити читав нов језик
  • 1:08 - 1:11
    и да покушамо да не бркамо HTML са CSS-ом.
  • 1:11 - 1:14
    Видећемо како CSS-ом можемо
    да стилизујемо свакакве аспекате
  • 1:14 - 1:17
    наше странице, као што су
    фонтови, величине и распоред,
  • 1:17 - 1:21
    али почећемо са нечим
    веома забавним - бојом.
  • 1:21 - 1:22
    Шта кажете да изменимо неке наслове
  • 1:22 - 1:26
    на нашој страници у фину травнату зелену?
  • 1:26 - 1:28
    Да почнемо, треба да додамо таг STYLE
  • 1:28 - 1:31
    унутар HEAD тага наше веб странице.
  • 1:32 - 1:34
    Када претраживач то види,
    он ће помислити: "У реду,
  • 1:34 - 1:37
    све унутар овога је CSS.
  • 1:37 - 1:40
    Користићу мој CSS парсер да то разумем
  • 1:40 - 1:43
    уместо мог HTML парсера."
  • 1:43 - 1:48
    Овде унутра, додаћемо CSS стилско правило.
  • 1:48 - 1:51
    Стилско правило садржи селектор
    који претраживачу говори
  • 1:51 - 1:54
    на који део веб странице
    се стил односи и декларације
  • 1:54 - 1:57
    које претраживачу говоре какав стил
    да примени на тај део.
  • 1:57 - 2:00
    Ако желимо да стилизујемо
    све Н2 наслове на нашој страници,
  • 2:00 - 2:04
    навешћемо тај селектор Н2.
  • 2:04 - 2:06
    Затим ћемо ставити витичасте заграде.
  • 2:06 - 2:08
    Постарајте се да буду витичасте,
    а не угласте или округле.
  • 2:08 - 2:10
    Оне неће радити.
  • 2:10 - 2:13
    Унутра ћемо сместити наше декларације
  • 2:13 - 2:14
    које садрже својства и вредности.
  • 2:14 - 2:19
    Дакле, да променимо боју текста,
    користимо особину COLOR.
  • 2:19 - 2:23
    Затим стављамо двотачку и сада
    треба да смислимо неку вредност.
  • 2:23 - 2:26
    Треба да кажемо претраживачу
    за коју боју смо заинтересовани.
  • 2:26 - 2:29
    Па, можемо просто записати
    зелена (енгл. green).
  • 2:29 - 2:32
    Он ће то разумети,
    пошто је зелена уобичајена боја.
  • 2:32 - 2:34
    Али то није зелена коју сам желела.
  • 2:34 - 2:36
    Желела сам зелену боју траве.
  • 2:36 - 2:39
    Ако напишем травнато зелена... Упс.
  • 2:39 - 2:42
    Сада се претраживач збунио
    и исписује наслове
  • 2:42 - 2:46
    поново у црној боји пошто никад није чуо
    за травнато зелену боју.
  • 2:46 - 2:48
    Ако желимо да можемо да
    наведемо било коју боју,
  • 2:48 - 2:52
    онда морамо да користимо
    нешто што се зове RGB спектар.
  • 2:52 - 2:54
    За њега сте можда чули на часу ликовног.
  • 2:54 - 2:56
    Не морате бити неки експерт за то,
  • 2:56 - 2:59
    пошто имамо за вас овде један RGB бирач.
  • 2:59 - 3:04
    Да бисте га користили,
    само замените ово са RGB и заграде.
  • 3:04 - 3:07
    Бирач боја ће искочити и можете померити
  • 3:07 - 3:09
    миш унутар њега и изабрати боју
  • 3:09 - 3:12
    и видећете боју моментално ажурирану.
  • 3:12 - 3:15
    И када сте задовољни, кликните.
  • 3:15 - 3:17
    Сада, да ли сте приметили ова три броја
  • 3:17 - 3:20
    која су се изменила у нашим RGB заградама?
  • 3:20 - 3:23
    То су црвена, зелена и плава
    (енгл: [R]ed, [G]reen, [B]lue)
  • 3:23 - 3:26
    компонента које чине ту боју.
  • 3:26 - 3:30
    У реду, згодна ствар
    око овог CSS селектора H2
  • 3:30 - 3:34
    који користимо јесте то што он утиче
    на све Н2 на страници.
  • 3:34 - 3:37
    Тако да можемо променити више наслова,
    пошто желимо
  • 3:37 - 3:40
    да сви ови Н2-ови буду зелени,
    и то јесте доследно
  • 3:40 - 3:43
    за све ове Н2-ове који се
    налазе на страници.
  • 3:43 - 3:45
    Ако наставите даље са CSS-ом,
    можете научити
  • 3:45 - 3:47
    о многим другим начинима
    за селектовање делова странце,
  • 3:47 - 3:50
    као када би желели
    само један од ових Н2-ова.
  • 3:50 - 3:54
    Али можете урадити доста тога и са овим
    селекторима заснованим на таговима.
  • 3:54 - 3:56
    Хајде да додамо још једно
    CSS стилско правило.
  • 3:56 - 3:59
    Овај пут да направимо
    позадину небеско плавом.
  • 3:59 - 4:02
    Како бисмо обојили позадину странице?
  • 4:02 - 4:06
    Па, који таг обухвата целу страницу?
  • 4:06 - 4:07
    То није Н1.
  • 4:07 - 4:11
    То није Р, није слика.
  • 4:11 - 4:13
    То је BODY таг. Запамтите, све
  • 4:13 - 4:16
    видљиво је увек унутар тог BODY тага.
  • 4:16 - 4:18
    Значи, ако желимо да
    стилизујемо целу страницу,
  • 4:18 - 4:23
    треба да користимо селектор
    да изаберемо тај таг.
  • 4:23 - 4:25
    Дакле, написаћемо BODY.
  • 4:27 - 4:31
    Сада, уместо color,
    написаћемо background color,
  • 4:32 - 4:36
    двотачку и онда RGB, па заграде.
  • 4:36 - 4:41
    Добијемо наш бирач боја
    и отворићу га и одабрати плаву
  • 4:41 - 4:46
    која ме потсећа на смешне зеке
    и облачно небо.
  • 4:46 - 4:47
    Ето га!
  • 4:47 - 4:49
    Погледајте моју стилизовану страницу!
  • 4:49 - 4:51
    Постоји још стотине CSS својстава
  • 4:51 - 4:54
    поред боје и позадине,
  • 4:54 - 4:57
    али ове су забавне да се са њима почне.
  • 4:57 - 4:59
    Заправо, када завршим са причом,
    поиграјте се
  • 4:59 - 5:02
    бојама које сам изабрала
    и прилагодите ову страницу
  • 5:02 - 5:04
    да буде више по вашем укусу него по мом.
  • 5:04 - 5:06
    У реду? Крените!
Title:
Video Language:
English
Duration:
05:09

Serbian subtitles

Revisions

Our website uses cookies for analysis purposes.