WEBVTT

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

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

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

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

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

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

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

00:00:21.992 --> 00:00:25.539
За замовчуванням він займає 100%
можливої ширини.

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

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

00:00:32.715 --> 00:00:36.700
Я додам ще одну властивість до
правила CSS тут:

00:00:36.700 --> 00:00:39.373
width: 300px;

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

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

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

00:00:50.287 --> 00:00:53.326
Тепер текст поміщений
в менший блок,

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

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

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

00:01:01.028 --> 00:01:03.231
height: 180 px;

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

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

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

00:01:13.671 --> 00:01:15.507
Чому так сталося?

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

00:01:20.335 --> 00:01:23.893
Значення за замовчуванням 
для "overflow"— "visible" (видимий),

00:01:23.893 --> 00:01:28.309
що означає, що елементи змінюють розмір,
але вміст може виходити за їхні межі,

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

00:01:30.455 --> 00:01:32.955
Які інші можливості існують
для "overflow"?

00:01:33.491 --> 00:01:36.489
Ми можемо спробувати "hidden"
(прихований).

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

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

00:01:42.095 --> 00:01:45.824
тому що так наші глядачі не зможуть
побачити весь чудовий абзац.

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

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

00:01:53.078 --> 00:01:56.692
Тепер я можу прокрутити текст всередині
блоку і побачити його повністю.

00:01:57.070 --> 00:01:59.475
Якщо ми хочемо, ми можемо бути ще
більш точними:

00:01:59.475 --> 00:02:02.712
ми можемо визначити різні властивості
переповнення для усіх напрямків.

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

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

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

00:02:10.832 --> 00:02:14.207
але якщо ми хочемо обрізати його
по осі х,

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

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

00:02:21.419 --> 00:02:24.434
тому що лінії прокрутки можуть
бути дуже надокучливими для користувачів.

00:02:24.599 --> 00:02:27.215
Особливо лінії прокрутки 
з лініями прокрутки —

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

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

00:02:33.974 --> 00:02:37.102
для всіх типів елементів, 
таких як зображення.

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

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

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

00:02:52.542 --> 00:02:55.415
видаливши атрибути

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

00:03:00.396 --> 00:03:03.128
width: 120 px };

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

00:03:06.328 --> 00:03:09.027
тут також краще визначати 
лише висоту або ширину

00:03:09.027 --> 00:03:12.548
і дати браузеру обчислити найкраще
значення іншої величини.

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

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

00:03:18.877 --> 00:03:20.021
height: 40px;

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

00:03:22.059 --> 00:03:25.003
Добре, я вже позбулась
цього бажання.

00:03:25.077 --> 00:03:28.793
Я буду відповідальним веб-розробником
і зараз це видалю.

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

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

00:03:33.238 --> 00:03:36.070
Те, що ви можете понаставляти всюди
ліній прокрутки

00:03:36.070 --> 00:03:39.400
чи роздавити усіх котиків, не означає,
що вам слід так робити.

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

00:03:42.578 --> 00:03:47.338
і те, що ви вважайте веселим, може бути 
для них дуже складним у використанні.

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

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