Sivujen tyylittely

Learning objectives

Tunnet käsitteet CSS ja tyylitiedosto.
Tiedät miten sivulla oleville elementtijoukoille ja yksittäisille elementeille määritellään tyylejä.
Osaat vaihtaa sivulla olevien elementtien väriä ja fonttia.
Tunnet Flexbox-mallin ja osaat määritellä sivun elementtien asettelun ja elementeille varatun tilan koon.

Cascading Style Sheets (CSS) on verkkosivujen tyylin kuvaamiseen tarkoitettu kieli. CSS:n avulla määritellään miltä verkkosivuilla olevat elementit näyttävät ja miten ne tulee asetella sivulle.

Ohjelmointiympäristössämme CSS-kielinen sisältö asetetaan CSS-välilehdelle. Alla olevassa ohjelmointiympäristössä HTML-dokumentin rungon (body) väriksi (color) on määritelty sininen (blue). Ohjelman suorittaminen näyttää sivun, jossa fontin väri on sininen.

Tyylien määrittely

Tyylien määrittely tapahtuu valitsimen, tyylin nimen, ja tyylin arvon avulla. Valitsimella määritellään elementti tai elementit, joita määriteltävä tyyli koskee. Valitsimen jälkeen annetaan aaltosuluilla rajattuna tyylit. Jokaiselle tyylille määritellään nimi ja arvo siten, että tyylin nimen jälkeen tulee kaksoispiste, jota seuraa tyylin arvo. Tyylit erotellaan toisistaan puolipisteellä.

Alla olevassa esimerkissä määritellään tekstielementille (p) kaksi tyyliä: tekstin värin tulee olla tummansininen (color: darkblue;) ja elementin taustavärin tulee olla vaaleansininen (background-color: lightblue).

p {
  color: darkblue;
  background-color: lightblue;
}

Tyylien määrittely voi olla yleistä siten, että tyylit koskevat kaikkia elementtejä, tai spesifistä siten, että tyylit koskevat tiettyjä elementtejä tai jopa tietyllä tunnuksella määriteltyjä elementtejä. Edellisessä esimerkissä määriteltiin tyyli HTML-sivun tekstielementtiin, mutta tyylin voi asettaa myös vaikkapa HTML-sivun runkoelementille (body). Alla runkoelementin tekstin väriksi asetetaan sininen.

body {
  color: blue;
}

CSS-lyhenteen osa cascading tarkoittaa sitä, että tyylit valuvat HTML-dokumentissa alaspäin. Yllä oleva tyyliesimerkki määrittelee elementin body tekstin väriksi sinisen. Tämän myötä tyyli on myös jokaisessa elementin body alle tulevassa elementissä. Esimerkiksi, mikäli seuraavalle HTML-dokumentille määritellään yllä kuvattu tyyli, on kaikkien siinä olevien tekstien väri sininen, kuten alla oleva esimerkki näyttää.

<body>
  <h1>Tervetuloa!</h1>
  <p>Tutustumme nyt sivujen tyylittelyyn.</p>
  <h2>Aliotsikko</h2>
  <p>Mutta! Emme määritelleet h2-elementille tyyliä!</p>
</body>

Kullekin elementille voidaan määritellä oma tyyli kirjoittamalla tyylimäärittelyn valitsimet elementtikohtaisesti. Alla olevassa esimerkissä määritellään otsake-elementin (h1) tekstin väriksi punainen ja tekstielementin (p) tekstin väriksi sininen.

h1 {
  color: red;
}

p {
  color: blue;
}

Alla kuvatulla HTML-sivulla tyyli näyttää seuraavalta.

<body>
  <h1>Tervetuloa!</h1>
  <p>Tutustumme nyt sivujen tyylittelyyn.</p>
  <h2>Aliotsikko</h2>
  <p>Mutta! Emme määritelleet h2-elementille tyyliä!</p>
</body>

Kuten huomaamme, aliotsikkoa kuvaavalle elementille (h2) ei ole määritelty omaa tyyliä. Tällöin elementin tyyliksi asetetaan selaimen oletustyyli. Mikäli määrittelemme tyylin sivun rungolle (body), rungolle määritelty tyyli valuu myös h2-elementin tyyliksi. Alla olevassa esimerkissä runkoelementille on määritelty väriksi vihreä.

