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

0:00:04.165,0:00:05.534
але ми також можемо [br]використовувати CSS для того,

0:00:05.534,0:00:07.820
щоб повністю змінити розмітку[br]нашої сторінки.

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

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

0:00:12.010,0:00:14.501
Але якими є елементи, які ми [br]хочемо перемістити?

0:00:14.501,0:00:16.938
Інколи це одиничні елементи,[br]які ми створили,

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

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

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

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

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

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

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

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

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

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

0:00:44.230,0:00:47.275
Вони не мають семантичного[br]значення для браузера.

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

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

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

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

0:01:00.522,0:01:06.498
Ми поставимо курсор перед цим словом,[br]напишемо початковий тег ,

0:01:06.499,0:01:10.519
поставимо курсор після слова[br]і напишемо кінцевий тег.

0:01:10.528,0:01:13.014
Тепер ми хочемо додати стиль[br]цій частині з тегами .

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

0:01:15.783,0:01:18.558
але ми не хочемо,[br]щоб всі вони були червоні.

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

0:01:25.966,0:01:30.433
і додамо правило "лише для [br]елементів, які мають такий клас".

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

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

0:01:38.133,0:01:41.177
Тег  використовується для[br]вибору окремих частин тексту,

0:01:41.177,0:01:43.517
як же ми можемо обрати[br]декілька елементів разом?

0:01:43.517,0:01:45.577
Тут нам допоможе тег .

0:01:45.577,0:01:48.387
Скажімо, ми хочемо згрупувати[br]цю нижню частину:

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

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

0:01:59.894,0:02:05.529
Потім перейду вниз до останнього абзацу[br]і закрию тег .

0:02:05.529,0:02:08.337
Ми маємо тег  і тепер[br]нам потрібно додати стиль.

0:02:08.337,0:02:11.428
Щоб оформити його,[br]я додам "id":

0:02:11.428,0:02:14.946
official-info.

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

0:02:16.987,0:02:22.302
#official-info і background.

0:02:22.302,0:02:23.935
Зробімо його сіреньким.

0:02:23.935,0:02:26.934
Ми виберемо... цей. Чудово!

0:02:27.133,0:02:29.626
Тепер ви можете побачити,[br]що тег  став блоком сірого кольору,

0:02:29.626,0:02:31.791
який містить усі елементи.

0:02:31.791,0:02:34.267
Він має інший вигляд, ніж якби ми[br]додали сірий фон

0:02:34.267,0:02:35.947
кожному з елементів окремо.

0:02:35.998,0:02:39.518
Якщо б ми зробили так, проміжки[br]між елементами не були б сірими.

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

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

0:02:48.315,0:02:52.489
а тег  — як можливість згрупувати[br]окремі елементи.

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

0:02:55.458,0:02:58.424
Бачите, існує два типи елементів[br]в світі CSS:

0:02:58.424,0:03:00.169
рядкові і блокові.

0:03:00.169,0:03:03.409
Рядковий елемент [br]не має нового рядка після себе,

0:03:03.570,0:03:06.726
тобто якщо цих елементів буде декілька,[br]вони будуть в одному рядку.

0:03:06.726,0:03:11.841
Декілька прикладів, про які ми вже[br]говорили — теги  та .

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

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

0:03:16.616,0:03:18.326
Після зображення немає[br]порожнього рядка.

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

0:03:24.847,0:03:26.978
Подивіться на всі інші [br]приклади на цій сторінці:

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

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

0:03:33.732,0:03:36.152
тому вам не потрібно писати[br]кожного разу тег [br].

0:03:37.027,0:03:39.539
Що це має спільного з тегами [br]та ?

0:03:39.835,0:03:46.973
Що ж,  створює рядковий елемент,[br]а  — блоковий.

0:03:47.252,0:03:53.702
Це означає, що якщо ви додасте [br]і не додасте жодного іншого стилю,

0:03:54.200,0:03:58.160
браузер розіб'є на частини [br]цю частину сторінки.

0:03:58.160,0:04:00.534
Так що ця частина тексту, [br]обгорнута тегом ,

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

0:04:02.998,0:04:05.495
І, можливо, це те, що вам потрібно.[br]

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

0:04:07.553,0:04:09.383
І продовжуйте практикуватись, [br]тому що ми можемо зробити

0:04:09.395,0:04:10.885
дуже багато з цими тегами.

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

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