[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.27,0:00:03.86,Default,,0000,0000,0000,,Переважно ми використовуємо теги , \Nколи хочемо розділити сторінку
Dialogue: 0,0:00:03.86,0:00:07.58,Default,,0000,0000,0000,,на декілька блоків, змінити їхній розмір\Nі перемістити їх.
Dialogue: 0,0:00:07.74,0:00:10.86,Default,,0000,0000,0000,,Потрібно мати здібності до дизайну,\Nщоб вирішити, як саме розмістити
Dialogue: 0,0:00:10.86,0:00:12.72,Default,,0000,0000,0000,,елементи на сторінці, щоб вона\Nмала гарний вигляд.
Dialogue: 0,0:00:12.77,0:00:16.48,Default,,0000,0000,0000,,Але зараз ми забудемо про мету\Nзробити сторінку гарною,
Dialogue: 0,0:00:16.48,0:00:18.70,Default,,0000,0000,0000,,і я вам просто покажу, як можна\Nзмінювати елементи на сторінці.
Dialogue: 0,0:00:18.84,0:00:21.99,Default,,0000,0000,0000,,Змінімо розмір тега  "official-info".
Dialogue: 0,0:00:21.99,0:00:25.54,Default,,0000,0000,0000,,За замовчуванням він займає 100%\Nможливої ширини.
Dialogue: 0,0:00:25.77,0:00:29.05,Default,,0000,0000,0000,,Тому ви бачите, що сірий блок\Nзаймає всю сторінку.
Dialogue: 0,0:00:29.24,0:00:32.48,Default,,0000,0000,0000,,Але, можливо, я хочу, щоб він займав\Nлише 300 пікселів.
Dialogue: 0,0:00:32.72,0:00:36.70,Default,,0000,0000,0000,,Я додам ще одну властивість до\Nправила CSS тут:
Dialogue: 0,0:00:36.70,0:00:39.37,Default,,0000,0000,0000,,width: 300px;
Dialogue: 0,0:00:40.18,0:00:43.15,Default,,0000,0000,0000,,Спрацювало, але зробімо\Nщось цікавіше.
Dialogue: 0,0:00:43.38,0:00:44.97,Default,,0000,0000,0000,,Ми використаємо відсоткову ширину
Dialogue: 0,0:00:44.97,0:00:49.32,Default,,0000,0000,0000,,і напишемо, що цей блок займатиме\N70% можливої ширини.
Dialogue: 0,0:00:50.29,0:00:53.33,Default,,0000,0000,0000,,Тепер текст поміщений\Nв менший блок,
Dialogue: 0,0:00:53.33,0:00:55.23,Default,,0000,0000,0000,,і цей блок став вищий.
Dialogue: 0,0:00:55.43,0:00:59.14,Default,,0000,0000,0000,,Якщо ми справді хочемо, ми можемо\Nтакож задати висоту блоку
Dialogue: 0,0:00:59.14,0:01:00.58,Default,,0000,0000,0000,,за допомогою властивості "height":
Dialogue: 0,0:01:01.03,0:01:03.23,Default,,0000,0000,0000,,height: 180 px;
Dialogue: 0,0:01:03.78,0:01:06.58,Default,,0000,0000,0000,,Хмм, добре. Сталось щось смішне.
Dialogue: 0,0:01:06.81,0:01:09.64,Default,,0000,0000,0000,,Сірий блок зменшився до 180 пікселів,
Dialogue: 0,0:01:09.64,0:01:13.42,Default,,0000,0000,0000,,але текст виліз за його межі.
Dialogue: 0,0:01:13.67,0:01:15.51,Default,,0000,0000,0000,,Чому так сталося?
Dialogue: 0,0:01:15.79,0:01:19.89,Default,,0000,0000,0000,,Це через властивість, яку\Nми називаємо "overflow" (переповнення).
Dialogue: 0,0:01:20.34,0:01:23.89,Default,,0000,0000,0000,,Значення за замовчуванням \Nдля "overflow"— "visible" (видимий),
Dialogue: 0,0:01:23.89,0:01:28.31,Default,,0000,0000,0000,,що означає, що елементи змінюють розмір,\Nале вміст може виходити за їхні межі,
Dialogue: 0,0:01:28.31,0:01:30.12,Default,,0000,0000,0000,,що має трохи дурний вигляд.
Dialogue: 0,0:01:30.46,0:01:32.96,Default,,0000,0000,0000,,Які інші можливості існують\Nдля "overflow"?
Dialogue: 0,0:01:33.49,0:01:36.49,Default,,0000,0000,0000,,Ми можемо спробувати "hidden"\N(прихований).
Dialogue: 0,0:01:36.98,0:01:40.14,Default,,0000,0000,0000,,Це обріже текст, який виходить\Nза межі блоку.
Dialogue: 0,0:01:40.36,0:01:42.10,Default,,0000,0000,0000,,Однак це не те, що нам зараз потрібно,
Dialogue: 0,0:01:42.10,0:01:45.82,Default,,0000,0000,0000,,тому що так наші глядачі не зможуть\Nпобачити весь чудовий абзац.
Dialogue: 0,0:01:46.29,0:01:48.77,Default,,0000,0000,0000,,Ми можемо спробувати "auto" (автоматичний),
Dialogue: 0,0:01:49.11,0:01:52.90,Default,,0000,0000,0000,,що скаже браузеру додати лінію\Nпрокрутки, якщо текст виходить за межі блоку.
Dialogue: 0,0:01:53.08,0:01:56.69,Default,,0000,0000,0000,,Тепер я можу прокрутити текст всередині\Nблоку і побачити його повністю.
Dialogue: 0,0:01:57.07,0:01:59.48,Default,,0000,0000,0000,,Якщо ми хочемо, ми можемо бути ще\Nбільш точними:
Dialogue: 0,0:01:59.48,0:02:02.71,Default,,0000,0000,0000,,ми можемо визначити різні властивості\Nпереповнення для усіх напрямків.
Dialogue: 0,0:02:02.79,0:02:04.18,Default,,0000,0000,0000,,Наприклад, якщо ми хочемо,
Dialogue: 0,0:02:04.18,0:02:07.64,Default,,0000,0000,0000,,щоб текст рухався по осі у, вниз та вгору,
Dialogue: 0,0:02:07.64,0:02:10.51,Default,,0000,0000,0000,,ми напишемо: overflow-y: auto;
Dialogue: 0,0:02:10.83,0:02:14.21,Default,,0000,0000,0000,,але якщо ми хочемо обрізати його\Nпо осі х,
Dialogue: 0,0:02:14.21,0:02:16.76,Default,,0000,0000,0000,,ми напишемо: overflow-x: hidden;
Dialogue: 0,0:02:18.50,0:02:21.42,Default,,0000,0000,0000,,Будьте обережні щоразу, як \Nвикористовуєте властивість "overflow",
Dialogue: 0,0:02:21.42,0:02:24.43,Default,,0000,0000,0000,,тому що лінії прокрутки можуть\Nбути дуже надокучливими для користувачів.
Dialogue: 0,0:02:24.60,0:02:27.22,Default,,0000,0000,0000,,Особливо лінії прокрутки \Nз лініями прокрутки —
Dialogue: 0,0:02:27.22,0:02:28.83,Default,,0000,0000,0000,,уникайте цього, якщо можете.
Dialogue: 0,0:02:29.07,0:02:33.97,Default,,0000,0000,0000,,Повертаючись до властивостей width/height,\Nми насправді можемо їх використовувати
Dialogue: 0,0:02:33.97,0:02:37.10,Default,,0000,0000,0000,,для всіх типів елементів, \Nтаких як зображення.
Dialogue: 0,0:02:37.70,0:02:42.17,Default,,0000,0000,0000,,Тепер, коли ви знаєте CSS, ви можете\Nвикористовувати властивості CSS width/height,
Dialogue: 0,0:02:42.17,0:02:44.65,Default,,0000,0000,0000,,замість атрибутів width/height.
Dialogue: 0,0:02:44.95,0:02:52.54,Default,,0000,0000,0000,,Зробімо це зображення котика трохи \Nбільшим, додавши id "cute-cat" (милий-котик),
Dialogue: 0,0:02:52.54,0:02:55.42,Default,,0000,0000,0000,,видаливши атрибути
Dialogue: 0,0:02:55.42,0:03:00.40,Default,,0000,0000,0000,,і перейшовши до правила стилю.\NМи напишемо: #cute-cat {
Dialogue: 0,0:03:00.40,0:03:03.13,Default,,0000,0000,0000,,width: 120 px };
Dialogue: 0,0:03:03.58,0:03:06.33,Default,,0000,0000,0000,,Так само як було з атрибутами,
Dialogue: 0,0:03:06.33,0:03:09.03,Default,,0000,0000,0000,,тут також краще визначати \Nлише висоту або ширину
Dialogue: 0,0:03:09.03,0:03:12.55,Default,,0000,0000,0000,,і дати браузеру обчислити найкраще\Nзначення іншої величини.
Dialogue: 0,0:03:12.62,0:03:14.68,Default,,0000,0000,0000,,В іншому випадку ми роздавимо котика!
Dialogue: 0,0:03:14.74,0:03:18.88,Default,,0000,0000,0000,,Добре, це звучить доволі цікаво,\Nтому ми спробуємо всього на секундочку:
Dialogue: 0,0:03:18.88,0:03:20.02,Default,,0000,0000,0000,,height: 40px;
Dialogue: 0,0:03:20.02,0:03:21.73,Default,,0000,0000,0000,,Ха-ха, роздавлений котик, ура!
Dialogue: 0,0:03:22.06,0:03:25.00,Default,,0000,0000,0000,,Добре, я вже позбулась\Nцього бажання.
Dialogue: 0,0:03:25.08,0:03:28.79,Default,,0000,0000,0000,,Я буду відповідальним веб-розробником\Nі зараз це видалю.
Dialogue: 0,0:03:29.01,0:03:30.69,Default,,0000,0000,0000,,Чим більше ви знаєте,
Dialogue: 0,0:03:30.69,0:03:33.08,Default,,0000,0000,0000,,тим більш відповідальними ви маєте бути.
Dialogue: 0,0:03:33.24,0:03:36.07,Default,,0000,0000,0000,,Те, що ви можете понаставляти всюди\Nліній прокрутки
Dialogue: 0,0:03:36.07,0:03:39.40,Default,,0000,0000,0000,,чи роздавити усіх котиків, не означає,\Nщо вам слід так робити.
Dialogue: 0,0:03:39.50,0:03:42.58,Default,,0000,0000,0000,,Тому що переважно ви робите\Nсайти і для інших людей,
Dialogue: 0,0:03:42.58,0:03:47.34,Default,,0000,0000,0000,,і те, що ви вважайте веселим, може бути \Nдля них дуже складним у використанні.
Dialogue: 0,0:03:47.57,0:03:52.32,Default,,0000,0000,0000,,Але якщо ви створите кілька веселих речей\Nтут, на сайті Khan Academy, я не заперечуватиму.
Dialogue: 0,0:03:52.34,0:03:57.12,Default,,0000,0000,0000,,Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"