0:00:00.705,0:00:02.163 Ми вивчили, як зробити гарну[br] 0:00:02.163,0:00:04.119 наповнену веб-сторінку з [br]виділеним текстом 0:00:04.119,0:00:07.949 та картинками, але чогось[br]не вистачає – стилю. 0:00:07.949,0:00:09.400 Моя сторінка виглядає так само, 0:00:09.400,0:00:10.982 як і ті сторінки, які робили ви. 0:00:10.982,0:00:13.686 Чорний текст, білий фон, однаковий шрифт, 0:00:13.686,0:00:15.851 все однакове з верху сторінки до низу. 0:00:15.851,0:00:18.019 Але ви бачили, що в Інтернеті 0:00:18.019,0:00:20.229 веб-сторінки дуже відрізняються[br]одна від одної. 0:00:20.229,0:00:21.609 Погляньте на сайт Khan Academy: 0:00:21.609,0:00:24.652 різні кольори, шрифти і розміри. 0:00:24.652,0:00:26.819 Зробіть це зараз! 0:00:26.819,0:00:29.895 Поставте на паузу це відео і [br]перегляньте декілька веб-сайтів. 0:00:29.895,0:00:31.625 Чим вони відрізняються? 0:00:31.625,0:00:35.012 Що вам подобається, [br]у їхніх стилях, а що ні? 0:00:35.012,0:00:37.204 Я почекаю вас тут. 0:00:38.051,0:00:40.750 Важливо побачити, наскільки різними[br]можуть бути сайти. 0:00:40.750,0:00:43.229 Тому що дуже скоро ви [br]також навчитесь робити 0:00:43.229,0:00:45.442 ваші сторінки нетиповими,[br]ви захочете зробити їх такими, щоб 0:00:45.442,0:00:48.535 вони приносили вам задоволення,[br]оскільки вони представляють вас, 0:00:48.535,0:00:51.198 і в той же час приносили задоволення іншим. 0:00:51.198,0:00:53.001 Щоб змонтувати сторінку,[br]нам потрібно 0:00:53.001,0:00:55.455 вивчити нову мову - CSS. 0:00:55.455,0:00:57.878 Вона розшифровується як[br]"Каскадні таблиці стилів" 0:00:57.878,0:00:59.759 і містить в собі стилі, які ми[br]можемо застосувати 0:00:59.759,0:01:01.735 до різних частин нашої сторінки. 0:01:01.735,0:01:06.306 Ми вставили CSS в HTML, [br]але насправді – це не HTML. 0:01:06.306,0:01:08.025 Тому ми маємо вивчити нову мову 0:01:08.025,0:01:11.165 і постаратись не сплутати CSS і HTML. 0:01:11.165,0:01:13.957 Ми побачимо, як використовувати [br]стилі CSS у різних аспектах, 0:01:13.957,0:01:16.696 таких як шрифти, розміри і [br]розмітка сторінки. 0:01:16.696,0:01:20.548 Однак почнемо ми з [br]дечого цікавішого – кольору. 0:01:20.548,0:01:22.184 Як щодо того, щоб змінити заголовки 0:01:22.184,0:01:25.531 на сторінці на трав'янисто-зелений? 0:01:25.531,0:01:28.404 Для початку нам потрібно додати [br]тег (укр. "стиль") 0:01:28.404,0:01:30.523 всередині контейнера <head>. 0:01:31.845,0:01:34.461 Коли браузер побачить це,[br]він подумає: 0:01:34.461,0:01:37.388 "Добре, все, що тут є – це CSS. 0:01:37.388,0:01:40.061 Замість парсера HTML, [br]я використаю парсер CSS, [br] 0:01:40.061,0:01:43.105 щоб зрозуміти його." 0:01:43.459,0:01:48.312 Тут ми додамо правило стилю CSS. 0:01:48.312,0:01:50.886 Правило стилю має селектор,[br]який каже браузеру, 0:01:50.886,0:01:54.063 якій частині сторінки потрібно[br]додати стиль, і пояснення, 0:01:54.063,0:01:56.791 які кажуть браузеру,[br]як оформити цю частину. 0:01:56.791,0:02:00.336 Якщо ми хочемо оформити[br]всі заголовки h2 на нашій сторінці, 0:02:00.336,0:02:03.995 ми вкажемо селектор – h2. 0:02:03.995,0:02:06.010 Потім поставимо фігурні дужки. 0:02:06.010,0:02:08.475 Переконайтесь, що вони фігурні,[br]а не квадратні. 0:02:08.475,0:02:10.151 Квадратні не спрацюють. 0:02:10.151,0:02:12.797 Всередині ми напишемо пояснення, 0:02:12.797,0:02:14.402 які мають властивості і значення. 0:02:14.402,0:02:19.240 Для того, щоб змінити колір тексту, ми [br]використаємо властивість "color" (укр. колір ). 0:02:19.240,0:02:22.901 Потім ми ставимо двокрапку, і тепер[br]нам потрібно придумати значення. 0:02:22.901,0:02:25.777 Нам потрібно сказати браузеру,[br]який колір ми хочемо. 0:02:25.777,0:02:28.706 Гаразд, ми можемо просто написати[br]"зелений" (англ. green). 0:02:29.306,0:02:32.197 Він зрозуміє, тому що зелений – [br]це загальновживаний колір. 0:02:32.197,0:02:33.833 Але це не той зелений, [br]який я хочу. 0:02:33.833,0:02:35.930 Я хочу трав'янисто-зелений. 0:02:35.930,0:02:39.422 Якщо я напишу трав'янисто-зелений, оу... 0:02:39.422,0:02:42.401 Тепер браузер спантеличений,[br]і тому робить загаловок 0:02:42.401,0:02:45.656 знову чорним, тому що він ніколи [br]не чув про трав'янисто-зелений колір. 0:02:45.656,0:02:48.446 Якщо ми хочемо мати можливість[br]встановити будь-який колір, 0:02:48.446,0:02:51.638 ми маємо використати[br]спектр RGB (R - red, G - gree, B - blue), 0:02:51.638,0:02:54.150 про який ви, можливо, чули[br]на уроках мистецтва. 0:02:54.150,0:02:55.996 Вам не потрібно бути в цьому експертом, 0:02:55.996,0:02:58.806 тому що тут ми маємо для вас[br]палітру кольорів RGB. 0:02:58.806,0:03:03.806 Щоб використати її, просто [br]напишіть "rgb" і круглі дужки. 0:03:04.083,0:03:06.559 З'явиться палітра кольорів,[br]і рухаючи мишкою 0:03:06.559,0:03:09.330 всередині неї, ви зможете [br]вибрати собі колір 0:03:09.330,0:03:12.405 і побачити, як ваша сторінка [br]відразу ж змінюється. 0:03:12.405,0:03:14.874 Коли ви будете задоволені,[br]клацніть мишкою. 0:03:14.874,0:03:17.024 Добре, а ви знаєте, що означають ці [br]три числа, 0:03:17.024,0:03:20.407 що знаходяться всередині дужок? 0:03:20.407,0:03:22.933 Це компоненти червоного, [br]зеленого та синього, 0:03:22.933,0:03:25.818 що утворюють потрібний нам колір. 0:03:26.464,0:03:29.928 Основна річ про селектор h2,[br]який ми використали, 0:03:29.928,0:03:33.940 це те, що він такий же самий, [br]як і всі інші h2 на цій сторінці. 0:03:33.940,0:03:36.532 Тому ми можемо змінити одразу [br]декілька заголовків, 0:03:36.532,0:03:40.360 оскільки ми хочемо, щоб всі заголовки h2,[br]які будуть знайдені 0:03:40.360,0:03:43.475 на сторінці, були зеленими. 0:03:43.475,0:03:45.123 Якщо ви продовжите вивчати CSS, [br]ви знайдете 0:03:45.123,0:03:47.482 багато інших способів змінювати[br]частини сторінки, 0:03:47.482,0:03:50.020 наприклад, зможете змінити [br]лише декілька заголовків h2. 0:03:50.020,0:03:54.408 Але ви можете зробити багато [br]навіть з цими основними селекторами. 0:03:54.408,0:03:56.318 Як щодо того, щоб вивчити[br]ще одне правило стилю CSS? 0:03:56.318,0:03:59.213 Цього разу ми зробимо[br]фон блакитним. 0:03:59.213,0:04:02.056 Як ми можемо змінити [br]фон на сторінці? 0:04:02.056,0:04:05.811 Гаразд, який тег [br]охоплює цілу сторінку? 0:04:05.811,0:04:07.204 Це не <h1>, 0:04:07.204,0:04:10.571 не <p>, і не <img>. 0:04:10.571,0:04:13.168 Це тег <body> (тег тіла сторінки). Пам'ятай,[br]все, що можна побачити на сайті, 0:04:13.168,0:04:16.201 завжди знаходиться всередині тега <body>. 0:04:16.201,0:04:18.380 Тому, якщо ми хочемо оформити[br]всю сторінку, 0:04:18.380,0:04:22.617 ми маємо використати селектор[br]і вибрати цей тег. 0:04:22.617,0:04:25.412 Тому ми пишемо "body". 0:04:26.905,0:04:31.278 Тепер замість "колір", ми напишемо[br]"колір фону"(англ. "background color"), 0:04:31.709,0:04:36.359 ставимо двокрапку, далі "rgb" і круглі дужки. 0:04:36.359,0:04:41.049 З'являється палітра, [br]і я обираю блакитний колір, 0:04:41.049,0:04:45.646 що наштовхує мене на думки про [br]наляканих кроликів під блакитним небом. 0:04:45.646,0:04:46.661 Та-дам! 0:04:46.661,0:04:49.370 Погляньте на мою стильну сторінку. 0:04:49.370,0:04:51.494 Існують сотні інших властивостей СSS, 0:04:51.494,0:04:54.116 окрім кольору та кольору фону, 0:04:54.116,0:04:56.743 але з цих найцікавіше починати. 0:04:56.758,0:04:59.157 Після того, як я закінчу лекцію,[br]побавтесь з кольорами, 0:04:59.157,0:05:01.534 які я вибрала і зробіть так,[br]щоб ця сторінка 0:05:01.534,0:05:04.043 виглядала, як ваша, а не як моя. 0:05:04.043,0:05:06.489 Добре? Починайте! 0:05:07.671,0:05:12.501 Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.ogr"