0:00:00.266,0:00:03.858
Переважно ми використовуємо теги , [br]коли хочемо розділити сторінку

0:00:03.858,0:00:07.577
на декілька блоків, змінити їхній розмір[br]і перемістити їх.

0:00:07.737,0:00:10.855
Потрібно мати здібності до дизайну,[br]щоб вирішити, як саме розмістити

0:00:10.855,0:00:12.719
елементи на сторінці, щоб вона[br]мала гарний вигляд.

0:00:12.767,0:00:16.484
Але зараз ми забудемо про мету[br]зробити сторінку гарною,

0:00:16.484,0:00:18.701
і я вам просто покажу, як можна[br]змінювати елементи на сторінці.

0:00:18.841,0:00:21.992
Змінімо розмір тега  "official-info".

0:00:21.992,0:00:25.539
За замовчуванням він займає 100%[br]можливої ширини.

0:00:25.768,0:00:29.054
Тому ви бачите, що сірий блок[br]займає всю сторінку.

0:00:29.242,0:00:32.475
Але, можливо, я хочу, щоб він займав[br]лише 300 пікселів.

0:00:32.715,0:00:36.700
Я додам ще одну властивість до[br]правила CSS тут:

0:00:36.700,0:00:39.373
width: 300px;

0:00:40.179,0:00:43.154
Спрацювало, але зробімо[br]щось цікавіше.

0:00:43.380,0:00:44.967
Ми використаємо відсоткову ширину

0:00:44.967,0:00:49.320
і напишемо, що цей блок займатиме[br]70% можливої ширини.

0:00:50.287,0:00:53.326
Тепер текст поміщений[br]в менший блок,

0:00:53.326,0:00:55.233
і цей блок став вищий.

0:00:55.429,0:00:59.136
Якщо ми справді хочемо, ми можемо[br]також задати висоту блоку

0:00:59.136,0:01:00.584
за допомогою властивості "height":

0:01:01.028,0:01:03.231
height: 180 px;

0:01:03.778,0:01:06.582
Хмм, добре. Сталось щось смішне.

0:01:06.807,0:01:09.642
Сірий блок зменшився до 180 пікселів,

0:01:09.642,0:01:13.425
але текст виліз за його межі.

0:01:13.671,0:01:15.507
Чому так сталося?

0:01:15.794,0:01:19.888
Це через властивість, яку[br]ми називаємо "overflow" (переповнення).

0:01:20.335,0:01:23.893
Значення за замовчуванням [br]для "overflow"— "visible" (видимий),

0:01:23.893,0:01:28.309
що означає, що елементи змінюють розмір,[br]але вміст може виходити за їхні межі,

0:01:28.309,0:01:30.118
що має трохи дурний вигляд.

0:01:30.455,0:01:32.955
Які інші можливості існують[br]для "overflow"?

0:01:33.491,0:01:36.489
Ми можемо спробувати "hidden"[br](прихований).

0:01:36.984,0:01:40.144
Це обріже текст, який виходить[br]за межі блоку.

0:01:40.358,0:01:42.095
Однак це не те, що нам зараз потрібно,

0:01:42.095,0:01:45.824
тому що так наші глядачі не зможуть[br]побачити весь чудовий абзац.

0:01:46.287,0:01:48.771
Ми можемо спробувати "auto" (автоматичний),

0:01:49.107,0:01:52.896
що скаже браузеру додати лінію[br]прокрутки, якщо текст виходить за межі блоку.

0:01:53.078,0:01:56.692
Тепер я можу прокрутити текст всередині[br]блоку і побачити його повністю.

0:01:57.070,0:01:59.475
Якщо ми хочемо, ми можемо бути ще[br]більш точними:

0:01:59.475,0:02:02.712
ми можемо визначити різні властивості[br]переповнення для усіх напрямків.

0:02:02.787,0:02:04.177
Наприклад, якщо ми хочемо,

0:02:04.177,0:02:07.643
щоб текст рухався по осі у, вниз та вгору,

0:02:07.643,0:02:10.509
ми напишемо: overflow-y: auto;

0:02:10.832,0:02:14.207
але якщо ми хочемо обрізати його[br]по осі х,

0:02:14.207,0:02:16.765
ми напишемо: overflow-x: hidden;

0:02:18.500,0:02:21.419
Будьте обережні щоразу, як [br]використовуєте властивість "overflow",

0:02:21.419,0:02:24.434
тому що лінії прокрутки можуть[br]бути дуже надокучливими для користувачів.

0:02:24.599,0:02:27.215
Особливо лінії прокрутки [br]з лініями прокрутки —

0:02:27.215,0:02:28.829
уникайте цього, якщо можете.

0:02:29.069,0:02:33.974
Повертаючись до властивостей width/height,[br]ми насправді можемо їх використовувати

0:02:33.974,0:02:37.102
для всіх типів елементів, [br]таких як зображення.

0:02:37.702,0:02:42.168
Тепер, коли ви знаєте CSS, ви можете[br]використовувати властивості CSS width/height,

0:02:42.168,0:02:44.649
замість атрибутів width/height.

0:02:44.946,0:02:52.542
Зробімо це зображення котика трохи [br]більшим, додавши id "cute-cat" (милий-котик),

0:02:52.542,0:02:55.415
видаливши атрибути

0:02:55.415,0:03:00.396
і перейшовши до правила стилю.[br]Ми напишемо: #cute-cat {

0:03:00.396,0:03:03.128
width: 120 px };

0:03:03.585,0:03:06.328
Так само як було з атрибутами,

0:03:06.328,0:03:09.027
тут також краще визначати [br]лише висоту або ширину

0:03:09.027,0:03:12.548
і дати браузеру обчислити найкраще[br]значення іншої величини.

0:03:12.618,0:03:14.679
В іншому випадку ми роздавимо котика!

0:03:14.743,0:03:18.877
Добре, це звучить доволі цікаво,[br]тому ми спробуємо всього на секундочку:

0:03:18.877,0:03:20.021
height: 40px;

0:03:20.021,0:03:21.726
Ха-ха, роздавлений котик, ура!

0:03:22.059,0:03:25.003
Добре, я вже позбулась[br]цього бажання.

0:03:25.077,0:03:28.793
Я буду відповідальним веб-розробником[br]і зараз це видалю.

0:03:29.009,0:03:30.689
Чим більше ви знаєте,

0:03:30.689,0:03:33.077
тим більш відповідальними ви маєте бути.

0:03:33.238,0:03:36.070
Те, що ви можете понаставляти всюди[br]ліній прокрутки

0:03:36.070,0:03:39.400
чи роздавити усіх котиків, не означає,[br]що вам слід так робити.

0:03:39.497,0:03:42.578
Тому що переважно ви робите[br]сайти і для інших людей,

0:03:42.578,0:03:47.338
і те, що ви вважайте веселим, може бути [br]для них дуже складним у використанні.

0:03:47.566,0:03:52.323
Але якщо ви створите кілька веселих речей[br]тут, на сайті Khan Academy, я не заперечуватиму.

0:03:52.343,0:03:57.123
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"