[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.72,0:00:04.16,Default,,0000,0000,0000,,Ви вже вивчили, як використовувати\NCSS, щоб оформити текст,
Dialogue: 0,0:00:04.16,0:00:05.53,Default,,0000,0000,0000,,але ми також можемо \Nвикористовувати CSS для того,
Dialogue: 0,0:00:05.53,0:00:07.82,Default,,0000,0000,0000,,щоб повністю змінити розмітку\Nнашої сторінки.
Dialogue: 0,0:00:07.82,0:00:10.11,Default,,0000,0000,0000,,Це означає, що ми можемо переміщувати\Nелементи, змінювати розмір,
Dialogue: 0,0:00:10.11,0:00:11.78,Default,,0000,0000,0000,,навіть накладати елементи один на однин.
Dialogue: 0,0:00:12.01,0:00:14.50,Default,,0000,0000,0000,,Але якими є елементи, які ми \Nхочемо перемістити?
Dialogue: 0,0:00:14.50,0:00:16.94,Default,,0000,0000,0000,,Інколи це одиничні елементи,\Nякі ми створили,
Dialogue: 0,0:00:16.94,0:00:18.93,Default,,0000,0000,0000,,такі як певні абзаци
Dialogue: 0,0:00:18.93,0:00:21.23,Default,,0000,0000,0000,,чи певні заголовки.
Dialogue: 0,0:00:21.23,0:00:23.78,Default,,0000,0000,0000,,Але часто — це групи елементів,\N
Dialogue: 0,0:00:23.78,0:00:26.98,Default,,0000,0000,0000,,такі як певна частина тексту
Dialogue: 0,0:00:26.98,0:00:30.49,Default,,0000,0000,0000,,чи заголовок та декілька абзаців.
Dialogue: 0,0:00:31.50,0:00:34.36,Default,,0000,0000,0000,,Для того щоб переміщувати їх\Nяк єдиний елемент,
Dialogue: 0,0:00:34.36,0:00:36.78,Default,,0000,0000,0000,,ми маємо вивчити два нові теги HTML,
Dialogue: 0,0:00:36.80,0:00:39.22,Default,,0000,0000,0000,,які ми називаємо згрупованими елементами.
Dialogue: 0,0:00:39.25,0:00:42.67,Default,,0000,0000,0000,,Ми не говорили про них до вивчення СSS,\Nтому що вони використовуються
Dialogue: 0,0:00:42.67,0:00:44.21,Default,,0000,0000,0000,,лише в поєднанні з СSS.
Dialogue: 0,0:00:44.23,0:00:47.28,Default,,0000,0000,0000,,Вони не мають семантичного\Nзначення для браузера.
Dialogue: 0,0:00:47.28,0:00:50.83,Default,,0000,0000,0000,,Перший тег — це ,\Nі він використовується,
Dialogue: 0,0:00:50.83,0:00:53.26,Default,,0000,0000,0000,,для того щоб вибрати частину тексту.
Dialogue: 0,0:00:53.26,0:00:56.48,Default,,0000,0000,0000,,Скажімо, ми хочемо зафарбувати\Nце слово "Love" в червоний колір.
Dialogue: 0,0:00:56.48,0:01:00.52,Default,,0000,0000,0000,,І ми хочемо зафарбувати лише одне слово,\Nа не весь заголовок.
Dialogue: 0,0:01:00.52,0:01:06.50,Default,,0000,0000,0000,,Ми поставимо курсор перед цим словом,\Nнапишемо початковий тег ,
Dialogue: 0,0:01:06.50,0:01:10.52,Default,,0000,0000,0000,,поставимо курсор після слова\Nі напишемо кінцевий тег.
Dialogue: 0,0:01:10.53,0:01:13.01,Default,,0000,0000,0000,,Тепер ми хочемо додати стиль\Nцій частині з тегами .
Dialogue: 0,0:01:13.01,0:01:15.78,Default,,0000,0000,0000,,Ми можемо створити правило, яке\Nзафарбує усі теги  на сторінці,
Dialogue: 0,0:01:15.78,0:01:18.56,Default,,0000,0000,0000,,але ми не хочемо,\Nщоб всі вони були червоні.
Dialogue: 0,0:01:18.56,0:01:25.95,Default,,0000,0000,0000,,Ми дамо цьому тегу клас\N"lovey-dovey" (кохання-зітхання)
Dialogue: 0,0:01:25.97,0:01:30.43,Default,,0000,0000,0000,,і додамо правило "лише для \Nелементів, які мають такий клас".
Dialogue: 0,0:01:30.43,0:01:34.62,Default,,0000,0000,0000,,Отже, .lovey-dovey {color: red}.
Dialogue: 0,0:01:34.62,0:01:38.13,Default,,0000,0000,0000,,Подивіться на слово "Love" тепер!
Dialogue: 0,0:01:38.13,0:01:41.18,Default,,0000,0000,0000,,Тег  використовується для\Nвибору окремих частин тексту,
Dialogue: 0,0:01:41.18,0:01:43.52,Default,,0000,0000,0000,,як же ми можемо обрати\Nдекілька елементів разом?
Dialogue: 0,0:01:43.52,0:01:45.58,Default,,0000,0000,0000,,Тут нам допоможе тег .
Dialogue: 0,0:01:45.58,0:01:48.39,Default,,0000,0000,0000,,Скажімо, ми хочемо згрупувати\Nцю нижню частину:
Dialogue: 0,0:01:48.39,0:01:51.77,Default,,0000,0000,0000,,заголовок "Official Info", абзаци \Nі зображення під ним.
Dialogue: 0,0:01:51.77,0:01:59.89,Default,,0000,0000,0000,,Щоб зробити це, я поставлю курсор перед тегом\N і напишу початковий тег .
Dialogue: 0,0:01:59.89,0:02:05.53,Default,,0000,0000,0000,,Потім перейду вниз до останнього абзацу\Nі закрию тег .
Dialogue: 0,0:02:05.53,0:02:08.34,Default,,0000,0000,0000,,Ми маємо тег  і тепер\Nнам потрібно додати стиль.
Dialogue: 0,0:02:08.34,0:02:11.43,Default,,0000,0000,0000,,Щоб оформити його,\Nя додам "id":
Dialogue: 0,0:02:11.43,0:02:14.95,Default,,0000,0000,0000,,official-info.
Dialogue: 0,0:02:14.95,0:02:16.99,Default,,0000,0000,0000,,Потім тут додам для нього правило.
Dialogue: 0,0:02:16.99,0:02:22.30,Default,,0000,0000,0000,,#official-info і background.
Dialogue: 0,0:02:22.30,0:02:23.94,Default,,0000,0000,0000,,Зробімо його сіреньким.
Dialogue: 0,0:02:23.94,0:02:26.93,Default,,0000,0000,0000,,Ми виберемо... цей. Чудово!
Dialogue: 0,0:02:27.13,0:02:29.63,Default,,0000,0000,0000,,Тепер ви можете побачити,\Nщо тег  став блоком сірого кольору,
Dialogue: 0,0:02:29.63,0:02:31.79,Default,,0000,0000,0000,,який містить усі елементи.
Dialogue: 0,0:02:31.79,0:02:34.27,Default,,0000,0000,0000,,Він має інший вигляд, ніж якби ми\Nдодали сірий фон
Dialogue: 0,0:02:34.27,0:02:35.95,Default,,0000,0000,0000,,кожному з елементів окремо.
Dialogue: 0,0:02:35.100,0:02:39.52,Default,,0000,0000,0000,,Якщо б ми зробили так, проміжки\Nміж елементами не були б сірими.
Dialogue: 0,0:02:39.52,0:02:43.53,Default,,0000,0000,0000,,Нам потрібен тег , якщо ми хочемо,\Nщоб блок був суцільним.
Dialogue: 0,0:02:44.71,0:02:48.32,Default,,0000,0000,0000,,Ви можете розглядати тег , як можливість\Nзгрупувати частини тексту,
Dialogue: 0,0:02:48.32,0:02:52.49,Default,,0000,0000,0000,,а тег  — як можливість згрупувати\Nокремі елементи.
Dialogue: 0,0:02:52.49,0:02:55.46,Default,,0000,0000,0000,,Але є й інший спосіб, щоб їх розрізнити.
Dialogue: 0,0:02:55.46,0:02:58.42,Default,,0000,0000,0000,,Бачите, існує два типи елементів\Nв світі CSS:
Dialogue: 0,0:02:58.42,0:03:00.17,Default,,0000,0000,0000,,рядкові і блокові.
Dialogue: 0,0:03:00.17,0:03:03.41,Default,,0000,0000,0000,,Рядковий елемент \Nне має нового рядка після себе,
Dialogue: 0,0:03:03.57,0:03:06.73,Default,,0000,0000,0000,,тобто якщо цих елементів буде декілька,\Nвони будуть в одному рядку.
Dialogue: 0,0:03:06.73,0:03:11.84,Default,,0000,0000,0000,,Декілька прикладів, про які ми вже\Nговорили — теги  та .
Dialogue: 0,0:03:11.84,0:03:13.96,Default,,0000,0000,0000,,І ви можете побачити, що це\Nзображення "наштовхується"
Dialogue: 0,0:03:13.96,0:03:16.43,Default,,0000,0000,0000,,на текст, який йде після нього.
Dialogue: 0,0:03:16.62,0:03:18.33,Default,,0000,0000,0000,,Після зображення немає\Nпорожнього рядка.
Dialogue: 0,0:03:18.66,0:03:24.62,Default,,0000,0000,0000,,Блокові елементи мають рядок після себе,\Nі більшість елементів в HTML — cаме такі.
Dialogue: 0,0:03:24.85,0:03:26.98,Default,,0000,0000,0000,,Подивіться на всі інші \Nприклади на цій сторінці:
Dialogue: 0,0:03:27.04,0:03:30.28,Default,,0000,0000,0000,,заголовки, абзаци, список.
Dialogue: 0,0:03:30.80,0:03:33.70,Default,,0000,0000,0000,,Браузер ставить порожні рядки\Nпісля всіх цих елементів,
Dialogue: 0,0:03:33.73,0:03:36.15,Default,,0000,0000,0000,,тому вам не потрібно писати\Nкожного разу тег \N.
Dialogue: 0,0:03:37.03,0:03:39.54,Default,,0000,0000,0000,,Що це має спільного з тегами \Nта ?
Dialogue: 0,0:03:39.84,0:03:46.97,Default,,0000,0000,0000,,Що ж,  створює рядковий елемент,\Nа  — блоковий.
Dialogue: 0,0:03:47.25,0:03:53.70,Default,,0000,0000,0000,,Це означає, що якщо ви додасте \Nі не додасте жодного іншого стилю,
Dialogue: 0,0:03:54.20,0:03:58.16,Default,,0000,0000,0000,,браузер розіб'є на частини \Nцю частину сторінки.
Dialogue: 0,0:03:58.16,0:04:00.53,Default,,0000,0000,0000,,Так що ця частина тексту, \Nобгорнута тегом ,
Dialogue: 0,0:04:00.53,0:04:02.98,Default,,0000,0000,0000,,тепер матиме нові рядки до і після.
Dialogue: 0,0:04:02.100,0:04:05.50,Default,,0000,0000,0000,,І, можливо, це те, що вам потрібно.\N
Dialogue: 0,0:04:05.50,0:04:07.52,Default,,0000,0000,0000,,Просто пам'ятайте про цю відмінність.
Dialogue: 0,0:04:07.55,0:04:09.38,Default,,0000,0000,0000,,І продовжуйте практикуватись, \Nтому що ми можемо зробити
Dialogue: 0,0:04:09.40,0:04:10.88,Default,,0000,0000,0000,,дуже багато з цими тегами.
Dialogue: 0,0:04:10.88,0:04:12.63,Default,,0000,0000,0000,,Особливо з могутнім тегом .
Dialogue: 0,0:04:12.68,0:04:17.71,Default,,0000,0000,0000,,Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодіний фонд "MagneticOne.org"