body {
  color: green;
}

h1 {
  color: red;
}

p {
  color: blue;
}

Saman tyylin voi asettaa myös useammalle elementille. Tällöin tyylimäärittelyssä valitsimet erotetaan toisistaan pilkulla. Alla olevassa esimerkissä asetetaan sama tyyli otsake-elementeille h1, h2 ja h3.

body {
  color: green;
}

h1,h2,h3 {
  color: red;
}

p {
  color: blue;
}

Huomaamme edellistä esimerkkiä tarkastelemalla, että runkoelementille määritelty tyyli ei korvaa otsake-elementin (h1) ja tekstielementin (p) tyyliä. Tarkemmat määrittelyt korvaavat yleisemmät määrittelyt. Toisin sanoen, tyylejä valutetaan alaspäin HTML-dokumentissa vain kunnes kohdataan elementti, jossa vastaava tyyli on erikseen määritelty.

Question not found or loading of the question is still in progress.

CSS ja tyylien nimet

CSS on päivittyvä standardi, jota kehittää useampi työryhmä. Työn etenemistä voi tarkastella osoitteessa https://www.w3.org/Style/CSS/ olevassa dokumentaatiossa. Tässä materiaalissa käsitellään vain hyvin rajattu määrä CSS-tyylimääreitä, laajempaan dokumentaatioon pääsee edellistä linkkiä seuraamalla.

Yksittäisten elementtien tyyli

Yksittäisten elementtien valinta tapahtuu elementin yksilöivän id-attribuutin arvon avulla, johon voidaan viitata risuaidan avulla muodossa #arvo, missä arvo on id-attribuutille asetettu arvo. Alla oleva HTML-dokumentti sisältää kolme tekstielementtiä. Yhdelle näistä on määritelty id-attribuutti, jonka arvo on korostus.

<body>
  <p>Elementtien valinta tapahtuu pääosin kolmella tavalla. ...</p>
  <p id='korostus'>Mikäli määrittelemme elementille id-attribuutin...</p>
  <p>Voimme määritellä elementille myös class-attribuutin, joka...</p>
</body>

Elementti, jonka id-attribuutin arvo on korostus, valitaan muodossa #korostus kirjoitettavalla valitsimella. Alla olevassa esimerkissä kyseisen elementin tekstin väriksi asetetaan sininen.

#korostus {
  color: blue;
}

Tyylien määrittely elementtijoukoille

Elementeille voidaan määritellä luokka attribuutin class avulla. Elementin class-attribuutin arvon perusteella tapahtuva valinta tapahtuu pisteen avulla muodossa .arvo, missä arvo on class-attribuutille asetettu arvo.

Siinä missä id-attribuutin arvon tulee olla uniikki (eli kahdella elementillä ei tule olla samaa id-attribuutin arvoa), voi sama class-attribuutin arvo esiintyä useammassa elementissä. Alla olevassa HTML-dokumentissa elementeille h1 ja h2 on määritelty class-attribuutin arvoksi otsake.

<body>
  <h1 class='otsake'>Tervetuloa!</h1>
  <p>Tutustumme nyt sivujen tyylittelyyn.</p>
  <h2 class='otsake'>Aliotsikko</h2>
  <p>Sekä h1 että h2-elementillä on class-attribuutin arvona otsake.</p>
</body>

Elementit, joiden class-attribuutin arvo on otsake, valitaan muodossa .otsake kirjoitettavalla valitsimella. Alla olevassa esimerkissä jokaisen class-attribuutin arvolla otsake tunnistettavan elementin tekstin väriksi asetetaan vihreä.

.otsake {
  color: green;
}

Värit ja värien määrittely

