-
Переважно ми використовуємо теги ,
коли хочемо розділити сторінку
-
на декілька блоків, змінити їхній розмір
і перемістити їх.
-
Потрібно мати здібності до дизайну,
щоб вирішити, як саме розмістити
-
елементи на сторінці, щоб вона
мала гарний вигляд.
-
Але зараз ми забудемо про мету
зробити сторінку гарною,
-
і я вам просто покажу, як можна
змінювати елементи на сторінці.
-
Змінімо розмір тега "official-info".
-
За замовчуванням він займає 100%
можливої ширини.
-
Тому ви бачите, що сірий блок
займає всю сторінку.
-
Але, можливо, я хочу, щоб він займав
лише 300 пікселів.
-
Я додам ще одну властивість до
правила CSS тут:
-
width: 300px;
-
Спрацювало, але зробімо
щось цікавіше.
-
Ми використаємо відсоткову ширину
-
і напишемо, що цей блок займатиме
70% можливої ширини.
-
Тепер текст поміщений
в менший блок,
-
і цей блок став вищий.
-
Якщо ми справді хочемо, ми можемо
також задати висоту блоку
-
за допомогою властивості "height":
-
height: 180 px;
-
Хмм, добре. Сталось щось смішне.
-
Сірий блок зменшився до 180 пікселів,
-
але текст виліз за його межі.
-
Чому так сталося?
-
Це через властивість, яку
ми називаємо "overflow" (переповнення).
-
Значення за замовчуванням
для "overflow"— "visible" (видимий),
-
що означає, що елементи змінюють розмір,
але вміст може виходити за їхні межі,
-
що має трохи дурний вигляд.
-
Які інші можливості існують
для "overflow"?
-
Ми можемо спробувати "hidden"
(прихований).
-
Це обріже текст, який виходить
за межі блоку.
-
Однак це не те, що нам зараз потрібно,
-
тому що так наші глядачі не зможуть
побачити весь чудовий абзац.
-
Ми можемо спробувати "auto" (автоматичний),
-
що скаже браузеру додати лінію
прокрутки, якщо текст виходить за межі блоку.
-
Тепер я можу прокрутити текст всередині
блоку і побачити його повністю.
-
Якщо ми хочемо, ми можемо бути ще
більш точними:
-
ми можемо визначити різні властивості
переповнення для усіх напрямків.
-
Наприклад, якщо ми хочемо,
-
щоб текст рухався по осі у, вниз та вгору,
-
ми напишемо: overflow-y: auto;
-
але якщо ми хочемо обрізати його
по осі х,
-
ми напишемо: overflow-x: hidden;
-
Будьте обережні щоразу, як
використовуєте властивість "overflow",
-
тому що лінії прокрутки можуть
бути дуже надокучливими для користувачів.
-
Особливо лінії прокрутки
з лініями прокрутки —
-
уникайте цього, якщо можете.
-
Повертаючись до властивостей width/height,
ми насправді можемо їх використовувати
-
для всіх типів елементів,
таких як зображення.
-
Тепер, коли ви знаєте CSS, ви можете
використовувати властивості CSS width/height,
-
замість атрибутів width/height.
-
Зробімо це зображення котика трохи
більшим, додавши id "cute-cat" (милий-котик),
-
видаливши атрибути
-
і перейшовши до правила стилю.
Ми напишемо: #cute-cat {
-
width: 120 px };
-
Так само як було з атрибутами,
-
тут також краще визначати
лише висоту або ширину
-
і дати браузеру обчислити найкраще
значення іншої величини.
-
В іншому випадку ми роздавимо котика!
-
Добре, це звучить доволі цікаво,
тому ми спробуємо всього на секундочку:
-
height: 40px;
-
Ха-ха, роздавлений котик, ура!
-
Добре, я вже позбулась
цього бажання.
-
Я буду відповідальним веб-розробником
і зараз це видалю.
-
Чим більше ви знаєте,
-
тим більш відповідальними ви маєте бути.
-
Те, що ви можете понаставляти всюди
ліній прокрутки
-
чи роздавити усіх котиків, не означає,
що вам слід так робити.
-
Тому що переважно ви робите
сайти і для інших людей,
-
і те, що ви вважайте веселим, може бути
для них дуже складним у використанні.
-
Але якщо ви створите кілька веселих речей
тут, на сайті Khan Academy, я не заперечуватиму.
-
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"
