1
00:00:00,000 --> 00:00:02,677
Чи запам'ятали ви протягом минулої 
лекції,

2
00:00:02,677 --> 00:00:05,097
як можна зробити щось схоже на блок,

3
00:00:05,097 --> 00:00:07,902
додавши тег  і властивість "колір фону"?

4
00:00:08,492 --> 00:00:13,399
Насправді, кожен елемент на вашій сторінці
браузер розглядає як блок,


5
00:00:13,399 --> 00:00:16,149
незалежно від того чи він для вас 
має вигляд блока, чи ні.

6
00:00:16,149 --> 00:00:18,348
Цей заголовок є блоком...

7
00:00:18,348 --> 00:00:23,508
цей абзац є блоком... навіть ця
частина  є блоком.

8
00:00:24,488 --> 00:00:28,028
Деякі з блоків є великі, деякі маленькі,


9
00:00:28,028 --> 00:00:30,888
деякі рядкові, як ,

10
00:00:30,888 --> 00:00:32,888
деякі згруповані, як .

11
00:00:32,888 --> 00:00:36,188
Але всіх їх браузер вважає блоками.

12
00:00:36,188 --> 00:00:40,650
Чому це важливо? Тому що існує
так звана "блокова модель",

13
00:00:40,660 --> 00:00:44,100
яку ви можете побачити на діаграмі,
яку я щойно вставила.

14
00:00:44,100 --> 00:00:46,530
Кожен блок з елементами
має чотири частини:

15
00:00:46,530 --> 00:00:51,323
зміст, внутрішні відступи, межі
та зовнішні відступи.

16
00:00:51,323 --> 00:00:54,417
Ми можемо використовувати CSS для зміни
меж і внутрішніх та зовнішніх відступів.

17
00:00:54,437 --> 00:00:57,227
Ви скоро зрозумієте, що це все таке.

18
00:00:57,717 --> 00:00:59,207
Почнімо з зовнішніх відступів.

19
00:00:59,207 --> 00:01:03,827
Це чітка межа навколо блоку, що відділяє
його від інших елементів.

20
00:01:04,514 --> 00:01:08,309
Ми визначимо ці відступи за допомогою
наших улюблених одиниць — пікселів.

21
00:01:08,719 --> 00:01:13,929
Щоб зробити зовнішні відступи блоку 
"official-info" по 15 пікселів з кожного боку,

22
00:01:13,929 --> 00:01:20,139
ми просто напишемо: margin: 15px

23
00:01:20,139 --> 00:01:22,284
Бачите, як все змінилось?

24
00:01:22,307 --> 00:01:25,737
А що як ми захочемо зробити різні відступи
з кожної сторони?

25
00:01:25,737 --> 00:01:29,277
Наприклад, більші відступи зверху, ніж зліва?

26
00:01:29,277 --> 00:01:31,567
Ми можемо написати значення
за годинниковою стрілкою,

27
00:01:31,643 --> 00:01:41,493
починаючи з верху: top 15px, right 0px,
bottom 10px, left 6px

28
00:01:42,483 --> 00:01:46,123
Або ми можемо визначити значення окремо 
для кожної сторони,

29
00:01:46,123 --> 00:01:48,203
якщо ми хочемо визначити 
лише деякі з сторін.

30
00:01:48,203 --> 00:01:53,762
Наприклад, ми хочемо додати відступи
біля зображення котика...

31
00:01:53,762 --> 00:01:55,822
справа...

32
00:01:55,822 --> 00:02:00,302
і також ми хочемо зробити відступи знизу...

33
00:02:00,302 --> 00:02:03,812
і ми б хотіли мати стандартні значення
для інших сторін.

34
00:02:04,422 --> 00:02:08,522
Існує також особливе значення відступів,
що дозволяє робити дещо цікаве

35
00:02:08,522 --> 00:02:09,862
з нашими сторінками.

36
00:02:09,862 --> 00:02:14,284
Щоб показати його вам, я додам тег 
для цілої сторінки.

37
00:02:14,284 --> 00:02:18,234
Я дам йому id "container" (вмістилище).

38
00:02:18,234 --> 00:02:23,024
Поставмо цей тег тут, щоб він вмістив 
в собі всю інформацію.

39
00:02:23,024 --> 00:02:27,484
Зараз я додам правило для цього ,


40
00:02:27,484 --> 00:02:30,484
який зробить його ширину 400 пікселів,

41
00:02:30,484 --> 00:02:33,474
і я хочу розмістити його по центру сторінки.

42
00:02:33,474 --> 00:02:37,634
Я могла б визначити margin-left: 100px;


43
00:02:37,634 --> 00:02:40,014
бо так мені здається, що він буде 
знаходитися по центру,

44
00:02:40,014 --> 00:02:41,674
але, можливо, вам так не здаватиметься,


45
00:02:41,674 --> 00:02:44,234
тому що ваш браузер більший або менший.

46
00:02:44,234 --> 00:02:46,499
Ми хочемо мати можливість сказати:

47
00:02:46,499 --> 00:02:51,481
Зроби такі відступи, 
які будуть однакові з обох боків.

48
00:02:52,221 --> 00:02:55,761
Це саме те, що робить margin: auto;

49
00:02:55,761 --> 00:02:59,061
І це чудовий спосіб розмістити блок з інформацією
по центру сторінки.

