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

2
00:00:03,858 --> 00:00:07,577
на декілька блоків, змінити їхній розмір
і перемістити їх.

3
00:00:07,737 --> 00:00:10,855
Потрібно мати здібності до дизайну,
щоб вирішити, як саме розмістити

4
00:00:10,855 --> 00:00:12,719
елементи на сторінці, щоб вона
мала гарний вигляд.

5
00:00:12,767 --> 00:00:16,484
Але зараз ми забудемо про мету
зробити сторінку гарною,

6
00:00:16,484 --> 00:00:18,701
і я вам просто покажу, як можна
змінювати елементи на сторінці.

7
00:00:18,841 --> 00:00:21,992
Змінімо розмір тега  "official-info".

8
00:00:21,992 --> 00:00:25,539
За замовчуванням він займає 100%
можливої ширини.

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

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

11
00:00:32,715 --> 00:00:36,700
Я додам ще одну властивість до
правила CSS тут:

12
00:00:36,700 --> 00:00:39,373
width: 300px;

13
00:00:40,179 --> 00:00:43,154
Спрацювало, але зробімо
щось цікавіше.

14
00:00:43,380 --> 00:00:44,967
Ми використаємо відсоткову ширину

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

16
00:00:50,287 --> 00:00:53,326
Тепер текст поміщений
в менший блок,

17
00:00:53,326 --> 00:00:55,233
і цей блок став вищий.

18
00:00:55,429 --> 00:00:59,136
Якщо ми справді хочемо, ми можемо
також задати висоту блоку

19
00:00:59,136 --> 00:01:00,584
за допомогою властивості "height":

20
00:01:01,028 --> 00:01:03,231
height: 180 px;

21
00:01:03,778 --> 00:01:06,582
Хмм, добре. Сталось щось смішне.

22
00:01:06,807 --> 00:01:09,642
Сірий блок зменшився до 180 пікселів,

23
00:01:09,642 --> 00:01:13,425
але текст виліз за його межі.

24
00:01:13,671 --> 00:01:15,507
Чому так сталося?

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

26
00:01:20,335 --> 00:01:23,893
Значення за замовчуванням 
для "overflow"— "visible" (видимий),

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

28
00:01:28,309 --> 00:01:30,118
що має трохи дурний вигляд.

29
00:01:30,455 --> 00:01:32,955
Які інші можливості існують
для "overflow"?

30
00:01:33,491 --> 00:01:36,489
Ми можемо спробувати "hidden"
(прихований).

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

32
00:01:40,358 --> 00:01:42,095
Однак це не те, що нам зараз потрібно,

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

34
00:01:46,287 --> 00:01:48,771
Ми можемо спробувати "auto" (автоматичний),

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

36
00:01:53,078 --> 00:01:56,692
Тепер я можу прокрутити текст всередині
блоку і побачити його повністю.

37
00:01:57,070 --> 00:01:59,475
Якщо ми хочемо, ми можемо бути ще
більш точними:

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

39
00:02:02,787 --> 00:02:04,177
Наприклад, якщо ми хочемо,

40
00:02:04,177 --> 00:02:07,643
щоб текст рухався по осі у, вниз та вгору,

41
00:02:07,643 --> 00:02:10,509
ми напишемо: overflow-y: auto;

42
00:02:10,832 --> 00:02:14,207
але якщо ми хочемо обрізати його
по осі х,

43
00:02:14,207 --> 00:02:16,765
ми напишемо: overflow-x: hidden;

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

45
00:02:21,419 --> 00:02:24,434
тому що лінії прокрутки можуть
бути дуже надокучливими для користувачів.

46
00:02:24,599 --> 00:02:27,215
Особливо лінії прокрутки 
з лініями прокрутки —

47
00:02:27,215 --> 00:02:28,829
уникайте цього, якщо можете.

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

49
00:02:33,974 --> 00:02:37,102
для всіх типів елементів, 
таких як зображення.

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

51
00:02:42,168 --> 00:02:44,649
замість атрибутів width/height.

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

53
00:02:52,542 --> 00:02:55,415
видаливши атрибути

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

55
00:03:00,396 --> 00:03:03,128
width: 120 px };

56
00:03:03,585 --> 00:03:06,328
Так само як було з атрибутами,

57
00:03:06,328 --> 00:03:09,027
тут також краще визначати 
лише висоту або ширину

58
00:03:09,027 --> 00:03:12,548
і дати браузеру обчислити найкраще
значення іншої величини.

59
00:03:12,618 --> 00:03:14,679
В іншому випадку ми роздавимо котика!

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

61
00:03:18,877 --> 00:03:20,021
height: 40px;

62
00:03:20,021 --> 00:03:21,726
Ха-ха, роздавлений котик, ура!

63
00:03:22,059 --> 00:03:25,003
Добре, я вже позбулась
цього бажання.

64
00:03:25,077 --> 00:03:28,793
Я буду відповідальним веб-розробником
і зараз це видалю.

65
00:03:29,009 --> 00:03:30,689
Чим більше ви знаєте,

66
00:03:30,689 --> 00:03:33,077
тим більш відповідальними ви маєте бути.

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

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

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

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

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

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