Sivuilla käytettävät värit voi määritellä usealla eri tavalla, joista ehkäpä eniten käytettyjä ovat värien määrittely nimien perusteella (esim. red, green, blue), RGB-arvojen perusteella (esim. rgb(255,0,0), rgb(0,255,0), rgb(0,0,255)), ja heksadesimaaliarvojen perusteella (esim. #FF0000, #00FF00, #0000FF). Siinä missä nimet vastaavat tiettyjä värejä, RGB-arvoilla väri määritellään punaisen, sinisen ja vihreän värin määrän avulla skaalaa 0-255 käyttäen.

Heksadesimaaliarvoissa skaala on sama mutta määrittelytapa eri. Heksadesimaaliarvojen ensimmäiset kaksi merkkiä vastaavat punaisen määrää, seuraavat kaksi merkkiä vihreän määrää, ja viimeiset kaksi merkkiä sinisen määrää. Arvot annetaan heksadesimaaleina (eli 16-kantaisena lukuna, jonka arvot ovat 0-F) siten, että kahdella merkillä muodostetaan arvo välillä 0-255.

Alla on kuvattuna kolme pääväriä (punainen, vihreä ja sininen) sekä niiden nimet ja rgb- ja heksadesimaaliarvot.

Väri	nimi	rgb-arvo	heksadesimaaliarvo
Punainen	`red`	`rgb(255, 0, 0)`	`#FF0000`
Vihreä	`green`	`rgb(0, 255, 0)`	`#00FF00`
Sininen	`blue`	`rgb(0, 0, 255)`	`#0000FF`

Värejä käytetään sekä fonttien värinä että elementtien taustavärinä. Fontin värin määrittely tapahtuu tyylin color avulla ja taustavärin määrittely tapahtuu tyylin background-color avulla. Värien nimet, RGB-arvot ja heksadesimaalit kirjoitetaan tyylimäärittelyyn ilman hipsuja.

Alla olevassa esimerkissä sivun fontin väriksi on valittu indigo (indigo) ja sivun taustaväriksi pastellinsininen (#dff4f9).

body {
  color: indigo;
  background-color: #dff4f9;
}

Question not found or loading of the question is still in progress.

Miten valitsen värit sivuilleni?

Sivun teemaan sopivien värien ja tyylien valinta on taito siinä missä ohjelmointikin. Värien ja tyylien valinnassa kehittyy harjoittelemalla -- hyvä lähtökohta harjoitteluun on tekstin "choosing good color schemes for websites" kirjoittaminen hakukoneeseen ja tulosten läpikäynti. Useat tyylikirjastot, joita sivuamme lyhyesti lopuksi, tarjoavat myös valmiita värimaailmoja sivujen käyttöön.

Fontit ja fonttien määrittely

Fontit eli kirjasintyypit määrittelevät sivulla näytettävän tekstin muodon. Fontit voidaan jakaa karkeasti ajatellen kolmeen kategoriaan: pääteviivallisiin fontteihin (serif), pääteviivattomiin fontteihin (sans-serif) ja samanleveyksisiin fontteihin (monospace). Esimerkiksi Times New Roman on pääteviivallinen fontti, Arial on pääteviivaton fontti, ja Courier New on samanleveyksinen fontti.

Fontin valinta

Elementtiin liittyvän fontin valinta tapahtuu font-family-tyylin avulla, jolla määritellään elementin fonttiperhe. Fonttiperhe voi sisältää yhden tai useamman fontin, jotka erotellaan toisistaan pilkulla. Tyypillisesti fontteja määritellään useita ja näytetty fontti määräytyy lopulta selaimen käytettävissä olevien fonttien perusteella.

Alla olevassa esimerkissä määritellään sivun käyttöön Times New Roman -fontti. Mikäli Times New Roman fonttia ei löydy, sivulla yritetään käyttää jotain pääteviivallista fonttia (serif). Kuten alla olevasta esimerkistä huomaa, fontit, joiden nimessä on välilyönti, tulee kirjoittaa hipsujen sisään.

body {
  font-family: "Times New Roman", serif;
}

Sivuilla käytetyissä fonteissa näkee usein vaihtelua siten, että esimerkiksi otsake-elementit ovat pääteviivattomia ja muu teksti pääteviivallista. Alla olevassa esimerkissä sivun tekstinä käytetään Times New Roman -fonttia tai jotain muuta pääteviivallista fonttia, ja otsaketekstinä käytetään Arial-fonttia tai jotain muuta pääteviivatonta fonttia.

body {
  font-family: "Times New Roman", serif;
}

.otsake {
  font-family: Arial, sans-serif;
}

Fonttien hakeminen

Vaikka edellä todettiin, että sivulla yritetään käyttää jotain fonttia mikäli haluttua fonttia ei löydy, voi fontin olemassaolon varmistaa hakemalla sen osana sivun latautumista. Verkossa on useita palveluita fonttien etsimiseen, joista eräs on https://fonts.google.com/. Palvelu mahdollistaa fonttien etsimisen ja valinnan: klikkaamalla palvelussa fonttia ja valitsemalla "Select this style" fontti lisätään käytössä oleviin fontteihin, jotka voidaan upottaa osaksi sivua.

Esimerkiksi fontin nimeltä "Permanent Marker" saa osaksi sivua lisäämällä sen HTML-dokumentin rungon loppuun (tai head-elementin sisälle), sekä lisäämällä siihen liittyvän tyylin osaksi tyylittelyä. Alla olevassa esimerkissä sivun otsakkeet käyttävät fonttia "Permanent Marker", kun taas muu teksti käyttää fonttia "Times New Roman".

<h1 class="otsake">Tervetuloa!</h1>
<p>Tutustumme nyt fonttien määrittelyyn.</p>
<h2 class="otsake">Aliotsikko</h2>
<p>Otsikot tällä sivulla käyttävät Permanent Marker -fonttia, muu
teksti käyttää Times New Roman -fonttia.</p>
<link
  href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap"
  rel="stylesheet">

body { font-family: "Times New Roman", serif; }
.otsake { font-family: "Permanent Marker", sans-serif; }

Fontin koon määrittely

Fontin koon määrittely tapahtuu font-size-tyylin avulla. Fontin koon voi asettaa absoluuttiseksi pikseleitä käyttäen tai suhteelliseksi (esimerkiksi) rem-yksiköitä käyttäen. Siinä missä absoluuttinen fonttikoko määrätään pikselimäärän avulla, suhteellinen fonttikoko rem riippuu sivun juureen määritellystä fonttikoosta tai, mikäli fonttikokoa ei ole määritelty, selaimen oletusasetuksista. Selaimissa fontin koko on oletuksena tyypillisesti 16 pikseliä, jota yksi rem-yksikkö vastaa.

Alla olevassa esimerkissä määritellään kaksi fonttikokoa. Ensimmäinen (luokka normaali) määrittelee fonttikoon, joka on yksi rem-yksikkö, joka vastaa selaimen oletusfonttia. Toinen (luokka isompi) määrittelee fonttikoon, joka on 1.25 kertaa normaalin fontin koko.

.normaali { font-size: 1rem; }
.isompi { font-size: 1.25rem; }

Fontin koon määrittely sivun juureen tapahtuu määrittelemällä html-elementille fonttikoko. Alla olevassa esimerkissä html-elementin fonttikooksi asetetaan 20 pikseliä, joka on hieman isompi kuin selainten käyttämä oletusfonttikoko. Luokkia normaali ja isompi käyttävät tekstit, aivan kuten otsikkoteksti, skaalautuvat juureen määritellyn fonttikoon perusteella. Alla olevassa esimerkissä luokkaa normaali käyttävän tekstin fonttikoko on 20 pikseliä, ja luokkaa isompi käyttävän tekstin fonttikoko on 25 pikseliä.

html { font-size: 20px; }
.normaali { font-size: 1rem; }
.isompi { font-size: 1.25rem; }

Huomaamme myös että otsikkotekstin koko muuttuu kun fontin koko asetetaan html-elementissä. Mikäli fontin koko kopioitaisiin valuisi kaikkiin sivun elementteihin, tulisi myös otsikkotekstin koon olla 20 pikseliä. Näin ei kuitenkaan käy -- elementtien fonttikoko on oletuksena relatiivinen ja se lasketaan html-elementissä määritellyn fonttikoon perusteella.

Question not found or loading of the question is still in progress.

Elementit ja niiden asettelu

HTML-dokumetteihin voi lisätä elementtejä, jotka eivät näy käyttäjälle, mutta jotka kuvaavat sivun rakennetta. Oleellisimmat näistä ovat header, section, ja footer. Elementtiä header käytetään kun sivulle halutaan määritellä otsakealue, section-elementtiä kun sivulle halutaan luoda looginen kokonaisuus, ja footer-elementtiä käytetään, kun sivulle halutaan luoda sivun lopussa näytettävä alue.

Alla olevassa esimerkissä on kuvattuna sivu, jossa käytetään kaikkia edellä kuvattuja elementtejä.

<!DOCTYPE html>
<html>
  <head>
    <title>Oppimispäiväkirja!</title>
  </head>
  <body>
    <header>
      <h1>Oppimispäiväkirja!</h1>
    </header>
    <section>
      <h2>Johdatus tyylien määrittelyyn</h2>
      <p>Harjoittelin tänään tyylien määrittelyä..</p>
    </section>
    <section>
      <h2>Tietokantojen käsittely</h2>
      <p>Aiemmalla kurssilla tutuksi tulleet tietokannat toimivat
      myös selaimessa..</p>
    </section>
    <footer>
      <p>Oppimispäiväkirjani: 2020-</p>
    </footer>
  </body>
</html>

Sivun rakenteen kuvaamiseen käytetyt elementit eivät näy käyttäjälle. Alla oleva ikkuna sisältää yllä kuvatun HTML-dokumentin.

Elementtejä header, section, ja footer voi käyttää sekä sivun rakenteen selkeyttämiseksi että osana sivun tyylittelyä. Esimerkiksi otsakealueelle voi määritellä tietyn tyylin, sivulla oleville loogisille kokonaisuuksille tietyn tyylin, ja sivun loppuosalle tietyn tyylin. Alla olevassa esimerkissä otsakealueelle ja sivun loppuosalle on määritelty taustaväri.

header {
  background-color: lightblue;
}

footer {
  background-color: black;
  color: white;
}

Mikäli sivulla on alue, jolla ei ole selkeää loogista kokonaisuutta tai jolla ei ole selkeää roolia, käytetään div-elementtiä.

Elementtien asettelu

CSS tarjoaa useita lähestymistapoja elementtien asetteluun, joista tässä tutustutaan Flexbox-malliin. Aloitetaan tilanteesta, missä käytössämme on div-elementti, jonka sisälle asetellaan elementtejä. Käytössämme on neljä elementtiä, joista kukin sisältää numeron.

<!DOCTYPE html>
<html>
  <head>
    <title>Elementtien asettelu</title>
  </head>
  <body>
    <div id="sisalto">
      <div>
        1
      </div>
      <div>
        2
      </div>
      <div>
        3
      </div>
      <div>
        4
      </div>
    </div>
  </body>
</html>

Sivu näyttää seuraavalta.

Oletuksena div-elementti (aivan kuten header, section ja footer -elementit) näytetään siten, että elementti vie koko rivin. Tämä johtuu siitä, että kyseisillä elementeillä on oletuksena tyyli display: block;.

CSS Flexible Box Layout (Flexbox) -mallin käyttöönotto tapahtuu määrittelemällä elementit sisältävälle elementille tyyli display: flex;. Asetetaan tyyli sisalto-id:llä tunnistettavaan elementtiin.

#sisalto {
  display: flex;
}

Kuten huomaat, sen sijaan että elementit aseteltaisiin kukin omalle rivilleen, ne asetellaan vierekkäin. Saman olisi oikeastaan voinut tehdä määrittelemällä elementeille tyylin display: inline;, joka mahdollistaa rivin sisälle tapahtuvan asettelun. Tärkeämpää tyylissä display: flex; on kuitenkin se, että se mahdollistaa muiden Flexbox-malliin liittyvien tyylimäärittelyiden hyödyntämisen.

Elementtien suunta ja välit

Jatketaan Flexbox-mallin parissa. Tarkastellaan seuraavaksi elementtien suunnan ja välien asettamista. Elementtien asettelusuunta tapahtuu tyylin flex-direction avulla. Määrittelemällä tyylin flex-direction arvoksi column, elementit asetellaan riveittäin. Toisaalta tyylin arvo row asettaa elementit samalle riville. Kummallakin arvolla on myös versio, joka asettaa elementit käänteiseen järjestykseen -- nämä ovat column-reverse ja row-reverse. Alla olevassa esimerkissä käytetään tyyliä row-reverse.

#sisalto {
  display: flex;
  flex-direction: row-reverse;
}

