Valitsimet ja asemointia CSS:llä

• Galleria float-ominaisuudella toteutettuna
  • Liu'utus
• Galleria flex-ominaisuudella toteutettuna
• Lisätehtäviä valitsimista

Näissä tehtävissä tutustutaan WWW-sivun ulkoasun asemointiin CSS:n avulla ja monimutkaisempiin valitsimiin.

Jos et vielä ehtinyt tehdä loppuun ohjaus 3:n tehtäviä, niin viimeistele ne ennen näihin tehtäviin siirtymistä.

Mallivastaus

Voit harjoitella valitsimia hauskasti CSS Dinerin avulla.

Galleria float-ominaisuudella toteutettuna

Tehdään Nanonanon sivustoon galleria-sivu, johon tulee modernia tietokonetaidetta esittäviä pikkukuvia myyntiin:

1. Lataa galleriakuvat.zip ja pura paketti W:\www\galleria\-hakemistoon.
2. Luo uusi HTML-dokumentti ja tallenna se index.html-nimellä galleria-hakemistoon.
3. Lisää link-elementillä viite sivuston juurihakemistossa olevaan ohjaus3.css-tiedostoon. Lisää myös galleriasivulle pääotsikko ja jokin lyhyt johdantotekstikappale.
4. Kopioi esim. linkit-hakemistossa olevasta index.html-tiedostosta lohkot <nav class="navbartop">...</nav> ja <nav class="navbar">...</nav> juuri luomasi dokumentin body-osaan. Muuta murupolku oikeaksi Galleria-sivulle sekä täydennä navigointilohkon sisältämät navigointilinkit kuntoon. Lisää linkki Galleria-sivulle myös muiden hakemistojen index.html-tiedostojen navigointipalkkeihin.
5. Lisää Galleria-sivun body-osaan seuraavalla tavalla viisi lohkoa, joissa on galleriahakemiston kuvat ja näiden kuvatekstit:

   <div class="galleriakuva">
   <img alt="Viitatorni ja järvimaisema" src="viitatorni.jpg" />
   <p>Viitatorni</p>
   </div>

6. Tutki miltä sivu näyttää nyt selaimessa.

Liu'utus

Muotoillaan gallerian kuvalohkot tasavälisiksi ja selaimen koon mukaan vierekkäin rivittyviksi.

1. Muokkaa ohjaus3.css-tiedostoa. Liu'uta .galleriakuva-lohkot vasempaan laitaan.
2. Käy Nanonanon kotisivujen galleria-sivulla. Tutki mikä on suurimman kuvan leveys ja korkeus. Lisää .galleriakuva-lohkolle ominaisuudet width ja height, joihin sijoitat arvot, jotka ovat hieman yli suurimman kuvan koon. Voit käyttää tässä tapauksessa px-arvoja (miksi?). Huomioi lohkon korkeudessa myös kuvatekstin tarvitsema tila.
3. Keskitä kuva lohkon sisällä vaakasuunnassa. Koska kuva on tekstitason elementti, niin sen voi keskittää text-align-ominaisuudella.
4. Testaa miltä galleria näyttää nyt. Muokataan vielä kuvatekstejä. Lisää ohjaus3.css-tiedostoon lohko, joka vaikuttaa vain galleriakuva-lohkon sisällä olevaan tekstilohkoon. Tee lohkolle seuraavat määritykset:
   • Määrää tekstilohkolle korkeus. Korkeus kannattaa määrittää suhteessa fontin kokoon, sillä se saattaa vaihdella.
   • Keskitä teksti.
   • Määrää tekstin ylivuotava osuus piiloon.
   • Poista marginaalit (margin) ja täytteet (padding).
   • Pienennä fonttikokoa hieman.
5. Rivitetään kuvat vielä oikealla olevan navigointilohkon alapuolelle. Tämä onnistuu clear-ominaisuudella. Voit laittaa lohkoille myös pienen ylämarginaalin, jotteivät ne mene ihan kiinni navigointilohkoon.

Galleria flex-ominaisuudella toteutettuna

Toteutetaan samanlainen galleria mutta käytetään nyt flex-ominaisuutta.

• Lisää edellisen gallerin perään h2-elementti ja kirjoita sen sisällöksi "Galleria Flexboxilla"
• Lisää h2-otsikon perään uusi div-elementti. Lisää tälle div-elementille ominaisuudeksi class="flex"
• Kopioi uuden divin sisään koko edellä tekemäsi galleria eli kaikki galleriakuva-tyyliä käyttävät divit
• Poista uuden gallerian div-elementeistä kaikki class="galleriakuva"-attribuutit
• Kokeile miten sivu toimii. Vanha ja uusi galleria menevät floatin takia hieman sekaisin. Lisää css-tiedostoon uusi tyyli:

  .clear {
     clear: both;
  }

  Ota tämä tyyli käyttöön h2-elementissä. Kokeile sivua uudelleen. clear-ominaisuudella voidaan estää elementin valuminen floatatun elementin vierelle.

