18 KiB
Проєкт "Тераріум", Частина 2: Вступ до CSS
Скетчнот від Tomomi Imura
Тест перед лекцією
Вступ
CSS, або каскадні таблиці стилів, вирішують важливу проблему веб-розробки: як зробити ваш вебсайт привабливим. Стилізація ваших додатків робить їх більш зручними та естетично привабливими; також за допомогою CSS можна створити адаптивний веб-дизайн (Responsive Web Design, RWD), що дозволяє вашим додаткам виглядати добре незалежно від розміру екрана. CSS — це не лише про зовнішній вигляд; його специфікація включає анімації та трансформації, які можуть забезпечити складні взаємодії для ваших додатків. Робоча група CSS допомагає підтримувати актуальні специфікації CSS; ви можете стежити за їхньою роботою на сайті World Wide Web Consortium.
Зверніть увагу, CSS — це мова, яка постійно розвивається, як і все у вебі, і не всі браузери підтримують нові частини специфікації. Завжди перевіряйте свої реалізації, звертаючись до CanIUse.com.
У цьому уроці ми додамо стилі до нашого онлайн-тераріуму та дізнаємося більше про кілька концепцій CSS: каскадність, успадкування, використання селекторів, позиціонування та створення макетів за допомогою CSS. У процесі ми створимо макет тераріуму та сам тераріум.
Попередні знання
Ви повинні мати готовий HTML для вашого тераріуму, щоб його можна було стилізувати.
Перегляньте відео
Завдання
У папці вашого тераріуму створіть новий файл під назвою style.css. Імпортуйте цей файл у секцію <head>:
<link rel="stylesheet" href="./style.css" />
Каскадність
Каскадні таблиці стилів включають ідею, що стилі "каскадують", тобто застосування стилю керується його пріоритетом. Стилі, встановлені автором вебсайту, мають пріоритет над стилями, встановленими браузером. Стилі, встановлені "вбудовано", мають пріоритет над стилями, встановленими у зовнішньому файлі стилів.
Завдання
Додайте вбудований стиль "color: red" до вашого тегу <h1>:
<h1 style="color: red">My Terrarium</h1>
Потім додайте наступний код до вашого файлу style.css:
h1 {
color: blue;
}
✅ Який колір відображається у вашому веб-додатку? Чому? Чи можете ви знайти спосіб перевизначити стилі? Коли ви хотіли б це зробити, або чому ні?
Успадкування
Стилі успадковуються від стилю предка до нащадка, так що вкладені елементи успадковують стилі своїх батьків.
Завдання
Встановіть шрифт для тіла документа і перевірте шрифт вкладеного елемента:
body {
font-family: helvetica, arial, sans-serif;
}
Відкрийте консоль вашого браузера на вкладці 'Elements' і спостерігайте за шрифтом H1. Він успадковує свій шрифт від тіла документа, як зазначено у браузері:
✅ Чи можете ви зробити так, щоб вкладений стиль успадковував іншу властивість?
Селектори CSS
Теги
На даний момент ваш файл style.css має стилізовані лише кілька тегів, і додаток виглядає досить дивно:
body {
font-family: helvetica, arial, sans-serif;
}
h1 {
color: #3a241d;
text-align: center;
}
Такий спосіб стилізації тегу дає вам контроль над унікальними елементами, але вам потрібно контролювати стилі багатьох рослин у вашому тераріумі. Для цього вам потрібно використовувати селектори CSS.
Ідентифікатори (Ids)
Додайте стиль для розташування лівого та правого контейнерів. Оскільки є лише один лівий контейнер і лише один правий контейнер, їм присвоєно ідентифікатори у розмітці. Для їх стилізації використовуйте #:
#left-container {
background-color: #eee;
width: 15%;
left: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}
#right-container {
background-color: #eee;
width: 15%;
right: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}
Тут ви розмістили ці контейнери з абсолютним позиціонуванням на крайній лівій та правій частині екрана, і використали відсотки для їх ширини, щоб вони могли масштабуватися для маленьких мобільних екранів.
✅ Цей код досить повторюваний, тобто не відповідає принципу "DRY" (Don't Repeat Yourself); чи можете ви знайти кращий спосіб стилізувати ці ідентифікатори, можливо, за допомогою ідентифікатора та класу? Вам потрібно буде змінити розмітку та рефакторити CSS:
<div id="left-container" class="container"></div>
Класи
У наведеному вище прикладі ви стилізували два унікальні елементи на екрані. Якщо ви хочете, щоб стилі застосовувалися до багатьох елементів на екрані, ви можете використовувати класи CSS. Зробіть це для розташування рослин у лівому та правому контейнерах.
Зверніть увагу, що кожна рослина у HTML-розмітці має комбінацію ідентифікаторів та класів. Ідентифікатори тут використовуються JavaScript, який ви додасте пізніше, для маніпуляції розташуванням рослин у тераріумі. Класи ж надають всім рослинам певний стиль.
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>
Додайте наступне до вашого файлу style.css:
.plant-holder {
position: relative;
height: 13%;
left: -10px;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
}
Примітним у цьому фрагменті є змішування відносного та абсолютного позиціонування, яке ми розглянемо у наступному розділі. Зверніть увагу на те, як висоти обробляються за допомогою відсотків:
Ви встановили висоту тримача рослин на 13%, гарне значення, щоб усі рослини відображалися у кожному вертикальному контейнері без необхідності прокручування.
Ви змістили тримач рослин вліво, щоб рослини були більш центровані у своєму контейнері. Зображення мають великий обсяг прозорого фону, щоб зробити їх більш зручними для перетягування, тому їх потрібно змістити вліво, щоб краще вписатися на екрані.
Потім самій рослині встановлено максимальну ширину 150%. Це дозволяє їй масштабуватися вниз, коли браузер масштабується вниз. Спробуйте змінити розмір вашого браузера; рослини залишаються у своїх контейнерах, але масштабуються вниз, щоб вписатися.
Також примітним є використання z-index, який контролює відносну висоту елемента (щоб рослини розташовувалися поверх контейнера і виглядали так, ніби вони знаходяться всередині тераріуму).
✅ Чому вам потрібні як тримач рослин, так і селектор рослин у CSS?
Позиціонування CSS
Змішування властивостей позиціонування (є статичне, відносне, фіксоване, абсолютне та липке позиціонування) може бути трохи складним, але якщо зроблено правильно, це дає вам хороший контроль над елементами на ваших сторінках.
Абсолютно позиціоновані елементи розташовуються відносно найближчих позиціонованих предків, а якщо таких немає, то відносно тіла документа.
Відносно позиціоновані елементи розташовуються на основі вказівок CSS, щоб змістити їх від початкової позиції.
У нашому прикладі plant-holder є елементом з відносним позиціонуванням, який розташовується всередині контейнера з абсолютним позиціонуванням. Результат такої поведінки полягає в тому, що бокові контейнери закріплені ліворуч і праворуч, а plant-holder вкладений, зміщуючи себе всередині бокових контейнерів, створюючи простір для розміщення рослин у вертикальному ряду.
Сам
plantтакож має абсолютне позиціонування, необхідне для того, щоб зробити його перетягуваним, як ви дізнаєтеся у наступному уроці.
✅ Експериментуйте зі зміною типів позиціонування бокових контейнерів і plant-holder. Що відбувається?
Макети CSS
Тепер ви використаєте те, що дізналися, щоб створити сам тераріум, використовуючи лише CSS!
Спочатку стилізуйте дочірні елементи .terrarium як закруглений прямокутник за допомогою CSS:
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0%;
left: 25%;
opacity: 0.7;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
Зверніть увагу на використання відсотків тут. Якщо ви зменшите масштаб вашого браузера, ви побачите, як банка також масштабується. Також зверніть увагу на ширини та висоти у відсотках для елементів банки і на те, як кожен елемент абсолютно позиціонується у центрі, закріплений до нижньої частини вікна перегляду.
Ми також використовуємо rem для border-radius, довжини, що залежить від шрифту. Дізнайтеся більше про цей тип відносного вимірювання у специфікації CSS.
✅ Спробуйте змінити кольори банки та прозорість порівняно з кольорами ґрунту. Що відбувається? Чому?
🚀Виклик
Додайте "бульбашковий" блиск у нижній лівій частині банки, щоб вона виглядала більш схожою на скло. Ви будете стилізувати .jar-glossy-long та .jar-glossy-short, щоб вони виглядали як відблиск. Ось як це виглядатиме:
Щоб завершити тест після лекції, пройдіть цей модуль Learn: Стилізуйте ваш HTML-додаток за допомогою CSS
Тест після лекції
Огляд та самостійне навчання
CSS здається оманливо простим, але є багато викликів при спробі ідеально стилізувати додаток для всіх браузерів і всіх розмірів екранів. CSS-Grid і Flexbox — це інструменти, які були розроблені, щоб зробити роботу трохи більш структурованою та надійною. Дізнайтеся про ці інструменти, граючи у Flexbox Froggy та Grid Garden.
Завдання
Відмова від відповідальності:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.