Elementtien asettelu ja osittain välien määrittely tapahtuu justify-content-tyylin avulla. Tyylillä määritellään mihin elementit asetetaan ja miten ne tasataan. Arvo flex-start asettaa elementit ne sisältävän elementin alkuun, ja flex-end elementin loppuun. Arvo center asettaa elementit ne sisältävän elementin keskelle, ja space-around määrittelee jokaisen elementin etäisyyden toisista elementeistä samaksi. Näiden lisäksi käytössä on space-between, joka toimii hieman kuin space-around, mutta joka ei aseta elementeille etäisyyttä reunasta.

Alla on näistä kaksi esimerkkiä. Ensimmäisessä käytetään tyyliä justify-content: flex-end;, ja toisessa tyyliä justify-content: space-around;.

#sisalto {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

#sisalto {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

Question not found or loading of the question is still in progress.

Elementeille varatun tilan määrittely

Elementeille varattu tila rajautuu oletuksena elementtien sisältöön. Tyylillisesti haluamme joskus määritellä elementeille tilaa niiden sisä- ja ulkopuolelle. Tällaisen tilan määrittely tapahtuu tyyleillä margin ja padding, joille annetaan arvoksi elementeille annettavan tilan koko.

Tyyli margin määrittelee elementin ulkopuolelle jäävän tilan ja tyyli padding määrittelee elementin sisäpuolelle jäävän tilan. Tämä on kuvattu alla olevassa esimerkissä -- vihreällä väritetty alue kuvastaa elementtiin liittyvän margin-tyylin määräämää aluetta ja vaalean sininen väri kuvastaa elementtiin liittyvän padding-tyylin määräämää aluetta. Esimerkissä tyylien arvoksi on asetettu 20px eli kaksikymmentä pikseliä.

