# Проект Терариум Част 2: Въведение в CSS
> Скица от [Tomomi Imura](https://twitter.com/girlie_mac)
## Предварителен тест
[Предварителен тест](https://ff-quizzes.netlify.app/web/quiz/17)
### Въведение
CSS, или Cascading Style Sheets, решава важен проблем в уеб разработката: как да направите вашия уебсайт да изглежда добре. Стилизирайки вашите приложения, ги правите по-удобни за използване и по-привлекателни; също така можете да използвате 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
```
---
## Каскадност
Cascading Style Sheets включват идеята, че стиловете "каскадират", така че прилагането на стил се ръководи от неговия приоритет. Стиловете, зададени от автора на уебсайта, имат приоритет пред тези, зададени от браузъра. Стиловете, зададени "inline", имат приоритет пред тези, зададени във външен стилов файл.
### Задача
Добавете inline стил "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 селектори.
### Id-та
Добавете стил за подреждане на левия и десния контейнер. Тъй като има само един ляв контейнер и само един десен контейнер, те получават id-та в маркировката. За да ги стилизирате, използвайте `#`:
```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); можете ли да намерите по-добър начин за стилизиране на тези id-та, може би с id и клас? Ще трябва да промените маркировката и да рефакторирате CSS:
```html
```
### Класове
В горния пример сте стилизирали два уникални елемента на екрана. Ако искате стиловете да се прилагат към много елементи на екрана, можете да използвате CSS класове. Направете това, за да подредите растенията в левия и десния контейнер.
Обърнете внимание, че всяко растение в HTML маркировката има комбинация от id-та и класове. Id-тата тук се използват от 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` div като заоблен правоъгълник с помощта на 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)
---
**Отказ от отговорност**:
Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
