WEBVTT

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

00:00:02.677 --> 00:00:05.097
як можна зробити щось схоже на блок,

00:00:05.097 --> 00:00:07.902
додавши тег  і властивість "колір фону"?

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


00:00:13.399 --> 00:00:16.149
незалежно від того чи він для вас 
має вигляд блока, чи ні.

00:00:16.149 --> 00:00:18.348
Цей заголовок є блоком...

00:00:18.348 --> 00:00:23.508
цей абзац є блоком... навіть ця
частина  є блоком.

00:00:24.488 --> 00:00:28.028
Деякі з блоків є великі, деякі маленькі,


00:00:28.028 --> 00:00:30.888
деякі рядкові, як ,

00:00:30.888 --> 00:00:32.888
деякі згруповані, як .

00:00:32.888 --> 00:00:36.188
Але всіх їх браузер вважає блоками.

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

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

00:00:44.100 --> 00:00:46.530
Кожен блок з елементами
має чотири частини:

00:00:46.530 --> 00:00:51.323
зміст, внутрішні відступи, межі
та зовнішні відступи.

00:00:51.323 --> 00:00:54.417
Ми можемо використовувати CSS для зміни
меж і внутрішніх та зовнішніх відступів.

00:00:54.437 --> 00:00:57.227
Ви скоро зрозумієте, що це все таке.

00:00:57.717 --> 00:00:59.207
Почнімо з зовнішніх відступів.

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

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

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

00:01:13.929 --> 00:01:20.139
ми просто напишемо: margin: 15px

00:01:20.139 --> 00:01:22.284
Бачите, як все змінилось?

00:01:22.307 --> 00:01:25.737
А що як ми захочемо зробити різні відступи
з кожної сторони?

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

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

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

00:01:42.483 --> 00:01:46.123
Або ми можемо визначити значення окремо 
для кожної сторони,

00:01:46.123 --> 00:01:48.203
якщо ми хочемо визначити 
лише деякі з сторін.

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

00:01:53.762 --> 00:01:55.822
справа...

00:01:55.822 --> 00:02:00.302
і також ми хочемо зробити відступи знизу...

00:02:00.302 --> 00:02:03.812
і ми б хотіли мати стандартні значення
для інших сторін.

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

00:02:08.522 --> 00:02:09.862
з нашими сторінками.

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

00:02:14.284 --> 00:02:18.234
Я дам йому id "container" (вмістилище).

00:02:18.234 --> 00:02:23.024
Поставмо цей тег тут, щоб він вмістив 
в собі всю інформацію.

00:02:23.024 --> 00:02:27.484
Зараз я додам правило для цього ,


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

00:02:30.484 --> 00:02:33.474
і я хочу розмістити його по центру сторінки.

00:02:33.474 --> 00:02:37.634
Я могла б визначити margin-left: 100px;


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

00:02:40.014 --> 00:02:41.674
але, можливо, вам так не здаватиметься,


00:02:41.674 --> 00:02:44.234
тому що ваш браузер більший або менший.

00:02:44.234 --> 00:02:46.499
Ми хочемо мати можливість сказати:

00:02:46.499 --> 00:02:51.481
Зроби такі відступи, 
які будуть однакові з обох боків.

00:02:52.221 --> 00:02:55.761
Це саме те, що робить margin: auto;

00:02:55.761 --> 00:02:59.061
І це чудовий спосіб розмістити блок з інформацією
по центру сторінки.

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

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

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


00:03:13.503 --> 00:03:16.953
нам лише потрібно визначити
три аспекти меж:

00:03:16.953 --> 00:03:18.973
товщину, стиль та колір.

00:03:18.973 --> 00:03:22.483
Для тонких меж я напишу 1 піксель,


00:03:22.483 --> 00:03:26.603
для неперервної лінії, нічого 
незвичного — "solid" (неперервний),

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

00:03:36.453 --> 00:03:39.459
Гаразд, так само як і з відступами,
ми можемо визначити межі

00:03:39.459 --> 00:03:41.129
для якоїсь одної сторони.

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

00:03:45.458 --> 00:03:47.478
я додам ще одну властивість:

00:03:47.478 --> 00:03:53.728
border-top: 10px solid purple;

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

00:03:58.728 --> 00:04:00.515
зі стилями меж.

00:04:00.515 --> 00:04:03.455
Перейдімо вгору до правила "cute-cat" і додаймо

00:04:03.455 --> 00:04:10.475
border: 6px groove red
(насичений червоний).

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

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

00:04:19.975 --> 00:04:24.765
Тепер... Як щодо меж навколо абзацу
"official-info"?

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

00:04:28.435 --> 00:04:31.185
Я спробую "dotted" (крапковий пунктир),

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

00:04:35.960 --> 00:04:39.500
Добре, це те, що мені потрібно.


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

00:04:42.438 --> 00:04:45.018
Насправді, це мене дуже сильно
тривожить.

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

00:04:50.178 --> 00:04:54.068
І як розташований текст в "official-info"?

00:04:54.068 --> 00:04:58.478
Це виглядає вкрай неакуратно
і заважає читати текст.

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

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

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

00:05:08.492 --> 00:05:12.725
Додаймо внутрішні відступи до
тега "container", просто...

00:05:12.725 --> 00:05:17.985
додаймо 15 пікселів з кожної сторони.
Оу... значно краще.

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

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

00:05:28.972 --> 00:05:31.782
оскільки воно й так виглядає добре
всередині рамочки.

00:05:31.782 --> 00:05:34.822
Ось ви і побачили блокову модель.

00:05:34.822 --> 00:05:36.492
Зовнішні відступи, межі 
і внутрішні відступи.

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

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

00:05:40.710 --> 00:05:42.490
трохи дурний вигляд.


00:05:42.490 --> 00:05:43.760
Якщо ви хочете, щоб ваша сторінка

00:05:43.760 --> 00:05:45.520
виглядала вишукано та красиво,
старайтесь використовувати

00:05:45.520 --> 00:05:47.490
світло-сірі ті білі тони.

00:05:47.490 --> 00:05:49.520
Що б ви не робили, переконайтесь,
що ви використали ці властивості,

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

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