11 KiB
Terrarium-projekti, osa 2: Johdatus CSS:ään
Sketchnote: Tomomi Imura
Ennakkokysely
Johdanto
CSS eli Cascading Style Sheets ratkaisee tärkeän ongelman verkkokehityksessä: miten saada verkkosivustosi näyttämään hyvältä. Sovellusten tyylittely tekee niistä käytettävämpiä ja visuaalisesti miellyttävämpiä; CSS:ää voidaan myös käyttää luomaan responsiivista verkkosuunnittelua (Responsive Web Design, RWD), jolloin sovellukset näyttävät hyviltä riippumatta siitä, minkä kokoisella näytöllä niitä käytetään. CSS ei ole pelkästään ulkonäön parantamista varten; sen määrittely sisältää myös animaatioita ja muunnoksia, jotka mahdollistavat kehittyneitä vuorovaikutuksia sovelluksissasi. CSS Working Group ylläpitää nykyisiä CSS-määrittelyjä; voit seurata heidän työtään World Wide Web Consortiumin sivustolla.
Huomaa, että CSS on kieli, joka kehittyy kuten kaikki muutkin verkkoteknologiat, eikä kaikki selaimet tue uusimpia määrittelyn osia. Tarkista aina toteutuksesi CanIUse.com-sivustolta.
Tässä oppitunnissa lisäämme tyylejä verkkoterrariumiimme ja opimme lisää useista CSS-käsitteistä: kaskadista, periytymisestä sekä valitsimien, asemoinnin ja CSS:n avulla tehtävien asettelujen käytöstä. Samalla rakennamme terrariumin asettelun ja luomme itse terrariumin.
Esitiedot
Sinulla tulisi olla terrariumisi HTML valmiina tyylittelyä varten.
Katso video
Tehtävä
Luo terrarium-kansioosi uusi tiedosto nimeltä style.css. Tuo tämä tiedosto <head>-osioon:
<link rel="stylesheet" href="./style.css" />
Kaskadi
Cascading Style Sheets sisältää ajatuksen siitä, että tyylit "kaskadoituvat", eli tyylin soveltaminen määräytyy sen prioriteetin mukaan. Verkkosivuston tekijän määrittämät tyylit ovat etusijalla selaimen oletustyyleihin nähden. "Inline"-tyylit ovat etusijalla ulkoisessa tyylitiedostossa määritettyihin tyyleihin nähden.
Tehtävä
Lisää "inline"-tyyli "color: red" <h1>-tagiisi:
<h1 style="color: red">My Terrarium</h1>
Lisää sitten seuraava koodi style.css-tiedostoosi:
h1 {
color: blue;
}
✅ Mikä väri näkyy verkkosovelluksessasi? Miksi? Voitko löytää tavan ohittaa tyylit? Milloin haluaisit tehdä näin, tai miksi et?
Periytyminen
Tyylit periytyvät esivanhemmalta jälkeläiselle, eli sisäkkäiset elementit perivät vanhempiensa tyylit.
Tehtävä
Aseta bodylle tietty fontti ja tarkista, periytyykö fontti sisäkkäiselle elementille:
body {
font-family: helvetica, arial, sans-serif;
}
Avaa selaimesi konsolista 'Elements'-välilehti ja tarkkaile H1:n fonttia. Se perii fonttinsa bodysta, kuten selain ilmoittaa:
✅ Voitko saada sisäkkäisen tyylin perimään eri ominaisuuden?
CSS-valitsimet
Tagit
Tähän mennessä style.css-tiedostossasi on vain muutama tagi tyyliteltynä, ja sovellus näyttää melko oudolta:
body {
font-family: helvetica, arial, sans-serif;
}
h1 {
color: #3a241d;
text-align: center;
}
Tällä tavalla tagin tyylittely antaa sinulle hallinnan yksittäisiin elementteihin, mutta sinun täytyy hallita monien kasvien tyylejä terrariumissasi. Tätä varten sinun täytyy hyödyntää CSS-valitsimia.
Id:t
Lisää tyyliä asettelemaan vasen ja oikea säilö. Koska merkinnässä on vain yksi vasen säilö ja yksi oikea säilö, niille on annettu id:t. Tyylittele niitä käyttämällä #:
#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;
}
Tässä olet asettanut nämä säilöt absoluuttisella asemoinnilla aivan näytön vasempaan ja oikeaan reunaan ja käyttänyt prosentteja niiden leveydelle, jotta ne voivat mukautua pienille mobiilinäytöille.
✅ Tämä koodi on melko toistuvaa, joten se ei ole "DRY" (Don't Repeat Yourself); voitko löytää paremman tavan tyylitellä näitä id:itä, ehkä yhdistämällä id:n ja luokan? Sinun täytyisi muuttaa merkintää ja refaktoroida CSS:
<div id="left-container" class="container"></div>
Luokat
Yllä olevassa esimerkissä tyylittelit kahta ainutlaatuista elementtiä näytöllä. Jos haluat tyylien koskevan monia elementtejä näytöllä, voit käyttää CSS-luokkia. Tee näin asettelemaan kasvit vasemmassa ja oikeassa säilössä.
Huomaa, että jokaisella kasvilla HTML-merkinnässä on yhdistelmä id:itä ja luokkia. Id:tä käytetään tässä myöhemmin lisättävän JavaScriptin avulla manipuloimaan terrariumin kasvien sijoittelua. Luokat taas antavat kaikille kasveille tietyn tyylin.
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>
Lisää seuraava style.css-tiedostoosi:
.plant-holder {
position: relative;
height: 13%;
left: -10px;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
}
Tässä koodinpätkässä on huomionarvoista suhteellisen ja absoluuttisen asemoinnin yhdistelmä, jota käsitellään seuraavassa osiossa. Tarkastele tapaa, jolla korkeuksia käsitellään prosentteina:
Olet asettanut kasvien säilön korkeudeksi 13 %, mikä on hyvä luku varmistaaksesi, että kaikki kasvit näkyvät pystysuorassa säilössä ilman tarvetta vierittää.
Olet siirtänyt kasvien säilöä vasemmalle, jotta kasvit olisivat paremmin keskitettyjä säilöönsä. Kuvilla on paljon läpinäkyvää taustaa, jotta ne olisivat helpommin vedettäviä, joten ne täytyy siirtää vasemmalle, jotta ne sopivat paremmin näytölle.
Kasville itselleen on annettu enimmäisleveys 150 %. Tämä mahdollistaa sen skaalautumisen alaspäin selaimen pienentyessä. Kokeile muuttaa selaimesi kokoa; kasvit pysyvät säilöissään mutta skaalautuvat sopimaan.
Huomionarvoista on myös z-indeksin käyttö, joka hallitsee elementin suhteellista korkeutta (jotta kasvit istuvat säilön päällä ja näyttävät olevan terrariumin sisällä).
✅ Miksi tarvitset sekä kasvien säilön että kasvin CSS-valitsimen?
CSS-asemointi
Eri asemointiominaisuuksien (staattinen, suhteellinen, kiinteä, absoluuttinen ja tahmea asemointi) yhdistäminen voi olla hieman hankalaa, mutta kun se tehdään oikein, se antaa sinulle hyvän hallinnan sivujesi elementteihin.
Absoluuttisesti asemoidut elementit asemoidaan lähimpään asemoituun esivanhempaansa nähden, ja jos sellaista ei ole, ne asemoidaan dokumentin runkoon nähden.
Suhteellisesti asemoidut elementit asemoidaan CSS:n ohjeiden mukaan siirtymään pois alkuperäisestä sijainnistaan.
Esimerkissämme plant-holder on suhteellisesti asemoitu elementti, joka on asemoitu absoluuttisesti asemoidun säilön sisällä. Tuloksena on, että sivupalkkisäilöt on kiinnitetty vasemmalle ja oikealle, ja plant-holder on sisäkkäinen, mukautuen sivupalkkien sisällä ja antaen tilaa kasvien sijoittamiselle pystysuoraan riviin.
Itse
planton myös absoluuttisesti asemoitu, mikä on tarpeen sen vedettävyyden mahdollistamiseksi, kuten huomaat seuraavassa oppitunnissa.
✅ Kokeile vaihtaa sivusäilöjen ja plant-holder-elementin asemointityyppejä. Mitä tapahtuu?
CSS-asettelut
Nyt käytät oppimaasi rakentaaksesi itse terrariumin, täysin CSS:n avulla!
Tyylittele ensin .terrarium-divin lapset pyöristetyksi suorakulmioksi CSS:n avulla:
.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;
}
Huomaa prosenttien käyttö tässä. Jos pienennät selaintasi, näet, kuinka purkki skaalautuu. Huomaa myös purkkielementtien leveys- ja korkeuspisteet sekä se, kuinka jokainen elementti on absoluuttisesti asemoitu keskelle ja kiinnitetty näkymän alareunaan.
Käytämme myös rem-yksikköä border-radius-ominaisuudessa, joka on fonttiin suhteutettu mitta. Lue lisää tästä suhteellisesta mittayksiköstä CSS-määrittelystä.
✅ Kokeile muuttaa purkin värejä ja läpinäkyvyyttä verrattuna maahan. Mitä tapahtuu? Miksi?
🚀Haaste
Lisää "kuplamainen" kiilto purkin vasempaan alareunaan, jotta se näyttäisi lasimaisemmalta. Tyylittele .jar-glossy-long ja .jar-glossy-short näyttämään heijastavalta kiillolta. Tässä on esimerkki lopputuloksesta:
Suorita jälkikysely käymällä läpi tämä Learn-moduuli: Tyylittele HTML-sovelluksesi CSS:llä
Jälkikysely
Kertaus ja itseopiskelu
CSS vaikuttaa petollisen yksinkertaiselta, mutta täydellisen sovelluksen tyylittely kaikille selaimille ja kaikille näytön kokoille voi olla haastavaa. CSS-Grid ja Flexbox ovat työkaluja, jotka on kehitetty tekemään työstä hieman rakenteellisempaa ja luotettavampaa. Opi näistä työkaluista pelaamalla Flexbox Froggy ja Grid Garden.
Tehtävä
Vastuuvapauslauseke:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua Co-op Translator. Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.