Tarkastellaan margin ja padding -tyylien käyttöä Flexbox-mallia käyttävässä esimerkissä. Esimerkissä on sisällön asetteluun käytetty elementti, joka sisältää neljä elementtiä. Kukin näistä sisältää numeron. Tyyli on määritelty siten, että elementit on asetettu samalle riville ja niiden välillä on sama tyhjä tila.

<div id="sisalto">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
  <div>
    4
  </div>
</div>

#sisalto {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

Lisätään numeroja sisältäville elementeille kaksi tyyliluokkaa: punainen ja sininen. Punaisella tyylillä on taustavärinä punainen ja padding-tyylin arvona 0.5rem. Sinisellä tyylillä on taustavärinä vaaleansininen ja padding-tyylin arvona 1rem. Määritellään sivun elementit siten, että numerot 2 ja 3 sisältävät elementit ovat punaisia, ja numerot 1 ja 4 sisältävät elementit ovat vaaleansinisiä.

#sisalto {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.punainen {
  padding: 0.5rem;
  background-color: red;
}

.sininen {
  padding: 1rem;
  background-color: lightblue;
}

<div id="sisalto">
  <div class="sininen">
    1
  </div>
  <div class="punainen">
    2
  </div>
  <div class="punainen">
    3
  </div>
  <div class="sininen">
    4
  </div>
