17 KiB
Пројекат Тераријум, део 2: Увод у CSS
Скетч од Tomomi Imura
Квиз пре предавања
Увод
CSS, или Cascading Style Sheets, решава важан проблем веб развоја: како учинити да ваша веб страница изгледа лепо. Стилизовање ваших апликација их чини употребљивијим и лепшим; CSS можете користити и за креирање одзивног веб дизајна (RWD) - омогућавајући вашим апликацијама да изгледају добро без обзира на величину екрана на којем се приказују. CSS није само за улепшавање апликација; његова спецификација укључује анимације и трансформације које могу омогућити софистициране интеракције за ваше апликације. CSS Радна група помаже у одржавању актуелних CSS спецификација; можете пратити њихов рад на сајту World Wide Web Consortium-а.
Напомена: CSS је језик који се развија, као и све на вебу, и не сви претраживачи подржавају новије делове спецификације. Увек проверите своје имплементације консултујући CanIUse.com.
У овом предавању, додаћемо стилове нашем онлајн тераријуму и научити више о неколико CSS концепата: каскади, наслеђивању, коришћењу селектора, позиционирању и коришћењу CSS-а за изградњу распореда. У процесу ћемо распоредити тераријум и креирати сам тераријум.
Предуслов
Требало би да имате HTML за ваш тераријум направљен и спреман за стилизовање.
Погледајте видео
Задатак
У вашем фолдеру за тераријум, направите нову датотеку под називом style.css. Увезите ту датотеку у <head> секцију:
<link rel="stylesheet" href="./style.css" />
Каскада
Cascading Style Sheets укључују идеју да се стилови 'каскадно' примењују тако да је примена стила вођена његовим приоритетом. Стилови које постави аутор веб странице имају приоритет над онима које постави претраживач. Стилови постављени 'inline' имају приоритет над онима постављеним у екстерној стилској датотеци.
Задатак
Додајте inline стил "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 Позиционирање
Мешање својстава позиционирања (постоје static, relative, fixed, absolute и sticky позиције) може бити мало незгодно, али када се правилно уради, даје вам добру контролу над елементима на вашим страницама.
Апсолутно позиционирани елементи се позиционирају релативно према најближим позиционираним прецима, а ако их нема, позиционирају се према телу документа.
Релативно позиционирани елементи се позиционирају на основу CSS упутстава за прилагођавање њиховог положаја у односу на њихову почетну позицију.
У нашем примеру, plant-holder је релативно позициониран елемент који је позициониран унутар апсолутно позиционираног контејнера. Резултатно понашање је да су бочни контејнери причвршћени лево и десно, а plant-holder је угнежден, прилагођавајући се унутар бочних контејнера, дајући простор за постављање биљака у вертикални ред.
Сама
plantтакође има апсолутно позиционирање, неопходно за њено превлачење, како ћете открити у следећем предавању.
✅ Експериментишите са променом типова позиционирања бочних контејнера и plant-holder. Шта се дешава?
CSS Распореди
Сада ћете користити оно што сте научили да изградите сам тераријум, све користећи CSS!
Прво, стилизујте .terrarium div децу као заобљени правоугаоник користећи 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. Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.