WEBVTT

00:00:00.720 --> 00:00:04.165
Ви вже вивчили, як використовувати
CSS, щоб оформити текст,

00:00:04.165 --> 00:00:05.534
але ми також можемо 
використовувати CSS для того,

00:00:05.534 --> 00:00:07.820
щоб повністю змінити розмітку
нашої сторінки.

00:00:07.820 --> 00:00:10.108
Це означає, що ми можемо переміщувати
елементи, змінювати розмір,

00:00:10.108 --> 00:00:11.777
навіть накладати елементи один на однин.

00:00:12.010 --> 00:00:14.501
Але якими є елементи, які ми 
хочемо перемістити?

00:00:14.501 --> 00:00:16.938
Інколи це одиничні елементи,
які ми створили,

00:00:16.938 --> 00:00:18.931
такі як певні абзаци

00:00:18.931 --> 00:00:21.231
чи певні заголовки.

00:00:21.231 --> 00:00:23.775
Але часто — це групи елементів,


00:00:23.775 --> 00:00:26.975
такі як певна частина тексту

00:00:26.975 --> 00:00:30.489
чи заголовок та декілька абзаців.

00:00:31.504 --> 00:00:34.365
Для того щоб переміщувати їх
як єдиний елемент,

00:00:34.365 --> 00:00:36.785
ми маємо вивчити два нові теги HTML,

00:00:36.805 --> 00:00:39.225
які ми називаємо згрупованими елементами.

00:00:39.246 --> 00:00:42.670
Ми не говорили про них до вивчення СSS,
тому що вони використовуються

00:00:42.670 --> 00:00:44.210
лише в поєднанні з СSS.

00:00:44.230 --> 00:00:47.275
Вони не мають семантичного
значення для браузера.

00:00:47.275 --> 00:00:50.826
Перший тег — це ,
і він використовується,

00:00:50.826 --> 00:00:53.256
для того щоб вибрати частину тексту.

00:00:53.256 --> 00:00:56.485
Скажімо, ми хочемо зафарбувати
це слово "Love" в червоний колір.

00:00:56.485 --> 00:01:00.522
І ми хочемо зафарбувати лише одне слово,
а не весь заголовок.

00:01:00.522 --> 00:01:06.498
Ми поставимо курсор перед цим словом,
напишемо початковий тег ,

00:01:06.499 --> 00:01:10.519
поставимо курсор після слова
і напишемо кінцевий тег.

00:01:10.528 --> 00:01:13.014
Тепер ми хочемо додати стиль
цій частині з тегами .

00:01:13.014 --> 00:01:15.783
Ми можемо створити правило, яке
зафарбує усі теги  на сторінці,

00:01:15.783 --> 00:01:18.558
але ми не хочемо,
щоб всі вони були червоні.

00:01:18.558 --> 00:01:25.950
Ми дамо цьому тегу клас
"lovey-dovey" (кохання-зітхання)

00:01:25.966 --> 00:01:30.433
і додамо правило "лише для 
елементів, які мають такий клас".

00:01:30.433 --> 00:01:34.615
Отже, .lovey-dovey {color: red}.

00:01:34.615 --> 00:01:38.133
Подивіться на слово "Love" тепер!

00:01:38.133 --> 00:01:41.177
Тег  використовується для
вибору окремих частин тексту,

00:01:41.177 --> 00:01:43.517
як же ми можемо обрати
декілька елементів разом?

00:01:43.517 --> 00:01:45.577
Тут нам допоможе тег .

00:01:45.577 --> 00:01:48.387
Скажімо, ми хочемо згрупувати
цю нижню частину:

00:01:48.387 --> 00:01:51.774
заголовок "Official Info", абзаци 
і зображення під ним.

00:01:51.774 --> 00:01:59.894
Щоб зробити це, я поставлю курсор перед тегом
 і напишу початковий тег .

00:01:59.894 --> 00:02:05.529
Потім перейду вниз до останнього абзацу
і закрию тег .

00:02:05.529 --> 00:02:08.337
Ми маємо тег  і тепер
нам потрібно додати стиль.