50
00:02:59,541 --> 00:03:02,811
Тепер, коли ми розмістили блок по центру,
ми, можливо, хочемо зробити його

51
00:03:02,811 --> 00:03:08,502
ще чіткішим, додавши межі навколо нього,
використовуючи властивість CSS "border".

52
00:03:08,502 --> 00:03:13,503
Додаймо червоні межі тегу .
Ми пишемо "border", і далі


53
00:03:13,503 --> 00:03:16,953
нам лише потрібно визначити
три аспекти меж:

54
00:03:16,953 --> 00:03:18,973
товщину, стиль та колір.

55
00:03:18,973 --> 00:03:22,483
Для тонких меж я напишу 1 піксель,


56
00:03:22,483 --> 00:03:26,603
для неперервної лінії, нічого 
незвичного — "solid" (неперервний),

57
00:03:26,603 --> 00:03:35,253
і щоб зробити їх червоними, я напишу rgb
і виберу вогнянисто-червоний колір.

58
00:03:36,453 --> 00:03:39,459
Гаразд, так само як і з відступами,
ми можемо визначити межі

59
00:03:39,459 --> 00:03:41,129
для якоїсь одної сторони.

60
00:03:41,129 --> 00:03:45,458
Наприклад, якщо я хочу справді товсту 
фіолетову межу зверху,

61
00:03:45,458 --> 00:03:47,478
я додам ще одну властивість:

62
00:03:47,478 --> 00:03:53,728
border-top: 10px solid purple;

63
00:03:53,728 --> 00:03:58,728
Класно! Тепер додаймо рамочку до
зображення і побавмось трохи

64
00:03:58,728 --> 00:04:00,515
зі стилями меж.

65
00:04:00,515 --> 00:04:03,455
Перейдімо вгору до правила "cute-cat" і додаймо

66
00:04:03,455 --> 00:04:10,475
border: 6px groove red
(насичений червоний).

67
00:04:10,475 --> 00:04:16,455
Мені не подобається слово "groove", 
спробуймо "double" (подвійний)?

68
00:04:16,455 --> 00:04:19,185
Ех, спробуймо слово "ridge" (втиснутий)? 
Ага! Тепер це виглядає як рамочка.

69
00:04:19,975 --> 00:04:24,765
Тепер... Як щодо меж навколо абзацу
"official-info"?

70
00:04:24,765 --> 00:04:28,435
Що ж... "border", зробімо їх не дуже
широкими, "2px,"

71
00:04:28,435 --> 00:04:31,185
Я спробую "dotted" (крапковий пунктир),

72
00:04:31,200 --> 00:04:35,960
і далі виберу ніжно-сірий колір...
хм, краще вибрати "dashed" (пунктирний).

73
00:04:35,960 --> 00:04:39,500
Добре, це те, що мені потрібно.


74
00:04:39,500 --> 00:04:42,438
Але... є дещо, що мене
трохи тривожить у всіх цих межах.

75
00:04:42,438 --> 00:04:45,018
Насправді, це мене дуже сильно
тривожить.

76
00:04:45,018 --> 00:04:50,178
Бачите, як близько до меж 
тега "container" розташований текст?

77
00:04:50,178 --> 00:04:54,068
І як розташований текст в "official-info"?

78
00:04:54,068 --> 00:04:58,478
Це виглядає вкрай неакуратно
і заважає читати текст.

79
00:04:58,478 --> 00:05:01,008
Саме тут нам знадобиться частина "padding" 
(внутрішні відступи).

80
00:05:01,008 --> 00:05:05,092
Неважливо чи у вас є колір фону та межі, 
вам майже завжди потрібно додавати

81
00:05:05,092 --> 00:05:08,492
внутрішні відступи, щоб додати трохи 
вільного місця між наповненням та краями.

82
00:05:08,492 --> 00:05:12,725
Додаймо внутрішні відступи до
тега "container", просто...

83
00:05:12,725 --> 00:05:17,985
додаймо 15 пікселів з кожної сторони.
Оу... значно краще.

84
00:05:18,421 --> 00:05:25,811
Додаймо внутрішні відступи до тега
"official-info". Скажімо, 6 пікселів.

85
00:05:25,811 --> 00:05:28,972
Чудово! Нам не потрібно додавати
внутрішні відступи до зображення,

86
00:05:28,972 --> 00:05:31,782
оскільки воно й так виглядає добре
всередині рамочки.

87
00:05:31,782 --> 00:05:34,822
Ось ви і побачили блокову модель.

88
00:05:34,822 --> 00:05:36,492
Зовнішні відступи, межі 
і внутрішні відступи.

89
00:05:36,492 --> 00:05:38,492
Я використовувала великі значення
і яскраві кольори,

90
00:05:38,492 --> 00:05:40,710
щоб продемонструвати їх вам, 
але моя сторінка має зараз

91
00:05:40,710 --> 00:05:42,490
трохи дурний вигляд.


92
00:05:42,490 --> 00:05:43,760
Якщо ви хочете, щоб ваша сторінка

93
00:05:43,760 --> 00:05:45,520
виглядала вишукано та красиво,
старайтесь використовувати

94
00:05:45,520 --> 00:05:47,490
світло-сірі ті білі тони.

95
00:05:47,490 --> 00:05:49,520
Що б ви не робили, переконайтесь,
що ви використали ці властивості,

96
00:05:49,520 --> 00:05:53,560
адже вони мають великий вплив на те,
як виглядає ваша сторінка.

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