Valitsimet ja asemointia CSS:llä

Näissä tehtävissä tutustutaan WWW-sivun ulkoasun asemointiin CSS:n avulla ja harjoitellaan valitsimia. Jos et vielä ehtinyt tehdä loppuun ohjaus 3:n tehtäviä, viimeistele ne ennen näihin siirtymistä. Voit tarvittaessa jatkaa edellisen ohjauksen mallivastauksesta.

• Mallivastaus.zip ja mallivastaus
• Voit harjoitella valitsimia CSS Dinerin avulla.

1. Galleria float-ominaisuudella

Tehdään Nanonanon sivustoon galleriasivu, johon tulee pikkukuvia myyntiin.

1. Lataa galleriakuvat.zip ja pura paketti hakemistoon W:\www\galleria\.
2. Luo uusi HTML-dokumentti ja tallenna se nimellä index.html galleria-hakemistoon.
3. Lisää link-elementillä viite sivuston juurihakemistossa olevaan ohjaus3.css-tiedostoon. Lisää sivulle myös pääotsikko ja lyhyt johdantokappale.

4. Kopioi esimerkiksi linkit-hakemiston tiedostosta koko header-elementti sisältöineen uuden dokumentin body-osaan. Muuta murupolku vastaamaan Galleria-sivua ja korjaa navigointilinkit. Lisää linkki Galleria-sivulle myös muiden hakemistojen navigointipalkkeihin, ja poista Galleria-kohdan ympäriltä pelkkä teksti.

5. Lisää sivulle viisi kuvalohkoa tähän tapaan:

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

   Miksi figure eikä div?

   Kuva ja siihen liittyvä kuvateksti merkitään figure-elementillä ja kuvateksti figcaption-elementillä. Ne kertovat, että teksti kuuluu juuri tähän kuvaan; div ja p eivät kerro mitään. Kuvat merkittiin näin jo ohjaus 2:ssa.

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

1.1 Liu'utus

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

1. Muokkaa ohjaus3.css-tiedostoa. Liu'uta .galleriakuva-lohkot vasempaan laitaan.

2. Selain antaa figure-elementille oletuksena suuret sivumarginaalit. Nollaa ne ja määrää itse haluamasi marginaali.

3. Tutki, mikä on suurimman kuvan leveys ja korkeus. Anna .galleriakuva-lohkolle width ja height, jotka ovat hieman yli suurimman kuvan koon. Huomioi korkeudessa myös kuvatekstin tarvitsema tila. Voit käyttää tässä tapauksessa px-arvoja (miksi?).

   Muista box-sizing

   ohjaus3.css alkaa säännöllä * { box-sizing: border-box; }, joten antamasi width ja height sisältävät myös täytteen ja reunan. Varaa siis hieman enemmän tilaa kuin pelkkä kuva vaatii.

4. Keskitä kuva lohkon sisällä vaakasuunnassa. Koska kuva on tekstitason elementti, se onnistuu text-align-ominaisuudella.

5. Muotoile kuvatekstit. Lisää ohjaus3.css-tiedostoon sääntö, joka osuu vain .galleriakuva-lohkon sisällä olevaan figcaption-elementtiin:

   • keskitä teksti;
   • poista marginaalit ja täytteet;
   • pienennä fonttikokoa hieman em- tai rem-yksikössä.
   Älä piilota tekstiä overflow: hidden -määrityksellä

   Vanhassa ohjeessa kuvatekstille annettiin kiinteä korkeus ja ylivuotava osa piilotettiin. Silloin pidempi kuvateksti katkeaa kesken eikä sitä pääse lukemaan mitenkään — ei myöskään ruudunlukijalla, joka ei kerro tekstin jatkuvan. Anna tekstin mieluummin rivittyä, tai varaa lohkoon riittävästi korkeutta.

6. Rivitä kuvat oikealla olevan navigointilohkon alapuolelle clear-ominaisuudella. Voit lisätä lohkoille myös pienen ylämarginaalin, jotteivät ne mene kiinni navigointiin.

   clear ja float on käsitelty asemointiluennon luvussa 5.

2. Sama galleria flexboxilla

Toteutetaan samanlainen galleria flexboxilla ja verrataan tapoja. Flexbox on käsitelty asemointiluennon luvussa 6.

1. Lisää edellisen gallerian perään h2-otsikko, jonka sisällöksi kirjoitat "Sama galleria flexboxilla".
2. Lisää otsikon perään div-elementti, jolle annat luokan flex.
3. Kopioi uuden lohkon sisään koko edellä tekemäsi galleria eli kaikki viisi figure-elementtiä.
4. Poista uuden gallerian figure-elementeistä class="galleriakuva"-attribuutit.