</div>

Kun tarkastelemme yllä olevaa esimerkkiä, huomaamme että kaikkien elementtien korkeus on sama. Muokataan elementtien asettelua korkeussuunnassa määrittelemällä elementit sisältävään elementtiin Flexbox-malliin liittyvä tyyli align-items. Tyylin align-items arvo stretch asettaa kaikille elementeille saman korkeuden, joka määräytyy korkeimman elementin perusteella ja vastaa yllä olevaa tilannetta.

Muut mahdolliset arvot ovat flex-start, flex-end, center ja baseline. Tyyli flex-start asettaa elementit ylälaitaan, flex-end alalaitaan, center keskelle -- baseline toimii käytännössä myös kuin center. Asetetaan alla olevassa esimerkissä tyylin align-items arvoksi flex-start. Nyt elementit ovat aseteltu korkeussuunnassa ylälaitaan. Huomaamme myös, että punaisten elementtien korkeus määräytyy nyt elementin koon perusteella.

#sisalto {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
}

.punainen {
  padding: 0.5rem;
  background-color: red;
}

.sininen {
  padding: 1rem;
  background-color: lightblue;
}

Elementtien asettelu kun elementtien määrä kasvaa

Tarkastellaan seuraavaksi tilannetta, missä elementtien määrä kasvaa. Alla olevassa esimerkissä justify-content-tyylin arvoksi on määritelty space-between, jolloin elementtien välillä oleva tila on sama ja elementit ovat kiinni reunoissa. Tämän lisäksi reunoille on määritelty tasaisesti tilaa padding-tyylillä. HTML-dokumentti on sama kuin edellinen, mutta elementtien määrä on suurempi.

