[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:00.70,0:00:02.16,Default,,0000,0000,0000,,Ми вивчили, як зробити гарну\N Dialogue: 0,0:00:02.16,0:00:04.12,Default,,0000,0000,0000,,наповнену веб-сторінку з \Nвиділеним текстом Dialogue: 0,0:00:04.12,0:00:07.95,Default,,0000,0000,0000,,та картинками, але чогось\Nне вистачає – стилю. Dialogue: 0,0:00:07.95,0:00:09.40,Default,,0000,0000,0000,,Моя сторінка виглядає так само, Dialogue: 0,0:00:09.40,0:00:10.98,Default,,0000,0000,0000,,як і ті сторінки, які робили ви. Dialogue: 0,0:00:10.98,0:00:13.69,Default,,0000,0000,0000,,Чорний текст, білий фон, однаковий шрифт, Dialogue: 0,0:00:13.69,0:00:15.85,Default,,0000,0000,0000,,все однакове з верху сторінки до низу. Dialogue: 0,0:00:15.85,0:00:18.02,Default,,0000,0000,0000,,Але ви бачили, що в Інтернеті Dialogue: 0,0:00:18.02,0:00:20.23,Default,,0000,0000,0000,,веб-сторінки дуже відрізняються\Nодна від одної. Dialogue: 0,0:00:20.23,0:00:21.61,Default,,0000,0000,0000,,Погляньте на сайт Khan Academy: Dialogue: 0,0:00:21.61,0:00:24.65,Default,,0000,0000,0000,,різні кольори, шрифти і розміри. Dialogue: 0,0:00:24.65,0:00:26.82,Default,,0000,0000,0000,,Зробіть це зараз! Dialogue: 0,0:00:26.82,0:00:29.90,Default,,0000,0000,0000,,Поставте на паузу це відео і \Nперегляньте декілька веб-сайтів. Dialogue: 0,0:00:29.90,0:00:31.62,Default,,0000,0000,0000,,Чим вони відрізняються? Dialogue: 0,0:00:31.62,0:00:35.01,Default,,0000,0000,0000,,Що вам подобається, \Nу їхніх стилях, а що ні? Dialogue: 0,0:00:35.01,0:00:37.20,Default,,0000,0000,0000,,Я почекаю вас тут. Dialogue: 0,0:00:38.05,0:00:40.75,Default,,0000,0000,0000,,Важливо побачити, наскільки різними\Nможуть бути сайти. Dialogue: 0,0:00:40.75,0:00:43.23,Default,,0000,0000,0000,,Тому що дуже скоро ви \Nтакож навчитесь робити Dialogue: 0,0:00:43.23,0:00:45.44,Default,,0000,0000,0000,,ваші сторінки нетиповими,\Nви захочете зробити їх такими, щоб Dialogue: 0,0:00:45.44,0:00:48.54,Default,,0000,0000,0000,,вони приносили вам задоволення,\Nоскільки вони представляють вас, Dialogue: 0,0:00:48.54,0:00:51.20,Default,,0000,0000,0000,,і в той же час приносили задоволення іншим. Dialogue: 0,0:00:51.20,0:00:53.00,Default,,0000,0000,0000,,Щоб змонтувати сторінку,\Nнам потрібно Dialogue: 0,0:00:53.00,0:00:55.46,Default,,0000,0000,0000,,вивчити нову мову - CSS. Dialogue: 0,0:00:55.46,0:00:57.88,Default,,0000,0000,0000,,Вона розшифровується як\N"Каскадні таблиці стилів" Dialogue: 0,0:00:57.88,0:00:59.76,Default,,0000,0000,0000,,і містить в собі стилі, які ми\Nможемо застосувати Dialogue: 0,0:00:59.76,0:01:01.74,Default,,0000,0000,0000,,до різних частин нашої сторінки. Dialogue: 0,0:01:01.74,0:01:06.31,Default,,0000,0000,0000,,Ми вставили CSS в HTML, \Nале насправді – це не HTML. Dialogue: 0,0:01:06.31,0:01:08.02,Default,,0000,0000,0000,,Тому ми маємо вивчити нову мову Dialogue: 0,0:01:08.02,0:01:11.16,Default,,0000,0000,0000,,і постаратись не сплутати CSS і HTML. Dialogue: 0,0:01:11.16,0:01:13.96,Default,,0000,0000,0000,,Ми побачимо, як використовувати \Nстилі CSS у різних аспектах, Dialogue: 0,0:01:13.96,0:01:16.70,Default,,0000,0000,0000,,таких як шрифти, розміри і \Nрозмітка сторінки. Dialogue: 0,0:01:16.70,0:01:20.55,Default,,0000,0000,0000,,Однак почнемо ми з \Nдечого цікавішого – кольору. Dialogue: 0,0:01:20.55,0:01:22.18,Default,,0000,0000,0000,,Як щодо того, щоб змінити заголовки Dialogue: 0,0:01:22.18,0:01:25.53,Default,,0000,0000,0000,,на сторінці на трав'янисто-зелений? Dialogue: 0,0:01:25.53,0:01:28.40,Default,,0000,0000,0000,,Для початку нам потрібно додати \Nтег (укр. "стиль") Dialogue: 0,0:01:28.40,0:01:30.52,Default,,0000,0000,0000,,всередині контейнера <head>. Dialogue: 0,0:01:31.84,0:01:34.46,Default,,0000,0000,0000,,Коли браузер побачить це,\Nвін подумає: Dialogue: 0,0:01:34.46,0:01:37.39,Default,,0000,0000,0000,,"Добре, все, що тут є – це CSS. Dialogue: 0,0:01:37.39,0:01:40.06,Default,,0000,0000,0000,,Замість парсера HTML, \Nя використаю парсер CSS, \N Dialogue: 0,0:01:40.06,0:01:43.10,Default,,0000,0000,0000,,щоб зрозуміти його." Dialogue: 0,0:01:43.46,0:01:48.31,Default,,0000,0000,0000,,Тут ми додамо правило стилю CSS. Dialogue: 0,0:01:48.31,0:01:50.89,Default,,0000,0000,0000,,Правило стилю має селектор,\Nякий каже браузеру, Dialogue: 0,0:01:50.89,0:01:54.06,Default,,0000,0000,0000,,якій частині сторінки потрібно\Nдодати стиль, і пояснення, Dialogue: 0,0:01:54.06,0:01:56.79,Default,,0000,0000,0000,,які кажуть браузеру,\Nяк оформити цю частину. Dialogue: 0,0:01:56.79,0:02:00.34,Default,,0000,0000,0000,,Якщо ми хочемо оформити\Nвсі заголовки h2 на нашій сторінці, Dialogue: 0,0:02:00.34,0:02:03.100,Default,,0000,0000,0000,,ми вкажемо селектор – h2. Dialogue: 0,0:02:03.100,0:02:06.01,Default,,0000,0000,0000,,Потім поставимо фігурні дужки. Dialogue: 0,0:02:06.01,0:02:08.48,Default,,0000,0000,0000,,Переконайтесь, що вони фігурні,\Nа не квадратні. Dialogue: 0,0:02:08.48,0:02:10.15,Default,,0000,0000,0000,,Квадратні не спрацюють. Dialogue: 0,0:02:10.15,0:02:12.80,Default,,0000,0000,0000,,Всередині ми напишемо пояснення, Dialogue: 0,0:02:12.80,0:02:14.40,Default,,0000,0000,0000,,які мають властивості і значення. Dialogue: 0,0:02:14.40,0:02:19.24,Default,,0000,0000,0000,,Для того, щоб змінити колір тексту, ми \Nвикористаємо властивість "color" (укр. колір ). Dialogue: 0,0:02:19.24,0:02:22.90,Default,,0000,0000,0000,,Потім ми ставимо двокрапку, і тепер\Nнам потрібно придумати значення. Dialogue: 0,0:02:22.90,0:02:25.78,Default,,0000,0000,0000,,Нам потрібно сказати браузеру,\Nякий колір ми хочемо. Dialogue: 0,0:02:25.78,0:02:28.71,Default,,0000,0000,0000,,Гаразд, ми можемо просто написати\N"зелений" (англ. green). Dialogue: 0,0:02:29.31,0:02:32.20,Default,,0000,0000,0000,,Він зрозуміє, тому що зелений – \Nце загальновживаний колір. Dialogue: 0,0:02:32.20,0:02:33.83,Default,,0000,0000,0000,,Але це не той зелений, \Nякий я хочу. Dialogue: 0,0:02:33.83,0:02:35.93,Default,,0000,0000,0000,,Я хочу трав'янисто-зелений. Dialogue: 0,0:02:35.93,0:02:39.42,Default,,0000,0000,0000,,Якщо я напишу трав'янисто-зелений, оу... Dialogue: 0,0:02:39.42,0:02:42.40,Default,,0000,0000,0000,,Тепер браузер спантеличений,\Nі тому робить загаловок Dialogue: 0,0:02:42.40,0:02:45.66,Default,,0000,0000,0000,,знову чорним, тому що він ніколи \Nне чув про трав'янисто-зелений колір. Dialogue: 0,0:02:45.66,0:02:48.45,Default,,0000,0000,0000,,Якщо ми хочемо мати можливість\Nвстановити будь-який колір, Dialogue: 0,0:02:48.45,0:02:51.64,Default,,0000,0000,0000,,ми маємо використати\Nспектр RGB (R - red, G - gree, B - blue), Dialogue: 0,0:02:51.64,0:02:54.15,Default,,0000,0000,0000,,про який ви, можливо, чули\Nна уроках мистецтва. Dialogue: 0,0:02:54.15,0:02:55.100,Default,,0000,0000,0000,,Вам не потрібно бути в цьому експертом, Dialogue: 0,0:02:55.100,0:02:58.81,Default,,0000,0000,0000,,тому що тут ми маємо для вас\Nпалітру кольорів RGB. Dialogue: 0,0:02:58.81,0:03:03.81,Default,,0000,0000,0000,,Щоб використати її, просто \Nнапишіть "rgb" і круглі дужки. Dialogue: 0,0:03:04.08,0:03:06.56,Default,,0000,0000,0000,,З'явиться палітра кольорів,\Nі рухаючи мишкою Dialogue: 0,0:03:06.56,0:03:09.33,Default,,0000,0000,0000,,всередині неї, ви зможете \Nвибрати собі колір Dialogue: 0,0:03:09.33,0:03:12.40,Default,,0000,0000,0000,,і побачити, як ваша сторінка \Nвідразу ж змінюється. Dialogue: 0,0:03:12.40,0:03:14.87,Default,,0000,0000,0000,,Коли ви будете задоволені,\Nклацніть мишкою. Dialogue: 0,0:03:14.87,0:03:17.02,Default,,0000,0000,0000,,Добре, а ви знаєте, що означають ці \Nтри числа, Dialogue: 0,0:03:17.02,0:03:20.41,Default,,0000,0000,0000,,що знаходяться всередині дужок? Dialogue: 0,0:03:20.41,0:03:22.93,Default,,0000,0000,0000,,Це компоненти червоного, \Nзеленого та синього, Dialogue: 0,0:03:22.93,0:03:25.82,Default,,0000,0000,0000,,що утворюють потрібний нам колір. Dialogue: 0,0:03:26.46,0:03:29.93,Default,,0000,0000,0000,,Основна річ про селектор h2,\Nякий ми використали, Dialogue: 0,0:03:29.93,0:03:33.94,Default,,0000,0000,0000,,це те, що він такий же самий, \Nяк і всі інші h2 на цій сторінці. Dialogue: 0,0:03:33.94,0:03:36.53,Default,,0000,0000,0000,,Тому ми можемо змінити одразу \Nдекілька заголовків, Dialogue: 0,0:03:36.53,0:03:40.36,Default,,0000,0000,0000,,оскільки ми хочемо, щоб всі заголовки h2,\Nякі будуть знайдені Dialogue: 0,0:03:40.36,0:03:43.48,Default,,0000,0000,0000,,на сторінці, були зеленими. Dialogue: 0,0:03:43.48,0:03:45.12,Default,,0000,0000,0000,,Якщо ви продовжите вивчати CSS, \Nви знайдете Dialogue: 0,0:03:45.12,0:03:47.48,Default,,0000,0000,0000,,багато інших способів змінювати\Nчастини сторінки, Dialogue: 0,0:03:47.48,0:03:50.02,Default,,0000,0000,0000,,наприклад, зможете змінити \Nлише декілька заголовків h2. Dialogue: 0,0:03:50.02,0:03:54.41,Default,,0000,0000,0000,,Але ви можете зробити багато \Nнавіть з цими основними селекторами. Dialogue: 0,0:03:54.41,0:03:56.32,Default,,0000,0000,0000,,Як щодо того, щоб вивчити\Nще одне правило стилю CSS? Dialogue: 0,0:03:56.32,0:03:59.21,Default,,0000,0000,0000,,Цього разу ми зробимо\Nфон блакитним. Dialogue: 0,0:03:59.21,0:04:02.06,Default,,0000,0000,0000,,Як ми можемо змінити \Nфон на сторінці? Dialogue: 0,0:04:02.06,0:04:05.81,Default,,0000,0000,0000,,Гаразд, який тег \Nохоплює цілу сторінку? Dialogue: 0,0:04:05.81,0:04:07.20,Default,,0000,0000,0000,,Це не <h1>, Dialogue: 0,0:04:07.20,0:04:10.57,Default,,0000,0000,0000,,не <p>, і не <img>. Dialogue: 0,0:04:10.57,0:04:13.17,Default,,0000,0000,0000,,Це тег <body> (тег тіла сторінки). Пам'ятай,\Nвсе, що можна побачити на сайті, Dialogue: 0,0:04:13.17,0:04:16.20,Default,,0000,0000,0000,,завжди знаходиться всередині тега <body>. Dialogue: 0,0:04:16.20,0:04:18.38,Default,,0000,0000,0000,,Тому, якщо ми хочемо оформити\Nвсю сторінку, Dialogue: 0,0:04:18.38,0:04:22.62,Default,,0000,0000,0000,,ми маємо використати селектор\Nі вибрати цей тег. Dialogue: 0,0:04:22.62,0:04:25.41,Default,,0000,0000,0000,,Тому ми пишемо "body". Dialogue: 0,0:04:26.90,0:04:31.28,Default,,0000,0000,0000,,Тепер замість "колір", ми напишемо\N"колір фону"(англ. "background color"), Dialogue: 0,0:04:31.71,0:04:36.36,Default,,0000,0000,0000,,ставимо двокрапку, далі "rgb" і круглі дужки. Dialogue: 0,0:04:36.36,0:04:41.05,Default,,0000,0000,0000,,З'являється палітра, \Nі я обираю блакитний колір, Dialogue: 0,0:04:41.05,0:04:45.65,Default,,0000,0000,0000,,що наштовхує мене на думки про \Nналяканих кроликів під блакитним небом. Dialogue: 0,0:04:45.65,0:04:46.66,Default,,0000,0000,0000,,Та-дам! Dialogue: 0,0:04:46.66,0:04:49.37,Default,,0000,0000,0000,,Погляньте на мою стильну сторінку. Dialogue: 0,0:04:49.37,0:04:51.49,Default,,0000,0000,0000,,Існують сотні інших властивостей СSS, Dialogue: 0,0:04:51.49,0:04:54.12,Default,,0000,0000,0000,,окрім кольору та кольору фону, Dialogue: 0,0:04:54.12,0:04:56.74,Default,,0000,0000,0000,,але з цих найцікавіше починати. Dialogue: 0,0:04:56.76,0:04:59.16,Default,,0000,0000,0000,,Після того, як я закінчу лекцію,\Nпобавтесь з кольорами, Dialogue: 0,0:04:59.16,0:05:01.53,Default,,0000,0000,0000,,які я вибрала і зробіть так,\Nщоб ця сторінка Dialogue: 0,0:05:01.53,0:05:04.04,Default,,0000,0000,0000,,виглядала, як ваша, а не як моя. Dialogue: 0,0:05:04.04,0:05:06.49,Default,,0000,0000,0000,,Добре? Починайте! Dialogue: 0,0:05:07.67,0:05:12.50,Default,,0000,0000,0000,,Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.ogr"