# Пројекат Тераријум, Део 2: Увод у CSS
> Скетч од [Томоми Имура](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 спецификација; можете пратити њихов рад на [сајту Светског конзорцијума за веб](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
```
---
## Каскада
Каскадни стилови укључују идеју да се стилови 'каскадно' примењују тако да је примена стила вођена његовим приоритетом. Стилови које постави аутор веб сајта имају приоритет над онима које постави претраживач. Стилови постављени '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 селекторе.
### ИД-ови
Додајте неки стил за распоређивање левих и десних контејнера. Пошто постоји само један леви и један десни контејнер, они добијају ИД-ове у маркупу. Да бисте их стилизовали, користите `#`:
```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 Позиционирање
Мешање својстава позиционирања (постоје static, relative, fixed, absolute и sticky позиције) може бити мало незгодно, али када се правилно уради, даје вам добру контролу над елементима на вашим страницама.
Апсолутно позиционирани елементи се позиционирају у односу на своје најближе позициониране претке, а ако их нема, позиционирају се у односу на тело документа.
Релативно позиционирани елементи се позиционирају на основу 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). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
