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

2
00:00:04,165 --> 00:00:05,534
але ми також можемо 
використовувати CSS для того,

3
00:00:05,534 --> 00:00:07,820
щоб повністю змінити розмітку
нашої сторінки.

4
00:00:07,820 --> 00:00:10,108
Це означає, що ми можемо переміщувати
елементи, змінювати розмір,

5
00:00:10,108 --> 00:00:11,777
навіть накладати елементи один на однин.

6
00:00:12,010 --> 00:00:14,501
Але якими є елементи, які ми 
хочемо перемістити?

7
00:00:14,501 --> 00:00:16,938
Інколи це одиничні елементи,
які ми створили,

8
00:00:16,938 --> 00:00:18,931
такі як певні абзаци

9
00:00:18,931 --> 00:00:21,231
чи певні заголовки.

10
00:00:21,231 --> 00:00:23,775
Але часто — це групи елементів,


11
00:00:23,775 --> 00:00:26,975
такі як певна частина тексту

12
00:00:26,975 --> 00:00:30,489
чи заголовок та декілька абзаців.

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

14
00:00:34,365 --> 00:00:36,785
ми маємо вивчити два нові теги HTML,

15
00:00:36,805 --> 00:00:39,225
які ми називаємо згрупованими елементами.

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

17
00:00:42,670 --> 00:00:44,210
лише в поєднанні з СSS.

18
00:00:44,230 --> 00:00:47,275
Вони не мають семантичного
значення для браузера.

19
00:00:47,275 --> 00:00:50,826
Перший тег — це ,
і він використовується,

20
00:00:50,826 --> 00:00:53,256
для того щоб вибрати частину тексту.

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

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

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

24
00:01:06,499 --> 00:01:10,519
поставимо курсор після слова
і напишемо кінцевий тег.

25
00:01:10,528 --> 00:01:13,014
Тепер ми хочемо додати стиль
цій частині з тегами .

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

27
00:01:15,783 --> 00:01:18,558
але ми не хочемо,
щоб всі вони були червоні.

28
00:01:18,558 --> 00:01:25,950
Ми дамо цьому тегу клас
"lovey-dovey" (кохання-зітхання)

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

30
00:01:30,433 --> 00:01:34,615
Отже, .lovey-dovey {color: red}.

31
00:01:34,615 --> 00:01:38,133
Подивіться на слово "Love" тепер!

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

33
00:01:41,177 --> 00:01:43,517
як же ми можемо обрати
декілька елементів разом?

34
00:01:43,517 --> 00:01:45,577
Тут нам допоможе тег .

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

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

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

38
00:01:59,894 --> 00:02:05,529
Потім перейду вниз до останнього абзацу
і закрию тег .

39
00:02:05,529 --> 00:02:08,337
Ми маємо тег  і тепер
нам потрібно додати стиль.

40
00:02:08,337 --> 00:02:11,428
Щоб оформити його,
я додам "id":

41
00:02:11,428 --> 00:02:14,946
official-info.

42
00:02:14,946 --> 00:02:16,987
Потім тут додам для нього правило.

43
00:02:16,987 --> 00:02:22,302
#official-info і background.

44
00:02:22,302 --> 00:02:23,935
Зробімо його сіреньким.

45
00:02:23,935 --> 00:02:26,934
Ми виберемо... цей. Чудово!

46
00:02:27,133 --> 00:02:29,626
Тепер ви можете побачити,
що тег  став блоком сірого кольору,

47
00:02:29,626 --> 00:02:31,791
який містить усі елементи.

48
00:02:31,791 --> 00:02:34,267
Він має інший вигляд, ніж якби ми
додали сірий фон

49
00:02:34,267 --> 00:02:35,947
кожному з елементів окремо.

50
00:02:35,998 --> 00:02:39,518
Якщо б ми зробили так, проміжки
між елементами не були б сірими.

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

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

53
00:02:48,315 --> 00:02:52,489
а тег  — як можливість згрупувати
окремі елементи.

54
00:02:52,489 --> 00:02:55,458
Але є й інший спосіб, щоб їх розрізнити.

55
00:02:55,458 --> 00:02:58,424
Бачите, існує два типи елементів
в світі CSS:

56
00:02:58,424 --> 00:03:00,169
рядкові і блокові.

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

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

59
00:03:06,726 --> 00:03:11,841
Декілька прикладів, про які ми вже
говорили — теги  та .

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

61
00:03:13,962 --> 00:03:16,431
на текст, який йде після нього.

62
00:03:16,616 --> 00:03:18,326
Після зображення немає
порожнього рядка.

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

64
00:03:24,847 --> 00:03:26,978
Подивіться на всі інші 
приклади на цій сторінці:

65
00:03:27,041 --> 00:03:30,281
заголовки, абзаци, список.

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

67
00:03:33,732 --> 00:03:36,152
тому вам не потрібно писати
кожного разу тег 
.

68
00:03:37,027 --> 00:03:39,539
Що це має спільного з тегами 
та ?

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

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

71
00:03:54,200 --> 00:03:58,160
браузер розіб'є на частини 
цю частину сторінки.

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

73
00:04:00,534 --> 00:04:02,984
тепер матиме нові рядки до і після.

74
00:04:02,998 --> 00:04:05,495
І, можливо, це те, що вам потрібно.


75
00:04:05,495 --> 00:04:07,525
Просто пам'ятайте про цю відмінність.

76
00:04:07,553 --> 00:04:09,383
І продовжуйте практикуватись, 
тому що ми можемо зробити

77
00:04:09,395 --> 00:04:10,885
дуже багато з цими тегами.

78
00:04:10,885 --> 00:04:12,631
Особливо з могутнім тегом .

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