# Проєкт "Тераріум", Частина 2: Вступ до CSS
> Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac)
## Тест перед лекцією
[Тест перед лекцією](https://ff-quizzes.netlify.app/web/quiz/17)
### Вступ
CSS, або каскадні таблиці стилів, вирішують важливу проблему веб-розробки: як зробити ваш вебсайт привабливим. Стилізація ваших додатків робить їх більш зручними та естетично привабливими; також за допомогою CSS можна створити адаптивний веб-дизайн (Responsive Web Design, RWD), що дозволяє вашим додаткам виглядати добре незалежно від розміру екрана. CSS — це не лише про зовнішній вигляд; його специфікація включає анімації та трансформації, які можуть забезпечити складні взаємодії для ваших додатків. Робоча група CSS допомагає підтримувати актуальні специфікації CSS; ви можете стежити за їхньою роботою на [сайті World Wide Web Consortium](https://www.w3.org/Style/CSS/members).
> Зверніть увагу, CSS — це мова, яка постійно розвивається, як і все у вебі, і не всі браузери підтримують нові частини специфікації. Завжди перевіряйте свої реалізації, звертаючись до [CanIUse.com](https://caniuse.com).
У цьому уроці ми додамо стилі до нашого онлайн-тераріуму та дізнаємося більше про кілька концепцій CSS: каскадність, успадкування, використання селекторів, позиціонування та створення макетів за допомогою CSS. У процесі ми створимо макет тераріуму та сам тераріум.
### Попередні знання
Ви повинні мати готовий HTML для вашого тераріуму, щоб його можна було стилізувати.
> Перегляньте відео
>
> [](https://www.youtube.com/watch?v=6yIdOIV9p1I)
### Завдання
У папці вашого тераріуму створіть новий файл під назвою `style.css`. Імпортуйте цей файл у секцію ``:
```html
```
---
## Каскадність
Каскадні таблиці стилів включають ідею, що стилі "каскадують", тобто застосування стилю керується його пріоритетом. Стилі, встановлені автором вебсайту, мають пріоритет над стилями, встановленими браузером. Стилі, встановлені "вбудовано", мають пріоритет над стилями, встановленими у зовнішньому файлі стилів.
### Завдання
Додайте вбудований стиль "color: red" до вашого тегу `
`:
```HTML
My Terrarium
```
Потім додайте наступний код до вашого файлу `style.css`:
```CSS
h1 {
color: blue;
}
```
✅ Який колір відображається у вашому веб-додатку? Чому? Чи можете ви знайти спосіб перевизначити стилі? Коли ви хотіли б це зробити, або чому ні?
---
## Успадкування
Стилі успадковуються від стилю предка до нащадка, так що вкладені елементи успадковують стилі своїх батьків.
### Завдання
Встановіть шрифт для тіла документа і перевірте шрифт вкладеного елемента:
```CSS
body {
font-family: helvetica, arial, sans-serif;
}
```
Відкрийте консоль вашого браузера на вкладці 'Elements' і спостерігайте за шрифтом H1. Він успадковує свій шрифт від тіла документа, як зазначено у браузері:
✅ Чи можете ви зробити так, щоб вкладений стиль успадковував іншу властивість?
---
## Селектори CSS
### Теги
На даний момент ваш файл `style.css` має стилізовані лише кілька тегів, і додаток виглядає досить дивно:
```CSS
body {
font-family: helvetica, arial, sans-serif;
}
h1 {
color: #3a241d;
text-align: center;
}
```
Такий спосіб стилізації тегу дає вам контроль над унікальними елементами, але вам потрібно контролювати стилі багатьох рослин у вашому тераріумі. Для цього вам потрібно використовувати селектори CSS.
### Ідентифікатори (Ids)
Додайте стиль для розташування лівого та правого контейнерів. Оскільки є лише один лівий контейнер і лише один правий контейнер, їм присвоєно ідентифікатори у розмітці. Для їх стилізації використовуйте `#`:
```CSS
#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:
```html
```
### Класи
У наведеному вище прикладі ви стилізували два унікальні елементи на екрані. Якщо ви хочете, щоб стилі застосовувалися до багатьох елементів на екрані, ви можете використовувати класи CSS. Зробіть це для розташування рослин у лівому та правому контейнерах.
Зверніть увагу, що кожна рослина у HTML-розмітці має комбінацію ідентифікаторів та класів. Ідентифікатори тут використовуються JavaScript, який ви додасте пізніше, для маніпуляції розташуванням рослин у тераріумі. Класи ж надають всім рослинам певний стиль.
```html
```
Додайте наступне до вашого файлу `style.css`:
```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:
```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](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
✅ Спробуйте змінити кольори банки та прозорість порівняно з кольорами ґрунту. Що відбувається? Чому?
---
## 🚀Виклик
Додайте "бульбашковий" блиск у нижній лівій частині банки, щоб вона виглядала більш схожою на скло. Ви будете стилізувати `.jar-glossy-long` та `.jar-glossy-short`, щоб вони виглядали як відблиск. Ось як це виглядатиме:
Щоб завершити тест після лекції, пройдіть цей модуль Learn: [Стилізуйте ваш HTML-додаток за допомогою CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
## Тест після лекції
[Тест після лекції](https://ff-quizzes.netlify.app/web/quiz/18)
## Огляд та самостійне навчання
CSS здається оманливо простим, але є багато викликів при спробі ідеально стилізувати додаток для всіх браузерів і всіх розмірів екранів. CSS-Grid і Flexbox — це інструменти, які були розроблені, щоб зробити роботу трохи більш структурованою та надійною. Дізнайтеся про ці інструменти, граючи у [Flexbox Froggy](https://flexboxfroggy.com/) та [Grid Garden](https://codepip.com/games/grid-garden/).
## Завдання
[Рефакторинг CSS](assignment.md)
---
**Відмова від відповідальності**:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