5. Kokeile, miten sivu toimii. Vanha ja uusi galleria menevät liu'utuksen takia sekaisin. Lisää tyylitiedostoon:

   .clear {
     clear: both;
   }

   ja ota tyyli käyttöön h2-elementissä. Kelluva lohko ei kasvata äitilohkonsa korkeutta, joten ilman clear-määritystä seuraava sisältö valuu sen viereen.

6. Lisää tyylitiedostoon:

   .flex {
     display: flex;
   }

   Kokeile. Kaikki kuvat tulevat yhdelle riville.

7. Käsketään flexboxia rivittämään ja lisätään väli alkioiden väliin:

   .flex {
     display: flex;
     flex-wrap: wrap;
     gap: 1em;
   }

   gap korvaa marginaalit

   Floatilla tehdyssä galleriassa välit piti tehdä marginaaleilla, ja reunimmaisten kohdalla ne menivät helposti pieleen. Flexboxissa gap hoitaa asian yhdellä rivillä eikä lisää tilaa laitoihin.

8. Muuta asiayhteyden mukaan määräytyvillä valitsimilla flexboxin kuviin ja teksteihin samat tyylit kuin floatilla tehtyyn. Älä tee enää muutoksia HTML-tiedostoon, vaan kirjoita valitsimet, joilla pääset käsiksi oikeisiin elementteihin. Vinkki:

   .flex figure { ... }
   .flex figcaption { ... }

9. Kokeile, mitä tapahtuu, kun lisäät .flex-tyyliin:

   flex-direction: column;
   max-height: 30em;

10. Flexboxissa voi myös muuttaa alkioiden järjestystä. Kokeile:

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

    Ketju on hyvä harjoitus vierusvalitsimesta, mutta käytännössä saman saisi yhdellä rivillä: flex-direction: row-reverse.

    order muuttaa vain sen, mitä silmä näkee

    Ruudunlukija lukee sisällön ja sarkain etenee edelleen koodin mukaisessa järjestyksessä. Näkevä ja näkemätön käyttäjä saavat siis eri järjestyksen. Kokeile: paina Tab ja katso, missä järjestyksessä kuvien linkit käydään läpi. Tästä syystä sisältö kirjoitetaan koodiin siinä järjestyksessä kuin se on tarkoitettu luettavaksi, ja order-ominaisuutta käytetään vain pieniin siirtoihin.

3. Valitsinharjoituksia

Näissä tehtävissä harjoitellaan kohdistamaan tyyli oikeisiin elementteihin silloin, kun HTML-tiedostoon ei saa koskea. Se on tavallinen tilanne: sisältö tulee julkaisujärjestelmästä tai joltakulta toiselta, ja ainoa keino vaikuttaa ulkoasuun on CSS.

1. Pura valitsimet.zip W:-asemalle johonkin hakemistoon
2. Avaa zip-paketissa tullut malli.html selaimeen. Et saa tehdä tähän tiedostoon mitään muutoksia.
3. Avaa elementtinäkymä (Ctrl+Shift+C, valikosta Työkalut → Selaintyökalut → Tarkastelu). Dokumentin rakenne ratkaisee, mitä valitsimia on käytettävä, joten tutki sitä ennen kuin kirjoitat mitään.
4. Avaa tyylieditori (Shift+F7). Saat tehdä muutoksia ainoastaan valitsimet.css-tiedostoon.

Toteuta seuraavat muutokset. Valitsimista löytyy esimerkkejä valitsinluennolta.

4. Lisätehtäviä

1. Merkitse osa gallerian kuvista myydyiksi. Lisää myytyihin kuviin figcaption-elementin sisään toinen elementti:

   <figcaption>Viitatorni <span class="myyty">(myyty)</span></figcaption>

   ja muotoile .myyty-luokka erottuvaksi. Huomaa, ettei pelkkä väri riitä erotteluun: värisokea käyttäjä ei näe eroa, joten tieto on oltava myös tekstinä.

2. Lisää galleriaan kuudes kuva. Toimiiko asettelu itsestään oikein molemmissa toteutuksissa?
3. Kokeile, mitä tapahtuu, kun poistat .galleriakuva-lohkolta kiinteän korkeuden. Miksi floatilla tehty galleria menee sekaisin, mutta flexboxilla tehty ei?

5. Testaus

1. Validoi sivut HTML-validaattorilla ja tyylitiedosto CSS-validaattorilla.
2. Liiku sivulla Tab-näppäimellä. Näetkö koko ajan, missä olet?
3. Kavenna selainikkuna noin 360 pikseliin. Kumpi galleria kestää sen paremmin?
4. Suurenna tekstin kokoa 200 prosenttiin. Katoaako kuvatekstejä?
5. Tarkista kontrastit kehittäjätyökalujen värivalitsimella.