[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.68,Default,,0000,0000,0000,,Чи запам'ятали ви протягом минулої \Nлекції,
Dialogue: 0,0:00:02.68,0:00:05.10,Default,,0000,0000,0000,,як можна зробити щось схоже на блок,
Dialogue: 0,0:00:05.10,0:00:07.90,Default,,0000,0000,0000,,додавши тег  і властивість "колір фону"?
Dialogue: 0,0:00:08.49,0:00:13.40,Default,,0000,0000,0000,,Насправді, кожен елемент на вашій сторінці\Nбраузер розглядає як блок,\N
Dialogue: 0,0:00:13.40,0:00:16.15,Default,,0000,0000,0000,,незалежно від того чи він для вас \Nмає вигляд блока, чи ні.
Dialogue: 0,0:00:16.15,0:00:18.35,Default,,0000,0000,0000,,Цей заголовок є блоком...
Dialogue: 0,0:00:18.35,0:00:23.51,Default,,0000,0000,0000,,цей абзац є блоком... навіть ця\Nчастина  є блоком.
Dialogue: 0,0:00:24.49,0:00:28.03,Default,,0000,0000,0000,,Деякі з блоків є великі, деякі маленькі,\N
Dialogue: 0,0:00:28.03,0:00:30.89,Default,,0000,0000,0000,,деякі рядкові, як ,
Dialogue: 0,0:00:30.89,0:00:32.89,Default,,0000,0000,0000,,деякі згруповані, як .
Dialogue: 0,0:00:32.89,0:00:36.19,Default,,0000,0000,0000,,Але всіх їх браузер вважає блоками.
Dialogue: 0,0:00:36.19,0:00:40.65,Default,,0000,0000,0000,,Чому це важливо? Тому що існує\Nтак звана "блокова модель",
Dialogue: 0,0:00:40.66,0:00:44.10,Default,,0000,0000,0000,,яку ви можете побачити на діаграмі,\Nяку я щойно вставила.
Dialogue: 0,0:00:44.10,0:00:46.53,Default,,0000,0000,0000,,Кожен блок з елементами\Nмає чотири частини:
Dialogue: 0,0:00:46.53,0:00:51.32,Default,,0000,0000,0000,,зміст, внутрішні відступи, межі\Nта зовнішні відступи.
Dialogue: 0,0:00:51.32,0:00:54.42,Default,,0000,0000,0000,,Ми можемо використовувати CSS для зміни\Nмеж і внутрішніх та зовнішніх відступів.
Dialogue: 0,0:00:54.44,0:00:57.23,Default,,0000,0000,0000,,Ви скоро зрозумієте, що це все таке.
Dialogue: 0,0:00:57.72,0:00:59.21,Default,,0000,0000,0000,,Почнімо з зовнішніх відступів.
Dialogue: 0,0:00:59.21,0:01:03.83,Default,,0000,0000,0000,,Це чітка межа навколо блоку, що відділяє\Nйого від інших елементів.
Dialogue: 0,0:01:04.51,0:01:08.31,Default,,0000,0000,0000,,Ми визначимо ці відступи за допомогою\Nнаших улюблених одиниць — пікселів.
Dialogue: 0,0:01:08.72,0:01:13.93,Default,,0000,0000,0000,,Щоб зробити зовнішні відступи блоку \N"official-info" по 15 пікселів з кожного боку,
Dialogue: 0,0:01:13.93,0:01:20.14,Default,,0000,0000,0000,,ми просто напишемо: margin: 15px
Dialogue: 0,0:01:20.14,0:01:22.28,Default,,0000,0000,0000,,Бачите, як все змінилось?
Dialogue: 0,0:01:22.31,0:01:25.74,Default,,0000,0000,0000,,А що як ми захочемо зробити різні відступи\Nз кожної сторони?
Dialogue: 0,0:01:25.74,0:01:29.28,Default,,0000,0000,0000,,Наприклад, більші відступи зверху, ніж зліва?
Dialogue: 0,0:01:29.28,0:01:31.57,Default,,0000,0000,0000,,Ми можемо написати значення\Nза годинниковою стрілкою,
Dialogue: 0,0:01:31.64,0:01:41.49,Default,,0000,0000,0000,,починаючи з верху: top 15px, right 0px,\Nbottom 10px, left 6px
Dialogue: 0,0:01:42.48,0:01:46.12,Default,,0000,0000,0000,,Або ми можемо визначити значення окремо \Nдля кожної сторони,
Dialogue: 0,0:01:46.12,0:01:48.20,Default,,0000,0000,0000,,якщо ми хочемо визначити \Nлише деякі з сторін.
Dialogue: 0,0:01:48.20,0:01:53.76,Default,,0000,0000,0000,,Наприклад, ми хочемо додати відступи\Nбіля зображення котика...
Dialogue: 0,0:01:53.76,0:01:55.82,Default,,0000,0000,0000,,справа...
Dialogue: 0,0:01:55.82,0:02:00.30,Default,,0000,0000,0000,,і також ми хочемо зробити відступи знизу...
Dialogue: 0,0:02:00.30,0:02:03.81,Default,,0000,0000,0000,,і ми б хотіли мати стандартні значення\Nдля інших сторін.
Dialogue: 0,0:02:04.42,0:02:08.52,Default,,0000,0000,0000,,Існує також особливе значення відступів,\Nщо дозволяє робити дещо цікаве
Dialogue: 0,0:02:08.52,0:02:09.86,Default,,0000,0000,0000,,з нашими сторінками.
Dialogue: 0,0:02:09.86,0:02:14.28,Default,,0000,0000,0000,,Щоб показати його вам, я додам тег \Nдля цілої сторінки.
Dialogue: 0,0:02:14.28,0:02:18.23,Default,,0000,0000,0000,,Я дам йому id "container" (вмістилище).
Dialogue: 0,0:02:18.23,0:02:23.02,Default,,0000,0000,0000,,Поставмо цей тег тут, щоб він вмістив \Nв собі всю інформацію.
Dialogue: 0,0:02:23.02,0:02:27.48,Default,,0000,0000,0000,,Зараз я додам правило для цього ,\N
Dialogue: 0,0:02:27.48,0:02:30.48,Default,,0000,0000,0000,,який зробить його ширину 400 пікселів,
Dialogue: 0,0:02:30.48,0:02:33.47,Default,,0000,0000,0000,,і я хочу розмістити його по центру сторінки.
Dialogue: 0,0:02:33.47,0:02:37.63,Default,,0000,0000,0000,,Я могла б визначити margin-left: 100px;\N
Dialogue: 0,0:02:37.63,0:02:40.01,Default,,0000,0000,0000,,бо так мені здається, що він буде \Nзнаходитися по центру,
Dialogue: 0,0:02:40.01,0:02:41.67,Default,,0000,0000,0000,,але, можливо, вам так не здаватиметься,\N
Dialogue: 0,0:02:41.67,0:02:44.23,Default,,0000,0000,0000,,тому що ваш браузер більший або менший.
Dialogue: 0,0:02:44.23,0:02:46.50,Default,,0000,0000,0000,,Ми хочемо мати можливість сказати:
Dialogue: 0,0:02:46.50,0:02:51.48,Default,,0000,0000,0000,,Зроби такі відступи, \Nякі будуть однакові з обох боків.
Dialogue: 0,0:02:52.22,0:02:55.76,Default,,0000,0000,0000,,Це саме те, що робить margin: auto;
Dialogue: 0,0:02:55.76,0:02:59.06,Default,,0000,0000,0000,,І це чудовий спосіб розмістити блок з інформацією\Nпо центру сторінки.
Dialogue: 0,0:02:59.54,0:03:02.81,Default,,0000,0000,0000,,Тепер, коли ми розмістили блок по центру,\Nми, можливо, хочемо зробити його
Dialogue: 0,0:03:02.81,0:03:08.50,Default,,0000,0000,0000,,ще чіткішим, додавши межі навколо нього,\Nвикористовуючи властивість CSS "border".
Dialogue: 0,0:03:08.50,0:03:13.50,Default,,0000,0000,0000,,Додаймо червоні межі тегу .\NМи пишемо "border", і далі\N
Dialogue: 0,0:03:13.50,0:03:16.95,Default,,0000,0000,0000,,нам лише потрібно визначити\Nтри аспекти меж:
Dialogue: 0,0:03:16.95,0:03:18.97,Default,,0000,0000,0000,,товщину, стиль та колір.
Dialogue: 0,0:03:18.97,0:03:22.48,Default,,0000,0000,0000,,Для тонких меж я напишу 1 піксель,\N
Dialogue: 0,0:03:22.48,0:03:26.60,Default,,0000,0000,0000,,для неперервної лінії, нічого \Nнезвичного — "solid" (неперервний),
Dialogue: 0,0:03:26.60,0:03:35.25,Default,,0000,0000,0000,,і щоб зробити їх червоними, я напишу rgb\Nі виберу вогнянисто-червоний колір.
Dialogue: 0,0:03:36.45,0:03:39.46,Default,,0000,0000,0000,,Гаразд, так само як і з відступами,\Nми можемо визначити межі
Dialogue: 0,0:03:39.46,0:03:41.13,Default,,0000,0000,0000,,для якоїсь одної сторони.
Dialogue: 0,0:03:41.13,0:03:45.46,Default,,0000,0000,0000,,Наприклад, якщо я хочу справді товсту \Nфіолетову межу зверху,
Dialogue: 0,0:03:45.46,0:03:47.48,Default,,0000,0000,0000,,я додам ще одну властивість:
Dialogue: 0,0:03:47.48,0:03:53.73,Default,,0000,0000,0000,,border-top: 10px solid purple;
Dialogue: 0,0:03:53.73,0:03:58.73,Default,,0000,0000,0000,,Класно! Тепер додаймо рамочку до\Nзображення і побавмось трохи
Dialogue: 0,0:03:58.73,0:04:00.52,Default,,0000,0000,0000,,зі стилями меж.
Dialogue: 0,0:04:00.52,0:04:03.46,Default,,0000,0000,0000,,Перейдімо вгору до правила "cute-cat" і додаймо
Dialogue: 0,0:04:03.46,0:04:10.48,Default,,0000,0000,0000,,border: 6px groove red\N(насичений червоний).
Dialogue: 0,0:04:10.48,0:04:16.46,Default,,0000,0000,0000,,Мені не подобається слово "groove", \Nспробуймо "double" (подвійний)?
Dialogue: 0,0:04:16.46,0:04:19.18,Default,,0000,0000,0000,,Ех, спробуймо слово "ridge" (втиснутий)? \NАга! Тепер це виглядає як рамочка.
Dialogue: 0,0:04:19.98,0:04:24.76,Default,,0000,0000,0000,,Тепер... Як щодо меж навколо абзацу\N"official-info"?
Dialogue: 0,0:04:24.76,0:04:28.44,Default,,0000,0000,0000,,Що ж... "border", зробімо їх не дуже\Nширокими, "2px,"
Dialogue: 0,0:04:28.44,0:04:31.18,Default,,0000,0000,0000,,Я спробую "dotted" (крапковий пунктир),
Dialogue: 0,0:04:31.20,0:04:35.96,Default,,0000,0000,0000,,і далі виберу ніжно-сірий колір...\Nхм, краще вибрати "dashed" (пунктирний).
Dialogue: 0,0:04:35.96,0:04:39.50,Default,,0000,0000,0000,,Добре, це те, що мені потрібно.\N
Dialogue: 0,0:04:39.50,0:04:42.44,Default,,0000,0000,0000,,Але... є дещо, що мене\Nтрохи тривожить у всіх цих межах.
Dialogue: 0,0:04:42.44,0:04:45.02,Default,,0000,0000,0000,,Насправді, це мене дуже сильно\Nтривожить.
Dialogue: 0,0:04:45.02,0:04:50.18,Default,,0000,0000,0000,,Бачите, як близько до меж \Nтега "container" розташований текст?
Dialogue: 0,0:04:50.18,0:04:54.07,Default,,0000,0000,0000,,І як розташований текст в "official-info"?
Dialogue: 0,0:04:54.07,0:04:58.48,Default,,0000,0000,0000,,Це виглядає вкрай неакуратно\Nі заважає читати текст.
Dialogue: 0,0:04:58.48,0:05:01.01,Default,,0000,0000,0000,,Саме тут нам знадобиться частина "padding" \N(внутрішні відступи).
Dialogue: 0,0:05:01.01,0:05:05.09,Default,,0000,0000,0000,,Неважливо чи у вас є колір фону та межі, \Nвам майже завжди потрібно додавати
Dialogue: 0,0:05:05.09,0:05:08.49,Default,,0000,0000,0000,,внутрішні відступи, щоб додати трохи \Nвільного місця між наповненням та краями.
Dialogue: 0,0:05:08.49,0:05:12.72,Default,,0000,0000,0000,,Додаймо внутрішні відступи до\Nтега "container", просто...
Dialogue: 0,0:05:12.72,0:05:17.98,Default,,0000,0000,0000,,додаймо 15 пікселів з кожної сторони.\NОу... значно краще.
Dialogue: 0,0:05:18.42,0:05:25.81,Default,,0000,0000,0000,,Додаймо внутрішні відступи до тега\N"official-info". Скажімо, 6 пікселів.
Dialogue: 0,0:05:25.81,0:05:28.97,Default,,0000,0000,0000,,Чудово! Нам не потрібно додавати\Nвнутрішні відступи до зображення,
Dialogue: 0,0:05:28.97,0:05:31.78,Default,,0000,0000,0000,,оскільки воно й так виглядає добре\Nвсередині рамочки.
Dialogue: 0,0:05:31.78,0:05:34.82,Default,,0000,0000,0000,,Ось ви і побачили блокову модель.
Dialogue: 0,0:05:34.82,0:05:36.49,Default,,0000,0000,0000,,Зовнішні відступи, межі \Nі внутрішні відступи.
Dialogue: 0,0:05:36.49,0:05:38.49,Default,,0000,0000,0000,,Я використовувала великі значення\Nі яскраві кольори,
Dialogue: 0,0:05:38.49,0:05:40.71,Default,,0000,0000,0000,,щоб продемонструвати їх вам, \Nале моя сторінка має зараз
Dialogue: 0,0:05:40.71,0:05:42.49,Default,,0000,0000,0000,,трохи дурний вигляд.\N
Dialogue: 0,0:05:42.49,0:05:43.76,Default,,0000,0000,0000,,Якщо ви хочете, щоб ваша сторінка
Dialogue: 0,0:05:43.76,0:05:45.52,Default,,0000,0000,0000,,виглядала вишукано та красиво,\Nстарайтесь використовувати
Dialogue: 0,0:05:45.52,0:05:47.49,Default,,0000,0000,0000,,світло-сірі ті білі тони.
Dialogue: 0,0:05:47.49,0:05:49.52,Default,,0000,0000,0000,,Що б ви не робили, переконайтесь,\Nщо ви використали ці властивості,
Dialogue: 0,0:05:49.52,0:05:53.56,Default,,0000,0000,0000,,адже вони мають великий вплив на те,\Nяк виглядає ваша сторінка.
Dialogue: 0,0:05:53.89,0:05:58.83,Default,,0000,0000,0000,,Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"