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 Погляньте на сайт Khan Academy: 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 Вона розшифровується як "Каскадні таблиці стилів" 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 і постаратись не сплутати CSS і HTML. 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 Для початку нам потрібно додати тег (укр. "стиль") 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 Замість парсера HTML, я використаю парсер CSS, 00:01:40.061 --> 00:01:43.105 щоб зрозуміти його." 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 Якщо ми хочемо оформити всі заголовки h2 на нашій сторінці, 00:02:00.336 --> 00:02:03.995 ми вкажемо селектор – h2. 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 (R - red, G - gree, B - blue), 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 що знаходяться всередині дужок? 00:03:20.407 --> 00:03:22.933 Це компоненти червоного, зеленого та синього, 00:03:22.933 --> 00:03:25.818 що утворюють потрібний нам колір. 00:03:26.464 --> 00:03:29.928 Основна річ про селектор h2, який ми використали, 00:03:29.928 --> 00:03:33.940 це те, що він такий же самий, як і всі інші h2 на цій сторінці. 00:03:33.940 --> 00:03:36.532 Тому ми можемо змінити одразу декілька заголовків, 00:03:36.532 --> 00:03:40.360 оскільки ми хочемо, щоб всі заголовки h2, які будуть знайдені 00:03:40.360 --> 00:03:43.475 на сторінці, були зеленими. 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 наприклад, зможете змінити лише декілька заголовків h2. 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 Це не <h1>, 00:04:07.204 --> 00:04:10.571 не <p>, і не <img>. 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 Тепер замість "колір", ми напишемо "колір фону"(англ. "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 Існують сотні інших властивостей СSS, 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 Добре? Починайте! 00:05:07.671 --> 00:05:12.501 Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.ogr"