• Lisää css-tiedostoon uusi tyyli:

  .flex {
       display: flex;
  }

• Kokeile miten sivu toimii nyt. Kaikkien kuvien pitäisi tulla vierekkäin yhdelle riville. Korjataan tyyliä ja käsketään flexboxia rivittämään. Lisää .flex-tyyliin rivi:

  flex-wrap: wrap;

• Kokeile nyt sivua. Pitäisi toimia melkein kuin floatilla tehdyn. Ainoastaan kuvien väliset marginaalit ja tekstit ovat vielä erilaiset.
• Muuta asiayhteyden mukaan määrittyvillä tyyleillä samat tyylit flexboxin galleriakuviin ja teksteihin kuin floatilla tehtyyn. Älä tee enää muutoksia html-tiedostoon vaan yritä kirjoittaa sellaiset valitsimet joilla pääset määrittelemään oikeat tyylit. Vinkki:

  .flex div { ... }

• Tutustu muihin flexboxin ominaisuuksiin. Kokeile esim. miten galleria muuttuu kun lisäät flex-tyyliin seuraavat rivit:

  flex-direction: column;
  max-height: 500px;

  Flexboxissa voi myös muuttaa sen sisältämien elementtien eli tässä tapauksessa divien järjestystä. Kokeile miten vaikuttaa seuraava lisäys:

  .flex div {
      order: 5;
  }
  .flex div + div {
      order: 4;
  }
  .flex div + div  + div{
      order: 3;
  }
  .flex div + div  + div + div {
      order: 2;
  }
  .flex div + div  + div + div + div {
      order: 1;
  }

Lisätehtäviä valitsimista

Jos haluat opetella monimutkaisempia CSS-valitsimien käyttämistä niin tee vielä seuraavat harjoitukset.

1. Kopioi itsellesi W:-asemalle mallitiedosto johonkin hakemistoon (klikkaa oikealla ja Save Link As...). Et saa tässä tehtävässä tehdä mitään muutoksia edellä tallentamaasi malli.html-tiedostoon.
2. Aloita uusi tyhjä tekstitiedosto ja tallenna se valitsimet.css-nimellä samaan hakemistoon malli.html-tiedoston kanssa W:-asemalle.
3. Avaa malli.html Firefox-selaimeen.
4. Avaa dokumentin puunäkymä (Tools | Web developer | Inspector). Dokumentin rakenne ratkaisee, mitä valitsimia on käytettävä.
5. Avaa Web Developer -työkalupalkista Style Editor (SHIFT+F7 tai Tools|Web developer|Style Editor). Saat tässä tehtävässä tehdä muutoksia ainoastaan näihin CSS-tyyleihin ja tallentaa ne valitsimet.css-tiedostoon.

Toteuta seuraavat ulkoasumuutokset CSS-valitsimien ja -ominaisuuksien avulla. Valitsimista löytyy esimerkkejä CSS-valitsimet-luennolta.

• Muuta jokaisen tekstikappaleen ensimmäinen kirjain kaksi kertaa oletuskokoaan suuremmaksi.
  • HUOM! Web Developer ei osaa näyttää heti oikein tässä kohdassa tarvittavaa valitsinta, joten kirjoitettuasi mielestäsi oikean valitsimen, tallenna tyylitiedosto ja lataa sivu uudelleen huomataksesi toimiiko valitsin oikein.
• Muuta "Aliquam venenatis ipsum" -alkuisen kappaleen taustaväriksi hopea. Vinkki: tutki dokumentin rakennetta body-elementin sisältä Inspectorin avulla.
• Muuta tekstikappaleiden sisällä olevien strong-elementtien väri punaiseksi ja kaikkialla muualla olevien strong-elementtien väriksi vihreä.
• Muuta navigointidivin sisällä oleva sed neque -teksti keltaiseksi.
• Muuta taulukon joka toisen sarakkeen taustaväriksi #000000 (musta) ja joka toisen taustaväriksi #FFFFFF (valkoinen). Muuta vastaavalla tavalla joka toisen sarakkeen tekstin väriksi #FFFFFF ja joka toisen #000000. Vinkki: tutki mitä elementtejä taulukkorivien sisältä löytyy.
  • Millä tavalla tämä olisi ollut helpompi tehdä, jos olisit saanut tehdä muutoksia myös HTML-tiedostoon?
• Muuta taulukon otsikkorivin tekstin väri mustaksi, ensimmäisen sisältörivin tekstin väri keltaiseksi ja loppujen rivien tekstin väri valkoiseksi.
• Aseta dokumentin ensimmäisen tekstikappaleen (listaa edeltävä tekstikappale) ympärille musta raja.
• Muuta kaikkien niiden linkkien väri vihreäksi, joissa on title-attribuutin arvona sana orci.