#sisalto {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem;
}

.punainen {
  padding: 0.5rem;
  background-color: red;
}

.sininen {
  padding: 1rem;
  background-color: lightblue;
}

Kuten huomaamme, kaikki elementit eivät mahdu ruudulle ja sivun alalaitaan ilmestyy palkki, jota liikuttamalla käyttäjä näkee elementit. Valinta, näytetäänkö käyttäjälle palkki, vai siirretäänkö "ylitsevuotavat" elementit automaattisesti seuraavalle riville määräytyy Flexbox-malliin kuuluvan tyylin flex-wrap perusteella. Oletuksena tyylin arvo on flex-wrap: nowrap;, mutta vaihtamalla tyylin muotoon flex-wrap: wrap;, elementit siirretään seuraavalle riville tarvittaessa.

Muokataan tyyliä seuraavanlaiseksi.

#sisalto {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem;
  flex-wrap: wrap;
}

.punainen {
  padding: 0.5rem;
  background-color: red;
}

.sininen {
  padding: 1rem;
  background-color: lightblue;
}

Nyt elementit näytetään sivulla useammalla rivillä.

Muita malleja elementtien asetteluun

Edellä käsiteltiin Flexbox-mallia elementtien asetteluun. Flexbox-mallin lisäksi elementtien asettelussa voi käyttää mm. Grid-mallia, joka tarjoaa mahdollisuuden sivun jakamisen (hieman ruudukkoa muistuttaviin) osa-alueisiin. Grid-mallista voi lukea lisää esimerkiksi Mozillan tarjoamasta oppaasta.

Valmiit tyylikirjastot

Verkkosivuja suunniteltaessa käytetään usein valmiita tyylikirjastoja kuten Bootstrap, Foundation ja Bulma. Näistä ehkäpä suosituin on Bootstrap.

Kukin edellä mainittu tyylikirjasto tarjoaa esimerkkisivuja, joihin on määriteltynä tyylit ja kirjaston tarvitsemat tiedostot. Esimerkiksi Bootstrap-kirjaston osoitteessa https://getbootstrap.com/docs/4.5/examples/ olevalla sivulla on joukko valmiita sivuja, joiden pohjalta voidaan lähteä kehittämään omaa sivustoa ja sen tyyliä.

Hi! Please help us improve the course!

Please consider the following statements and questions regarding this part of the course. We use your answers for improving the course.

I can see how the assignments and materials fit in with what I am supposed to learn.

I find most of what I learned so far interesting.

I am certain that I can learn the taught skills and knowledge.

I find that I would benefit from having explicit deadlines.

I feel overwhelmed by the amount of work.

I try out the examples outlined in the materials.

I feel that the assignments are too difficult.

I feel that I've been systematic and organized in my studying.

How many hours (estimated with a precision of half an hour) did you spend reading the material and completing the assignments for this part? (use a dot as the decimal separator, e.g 8.5)

Time spent studying

How would you improve the material or assignments?