00:02:08.337 --> 00:02:11.428
Щоб оформити його,
я додам "id":

00:02:11.428 --> 00:02:14.946
official-info.

00:02:14.946 --> 00:02:16.987
Потім тут додам для нього правило.

00:02:16.987 --> 00:02:22.302
#official-info і background.

00:02:22.302 --> 00:02:23.935
Зробімо його сіреньким.

00:02:23.935 --> 00:02:26.934
Ми виберемо... цей. Чудово!

00:02:27.133 --> 00:02:29.626
Тепер ви можете побачити,
що тег  став блоком сірого кольору,

00:02:29.626 --> 00:02:31.791
який містить усі елементи.

00:02:31.791 --> 00:02:34.267
Він має інший вигляд, ніж якби ми
додали сірий фон

00:02:34.267 --> 00:02:35.947
кожному з елементів окремо.

00:02:35.998 --> 00:02:39.518
Якщо б ми зробили так, проміжки
між елементами не були б сірими.

00:02:39.520 --> 00:02:43.530
Нам потрібен тег , якщо ми хочемо,
щоб блок був суцільним.

00:02:44.710 --> 00:02:48.315
Ви можете розглядати тег , як можливість
згрупувати частини тексту,

00:02:48.315 --> 00:02:52.489
а тег  — як можливість згрупувати
окремі елементи.

00:02:52.489 --> 00:02:55.458
Але є й інший спосіб, щоб їх розрізнити.

00:02:55.458 --> 00:02:58.424
Бачите, існує два типи елементів
в світі CSS:

00:02:58.424 --> 00:03:00.169
рядкові і блокові.

00:03:00.169 --> 00:03:03.409
Рядковий елемент 
не має нового рядка після себе,

00:03:03.570 --> 00:03:06.726
тобто якщо цих елементів буде декілька,
вони будуть в одному рядку.

00:03:06.726 --> 00:03:11.841
Декілька прикладів, про які ми вже
говорили — теги  та .

00:03:11.841 --> 00:03:13.962
І ви можете побачити, що це
зображення "наштовхується"

00:03:13.962 --> 00:03:16.431
на текст, який йде після нього.

00:03:16.616 --> 00:03:18.326
Після зображення немає
порожнього рядка.

00:03:18.657 --> 00:03:24.617
Блокові елементи мають рядок після себе,
і більшість елементів в HTML — cаме такі.

00:03:24.847 --> 00:03:26.978
Подивіться на всі інші 
приклади на цій сторінці:

00:03:27.041 --> 00:03:30.281
заголовки, абзаци, список.

00:03:30.799 --> 00:03:33.699
Браузер ставить порожні рядки
після всіх цих елементів,

00:03:33.732 --> 00:03:36.152
тому вам не потрібно писати
кожного разу тег 
.

00:03:37.027 --> 00:03:39.539
Що це має спільного з тегами 
та ?

00:03:39.835 --> 00:03:46.973
Що ж,  створює рядковий елемент,
а  — блоковий.

00:03:47.252 --> 00:03:53.702
Це означає, що якщо ви додасте 
і не додасте жодного іншого стилю,

00:03:54.200 --> 00:03:58.160
браузер розіб'є на частини 
цю частину сторінки.

00:03:58.160 --> 00:04:00.534
Так що ця частина тексту, 
обгорнута тегом ,

00:04:00.534 --> 00:04:02.984
тепер матиме нові рядки до і після.

00:04:02.998 --> 00:04:05.495
І, можливо, це те, що вам потрібно.


00:04:05.495 --> 00:04:07.525
Просто пам'ятайте про цю відмінність.

00:04:07.553 --> 00:04:09.383
І продовжуйте практикуватись, 
тому що ми можемо зробити

00:04:09.395 --> 00:04:10.885
дуже багато з цими тегами.

00:04:10.885 --> 00:04:12.631
Особливо з могутнім тегом .

00:04:12.679 --> 00:04:17.709
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодіний фонд "MagneticOne.org"