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
Погляньте на сайт Khan Academy:
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
Вона розшифровується як
"Каскадні таблиці стилів"
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
і постаратись не сплутати CSS і HTML.
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
Для початку нам потрібно додати
тег (укр. "стиль")
36
00:01:28,404 --> 00:01:30,523
всередині контейнера .
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
Замість парсера HTML,
я використаю парсер CSS,
40
00:01:40,061 --> 00:01:43,105
щоб зрозуміти його."
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
Якщо ми хочемо оформити
всі заголовки h2 на нашій сторінці,
46
00:02:00,336 --> 00:02:03,995
ми вкажемо селектор – h2.
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 (R - red, G - gree, B - blue),
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
що знаходяться всередині дужок?
74
00:03:20,407 --> 00:03:22,933
Це компоненти червоного,
зеленого та синього,
75
00:03:22,933 --> 00:03:25,818
що утворюють потрібний нам колір.
76
00:03:26,464 --> 00:03:29,928
Основна річ про селектор h2,
який ми використали,
77
00:03:29,928 --> 00:03:33,940
це те, що він такий же самий,
як і всі інші h2 на цій сторінці.
78
00:03:33,940 --> 00:03:36,532
Тому ми можемо змінити одразу
декілька заголовків,
79
00:03:36,532 --> 00:03:40,360
оскільки ми хочемо, щоб всі заголовки h2,
які будуть знайдені
80
00:03:40,360 --> 00:03:43,475
на сторінці, були зеленими.
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
наприклад, зможете змінити
лише декілька заголовків h2.
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
Це не ,
90
00:04:07,204 --> 00:04:10,571
не
, і не ![]()
.
91
00:04:10,571 --> 00:04:13,168
Це тег
(тег тіла сторінки). Пам'ятай,
все, що можна побачити на сайті,
92
00:04:13,168 --> 00:04:16,201
завжди знаходиться всередині тега .
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
Тепер замість "колір", ми напишемо
"колір фону"(англ. "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
Існують сотні інших властивостей СSS,
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
Добре? Починайте!
109
00:05:07,671 --> 00:05:12,501
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.ogr"