11 KiB
Terrarium-projekti Osa 2: Johdatus CSS:ään
Sketchnote: Tomomi Imura
Ennakkokysely
Johdanto
CSS eli Cascading Style Sheets ratkaisee tärkeän ongelman verkkosivujen kehityksessä: miten saada verkkosivusto 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 (RWD), jolloin sovellukset näyttävät hyviltä riippumatta näytön koosta. CSS ei ole pelkästään ulkoasun parantamista varten; sen määrittely sisältää animaatioita ja muunnoksia, jotka mahdollistavat kehittyneitä vuorovaikutuksia sovelluksille. 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 kehittyvä kieli, kuten kaikki verkkoteknologiat, eikä kaikki selaimet tue uusimpia määrittelyjä. Tarkista aina toteutuksesi CanIUse.com -sivustolta.
Tässä oppitunnissa lisäämme tyylejä verkkoterrariumiimme ja opimme lisää useista CSS-konsepteista: kaskadista, periytymisestä sekä valitsimien, asemoinnin ja CSS:n käytöstä asettelujen rakentamiseen. Samalla asetamme terrariumin ja luomme itse terrariumin.
Esitietovaatimukset
Sinulla tulisi olla HTML-tiedosto terrariumillesi valmiina tyyliteltäväksi.
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, että tyylit "kaskadoituvat", jolloin tyylin soveltaminen määräytyy sen prioriteetin mukaan. Verkkosivuston tekijän määrittämät tyylit ovat etusijalla selaimen määrittämiin tyyleihin nähden. "Inline"-tyylit ovat etusijalla ulkoisessa tyylitiedostossa määritettyihin tyyleihin nähden.
Tehtävä
Lisää "inline"-tyyli "color: red" <h1>-tunnisteeseesi:
<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ä tämän, tai miksi et?
Periytyminen
Tyylit periytyvät esivanhemmalta jälkeläiselle, jolloin sisäkkäiset elementit perivät vanhempiensa tyylit.
Tehtävä
Aseta body-tunnisteen fontti tiettyyn fonttiin ja tarkista sisäkkäisen elementin fontti:
body {
font-family: helvetica, arial, sans-serif;
}
Avaa selaimesi konsoli ja siirry 'Elements'-välilehteen. Tarkkaile H1:n fonttia. Se perii fonttinsa body-tunnisteesta, kuten selaimessa ilmoitetaan:
✅ Voitko saada sisäkkäisen tyylin perimään eri ominaisuuden?
CSS-valitsimet
Tunnisteet
Tähän mennessä style.css-tiedostossasi on vain muutama tunniste tyyliteltynä, ja sovellus näyttää melko oudolta:
body {
font-family: helvetica, arial, sans-serif;
}
h1 {
color: #3a241d;
text-align: center;
}
Tämä tapa tyylitellä tunniste 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ä vasemman ja oikean säiliön asetteluun. Koska on vain yksi vasen säiliö ja yksi oikea säiliö, niille annetaan id:t merkinnässä. 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 sijoittanut nämä säiliöt absoluuttisella asemoinnilla näytön vasempaan ja oikeaan reunaan ja käyttänyt prosentteja niiden leveydessä, jotta ne voivat skaalautua pienille mobiilinäytöille.
✅ Tämä koodi on melko toistuva, eikä siis "DRY" (Don't Repeat Yourself); voitko löytää paremman tavan tyylitellä näitä id:itä, ehkä id:n ja luokan avulla? Sinun täytyisi muuttaa merkintää ja refaktoroida CSS:
<div id="left-container" class="container"></div>
Luokat
Yllä olevassa esimerkissä tyylittelit kaksi yksittäistä elementtiä näytöllä. Jos haluat tyylien koskevan monia elementtejä näytöllä, voit käyttää CSS-luokkia. Tee tämä asettaaksesi kasvit vasemman ja oikean säiliön sisälle.
Huomaa, että jokaisella kasvilla HTML-merkinnässä on yhdistelmä id:itä ja luokkia. Id:t tässä käytetään 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;
}
Huomionarvoista tässä koodissa on suhteellisen ja absoluuttisen asemoinnin sekoittaminen, jota käsitellään seuraavassa osiossa. Tarkastele tapaa, jolla korkeudet käsitellään prosentteina:
Asetat kasvien pidikkeen korkeudeksi 13 %, mikä on hyvä luku, jotta kaikki kasvit näkyvät pystysuorassa säiliössä ilman tarvetta vierittää.
Kasvien pidike siirretään vasemmalle, jotta kasvit ovat paremmin keskitettyinä säiliön sisällä. Kuvilla on suuri määrä läpinäkyvää taustaa, jotta ne ovat helpommin vedettäviä, joten ne täytyy siirtää vasemmalle, jotta ne sopivat paremmin näytölle.
Kasville itselleen annetaan enimmäisleveys 150 %. Tämä mahdollistaa sen skaalautumisen alas, kun selain skaalautuu alas. Kokeile muuttaa selaimesi kokoa; kasvit pysyvät säiliöissään mutta skaalautuvat alas sopimaan.
Huomionarvoista on myös z-indeksin käyttö, joka hallitsee elementin suhteellista korkeutta (jotta kasvit istuvat säiliön päällä ja näyttävät olevan terrariumin sisällä).
✅ Miksi tarvitset sekä kasvien pidikkeen 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 hyvän hallinnan elementteihin sivuillasi.
Absoluuttisesti asemoidut elementit asemoidaan lähimpään asemoituun esivanhempaan, ja jos sellaista ei ole, ne asemoidaan asiakirjan runkoon.
Suhteellisesti asemoidut elementit asemoidaan CSS:n ohjeiden mukaan siirtämään niiden sijoittelua pois alkuperäisestä sijainnistaan.
Esimerkissämme plant-holder on suhteellisesti asemoitu elementti, joka asemoidaan absoluuttisesti asemoidun säiliön sisälle. Tuloksena on, että sivupalkkisäiliöt kiinnitetään vasemmalle ja oikealle, ja plant-holder on sisäkkäinen, mukautuen sivupalkkien sisälle ja antaen tilaa kasvien sijoittamiselle pystysuoraan riviin.
plantitse on myös absoluuttisesti asemoitu, mikä on välttämätöntä sen vedettävyyden kannalta, kuten huomaat seuraavassa oppitunnissa.
✅ Kokeile vaihtaa sivusäiliöiden ja kasvien pidikkeen asemointityyppejä. Mitä tapahtuu?
CSS-asettelut
Nyt käytät oppimaasi rakentaaksesi terrariumin kokonaan 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 myös. Huomaa myös purkin elementtien leveys- ja korkeuspisteet sekä kuinka kukin elementti asemoidaan absoluuttisesti keskelle ja kiinnitetään näkymän alareunaan.
Käytämme myös rem-yksikköä border-radiusissa, joka on fonttiin suhteutettu mitta. Lue lisää tästä suhteellisesta mittayksiköstä CSS-määrittelyssä.
✅ Kokeile muuttaa purkin värejä ja läpinäkyvyyttä verrattuna maahan. Mitä tapahtuu? Miksi?
🚀Haaste
Lisää 'kupla'-kiilto purkin vasempaan alareunaan, jotta se näyttää lasimaisemmalta. Tyylittele .jar-glossy-long ja .jar-glossy-short näyttämään heijastavalta kiillolta. Tässä on esimerkkikuva:
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 sovelluksen täydellinen tyylittely kaikille selaimille ja 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. Tutustu näihin työkaluihin 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. Pyrimme tarkkuuteen, mutta huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulee pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskääntämistä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.