CSS-perusteet

ITKP1011 Web-julkaiseminen · pääteohjaus 3 · korjattu laitos

Näissä tehtävissä opetellaan perusteet WWW-sivun ulkoasun tekemisestä CSS-kielen avulla. Jatketaan edelliskerran tehtävistä ja tehdään Nanonanon kotisivuille siisti ulkoasu sekä navigointi, joka luvattiin toteuttaa tässä ohjauksessa.

1. Alkuvalmistelut

Jos edelliset tehtävät jäivät kesken, tee ne ensin valmiiksi. Voit myös jatkaa näitä tehtäviä edellisen tehtävän mallivastauksesta.

Tarvitset editorin (suositus Visual Studio Code) ja selaimen, jossa on kehittäjätyökalut. Ohjeissa käytetään Firefoxia, mutta samat toiminnot löytyvät myös Chromesta ja Edgestä hieman eri nimillä.

2. Navigointipalkkien rakenne

Tarkoituksena on luoda jokaiselle sivulle navigointi, joka koostuu kahdesta osasta.

• Murupolku sivun yläreunassa kertoo, missä kohtaa sivuston hierarkiaa ollaan.
• Päänavigointi sivun laidassa listaa sivuston pääkohdat.

Kummassakin jokaisesta kohdasta tehdään linkki kyseiselle sivulle paitsi siitä kohdasta, joka viittaa sivulle jota parhaillaan selataan. Näin käyttäjä näkee, missä hän on, eikä turhaan klikkaa linkkiä, joka ei vie mihinkään.

Tässä luvussa keskitytään pelkkään rakenteeseen. Ulkoasu tehdään vasta luvussa 3.

2.1 Murupolku

1. Käynnistä editori ja avaa W:-asemalta Nanonano-sivuston etusivu.

2. Lisää body-elementin alkuun header-elementti. Molemmat navigoinnit tulevat sen sisään, jolloin sivun yläosa muodostaa yhden kokonaisuuden:

   <body>
     <header>
       ... navigoinnit tähän ...
     </header>
   
     <main>
       ... sivun sisältö ...
     </main>

3. Lisää header-elementin sisään nav-elementti, joka on tarkoitettu juuri navigointia varten. Anna sille luokka navbartop ja aria-label-attribuutti:

   <nav class="navbartop" aria-label="Murupolku">

   Miksi aria-label?

   Sivulla on kohta kaksi nav-elementtiä. Ruudunlukija ilmoittaa molemmat pelkkänä "navigaatio", eikä käyttäjä tiedä kummasta on kyse. aria-label antaa kummallekin nimen.

4. Tallenna pieni kuva Nanonanosta W:-asemalle samaan hakemistoon etusivun kanssa nimellä nanonano.png.

5. Lisää nav-elementin sisään järjestetty lista (ol) ja sen ensimmäiseen alkioon tallentamasi kuva. Murupolku on hierarkia, jossa järjestyksellä on merkitystä, joten ol on oikeampi kuin ul.

2.2 Päänavigointi

1. Lisää ensimmäisen nav-elementin jälkeen toinen:

   <nav class="navbar" aria-label="Päänavigointi">

2. Lisää siihen järjestämätön lista (ul) ja alkioiksi kaikki alasivut: Artikkelit, Galleria, Harrastukset, Linkit, Opiskelu, Työt ja Vieraskirja.
3. Tee kohdista Artikkelit, Linkit ja Opiskelu linkit kyseisiin alihakemistoihin. Muut kohdat jäävät toistaiseksi pelkiksi teksteiksi, koska niitä sivuja ei vielä ole.
4. Katso, ettei viitteisiin jää index.html-tiedostoa vaan viittaus on pelkkään hakemistoon. Kerrataan HTML5-luennon luvusta 14.2, miksi.

2.3 Navigointi muille sivuille

Usealla sivulla toistuvan navigoinnin automaattiseen lisäämiseen on tekniikoita, joita käsitellään Apache-luennolla. Toistaiseksi kopioimme palkit leikepöydän avulla.

1. Kopioi molemmat nav-elementit sisältöineen leikepöydälle.
2. Avaa alihakemistojen index.html-tiedostot ja liitä lohkot kunkin body-elementin alkuun.

3. Muokkaa kunkin tiedoston murupolkua niin, että siinä näkyy polku etusivulta kyseiselle sivulle. Esimerkiksi kokkaus-hakemiston dokumenttiin tulee:

   <nav class="navbartop" aria-label="Murupolku">
     <ol>
       <li><a href="../../"><img src="../../nanonano.png" alt="Etusivulle" /></a></li>
       <li><a href="../">Artikkelit</a></li>
       <li>Kuinka valmistaa maistuvaa opiskelijaruokaa halvalla?</li>
     </ol>
   </nav>

   Kuvalinkin alt-teksti kertoo kohteen

   Kun kuva toimii linkkinä, alt-teksti kertoo minne linkki vie, ei sitä mitä kuvassa näkyy. Siksi yllä lukee alt="Etusivulle" eikä alt="Nanonano". Katso HTML5-luennon luku 12.1.

4. Tee listakohdista linkit suhteellisilla viittauksilla. Viimeisestä kohdasta ei tehdä linkkiä.
5. Luo kokkaus-kansioon index.html-dokumentti ja siihen oikeanlainen navigointi, jos sitä ei vielä ole.

6. Päivitä myös päänavigoinnin viittaukset kuntoon kussakin tiedostossa. Esimerkiksi ruokaohjeita koskevassa artikkelissa:

   <nav class="navbar" aria-label="Päänavigointi">
     <ul>
       <li><a href="../">Artikkelit</a></li>
       <li>Galleria</li>
       <li>Harrastukset</li>
       <li><a href="../../linkit/">Linkit</a></li>
       <li><a href="../../opiskelu/">Opiskelu</a></li>
       <li>Työt</li>
       <li>Vieraskirja</li>
     </ul>
   </nav>

7. Testaa koko sivuston toimivuus selaimella kahdella tavalla: avaa sivu suoraan W:-asemalta ja sen jälkeen osoitteesta https://users.jyu.fi/~tunnus/www/.

   Mieti

   Miksi linkit toimivat eri tavalla suoraan W:-asemalta käytettyinä kuin users.jyu.fi-osoitteen kautta? Katso selaimen osoiteriviä.

3. Ulkoasun määrittäminen

1. Tallenna ohjaus3.css hakemistoon W:\www\ nimellä ohjaus3.css.

2. Muuta jokainen tekemäsi HTML-dokumentti käyttämään sitä. Viittaus kirjoitetaan suhteellisena, esimerkiksi kokkaus-dokumenttiin:

   <link rel="stylesheet" href="../../ohjaus3.css" />

   Attribuutti type="text/css" on HTML5:ssä tarpeeton, ja rel kirjoitetaan pienillä kirjaimilla.

3. Katso, ettei ohjaus 2:n jäljiltä ole viitteitä muihin tyylitiedostoihin. Poista ne, jos niitä löytyy.

3.1 Tyylieditorin käyttö

Tyylejä on nopeinta kokeilla suoraan selaimessa. Firefoxissa Shift+F7 avaa tyylieditorin, jossa voi muokata tyylitiedostoa ja nähdä muutokset heti. Valikosta se löytyy kohdasta Työkalut → Selaintyökalut.

3.2 Sivun perustyylit

1. Etsi body-sääntö ja vaihda kirjasin:

   font-family: Verdana, Arial, "Trebuchet MS", sans-serif;

   Listasta käytetään ensimmäistä, joka käyttäjän koneelta löytyy. Sivun tekijä ei voi tietää mitä kirjasimia kullakin on asennettuna, joten vaihtoehtoja on annettava useita. Viimeisenä on oltava yleinen kirjasinperhe, tässä sans-serif. Kokeile vaihtaa järjestystä ja katso, mitä tapahtuu.

2. Lisää body-elementille marginaalit ja riviväli:

   margin: 1% 5%;
   line-height: 1.5;

   Lyhennemerkintä margin: 1% 5% tarkoittaa 1 % ylä- ja alareunaan ja 5 % sivuille.

   Riviväli ilman yksikköä

   Kirjoita line-height: 1.5 eikä 150%. Prosenttiarvo lasketaan kerran body-elementissä, ja lapset perivät valmiiksi lasketun arvon. Jos otsikon fonttikoko on isompi, riviväli jää liian ahtaaksi. Yksikötön luku lasketaan uudelleen jokaisessa elementissä.

3. Lisää marginaalit myös h1-, h2- ja p-elementeille tähän tapaan:

   h1 {
     margin: 1.5em 1em;
   }

   em ja rem

   Vanhoissa ohjeissa sanotaan, että em suhteutuu selaimen oletusfonttikokoon. Näin toimii rem. em suhteutuu elementin omaan fonttikokoon, joten 1.5em on otsikossa isompi kuin kappaleessa. Marginaaleissa se on juuri haluttua: väli kasvaa tekstin mukana. Fonttikokoihin käytetään rem-yksikköä, koska se ei kertaudu sisäkkäin. Katso CSS-luennon luku 6.

4. Lisää tiedoston alkuun sääntö, joka helpottaa loppua:

   * {
     box-sizing: border-box;
   }

   Nyt width tarkoittaa koko laatikon leveyttä täytteineen ja reunoineen. Ilman tätä seuraavassa luvussa määriteltävä 20 prosentin navigointipalkki vie todellisuudessa enemmän tilaa.

5. Tallenna tyylitiedosto.

4. Navigoinnin ulkoasu

4.1 Päänavigointi laitaan

1. Lisää .navbar-tyyli. Pisteellä alkava valitsin osuu elementteihin, joiden class-attribuutissa on kyseinen sana.

   .navbar {
     border: thin solid #23201c;
     background-color: #f3e9dd;
     color: #23201c;
     width: 20%;
     float: right;
     padding: 0.5em;
   }

2. float: right liu'uttaa lohkon oikeaan laitaan, ja muu sisältö kiertää sen. Arvolla left se menisi vasempaan laitaan. Kokeile molempia.

4.2 Murupolku vaakariviin

1. Anna murupolulle oma ulkoasunsa:

   .navbartop {
     background-color: #d69c52;
     color: #23201c;
     padding-left: 0.5em;
   }

2. Lista näyttää vielä listalta. Muutetaan alkiot vierekkäin:

   .navbartop ol li {
     display: inline;
   }

   Tämä on asiayhteyden mukaan määräytyvä tyyli: sääntö osuu vain li-elementteihin, jotka ovat ol-elementin sisällä .navbartop-lohkossa. Muut listat säilyvät ennallaan.

3. Lisää alkioiden väliin pystyviiva:

   .navbartop ol li {
     display: inline;
     border-left: 1px solid #23201c;
     margin-left: 0.5em;
     padding-left: 0.5em;
   }

4. Ensimmäisen alkion eteen jää nyt turha viiva. Se poistetaan :first-child-pseudoluokalla:

   .navbartop ol li:first-child {
     border-left: 0;
     margin-left: 0;
     padding-left: 0;
   }

5. Lisää .navbartop-lohkon ol-listalle hieman täytettä ylä- ja alapuolelle ja poista vasemman laidan marginaali ja täyte kokonaan, niin navigointi siirtyy siististi vasempaan reunaan.

6. Jos kuva ei asetu tekstin kanssa samaan linjaan, lisää sille:

   .navbartop img {
     vertical-align: middle;
   }

7. Tallenna ja kokeile.

4.3 Värien poimiminen

Värin voi poimia ruudulta Firefoxin värinpoimijalla (Työkalut → Selaintyökalut → Poimi väri) tai ColorZilla-laajennuksella. Värien merkintätavat on käyty läpi CSS-luennon luvussa 7.

1. Validoi tyylitiedostosi W3C:n CSS-validaattorilla ja korjaa virheet ja varoitukset.

5. Linkkien muotoilu

Linkille voidaan määrittää eri ulkoasu sen mukaan, missä tilassa se on.

1. Määritä leipätekstin linkeille:

   a:link {
     color: #0645ad;
   }
   
   a:visited {
     color: #663366;
   }
   
   a:hover {
     background-color: #7a3b12;
     color: #ffffff;
   }
   
   a:active {
     background-color: #3a1c08;
     color: #ffffff;
   }

   Painettu linkki tummuu hetkeksi. Näin käyttäjä näkee, että painallus rekisteröityi, vaikka uusi sivu latautuisi hitaasti.

2. Lisää kohdistustyyli. Tämä on tehtävän tärkein yksittäinen rivi:

   a:focus {
     outline: 3px solid #1c1a17;
     outline-offset: 2px;
   }

   Miksi kohdistus on pakko määritellä

   Seuraavassa kohdassa poistat navigointilinkeistä alleviivauksen. Jos kohdistusta ei näy, näppäimistöllä liikkuva käyttäjä ei enää tiedä lainkaan, missä hän on. Älä koskaan kirjoita outline: none ilman että korvaat sen jollakin näkyvällä.

   outline-offset siirtää reunuksen linkin ulkopuolelle, jolloin se erottuu myös silloin, kun linkin oma taustaväri on tumma.

3. Poista alleviivaus navigointipalkkien linkeistä ja lihavoi ne. Sama sääntö voidaan antaa useammalle valitsimelle luettelemalla ne pilkulla eroteltuina:

   .navbartop a, .navbar a {
     text-decoration: none;
     font-weight: bold;
   }

   Koska sääntö osuu a-elementtiin eikä sen tiloihin, alleviivaus häviää yhdellä kertaa sekä käymättömiltä että käydyiltä linkeiltä.

   Miksi lihavointi

   Navigointipalkeissa on linkkien seassa tavallista tekstiä: murupolun viimeinen kohta on nykyinen sivu, ja päänavigoinnissa osa kohdista on sivuja, joita ei vielä ole. Kun alleviivaus poistetaan, käyttäjän on silti pystyttävä erottamaan linkit muusta tekstistä.

   Pelkkä väri ei riitä. Jos linkki erottuu ympäröivästä tekstistä vain värin perusteella, linkin ja tekstin värien kontrastin on oltava vähintään 3:1. Tämän tehtävän väreillä se on päänavigoinnissa 1,9:1 ja murupolussa 1,0:1, eli murupolun linkit ja nykyinen sivu näyttävät täsmälleen samalta. Lihavointi on värin lisäksi toinen, väristä riippumaton ero.

4. Anna navigointipalkkien linkeille omat värit, jotka erottuvat riittävästi taustastaan:

   .navbartop a:link,
   .navbartop a:visited { color: #3a1c08; }
   
   .navbar a:link    { color: #0645ad; }
   .navbar a:visited { color: #663366; }

   Murupolun taustaväri on tummempi kuin päänavigoinnin, joten sen linkkiväri on valittu tummemmaksi. Murupolussa käydyillä ja käymättömillä linkeillä on sama väri: murupolku johtaa sivuille, joiden kautta käyttäjä on yleensä juuri tullut, joten tieto käynnistä ei kerro hänelle mitään. Keskisävyisellä taustalla ei myöskään ole tilaa kahdelle erottuvalle värille, joista kumpikin ylittäisi 4,5:1-rajan.

5. Kokeile nyt viedä osoitin navigointilinkin päälle. Teksti katoaa lähes kokonaan: päänavigoinnissa sininen teksti ruskealla taustalla on kontrastiltaan 1,0:1 ja murupolussa 1,8:1.

   Spesifisyys kumoaa järjestyksen

   Sääntö a:hover antaa taustavärin ja valkoisen tekstin, mutta .navbar a:link on spesifisempi, koska siinä on luokkavalitsin. Spesifisempi sääntö voittaa riippumatta siitä, missä järjestyksessä säännöt ovat. Navigoinnissa linkki saa siis ruskean taustan a:hover-säännöstä mutta tekstin värin .navbar a:link-säännöstä.

   LoVe HAte -järjestys ratkaisee vain samanarvoisten sääntöjen keskinäisen järjestyksen. Kun annat linkeille väriä tarkemmalla valitsimella, anna samalla tarkkuudella myös kaikki niiden tilat.

   Lisää navigointilinkeille omat osoitin- ja painettu-tilat:

   .navbartop a:hover, .navbar a:hover {
     background-color: #7a3b12;
     color: #ffffff;
   }
   
   .navbartop a:active, .navbar a:active {
     background-color: #3a1c08;
     color: #ffffff;
   }

6. Tallenna tyylitiedosto.

Kun säännöt ovat paikallaan, linkkien värit ja kontrastit ovat seuraavat:

Kohdistusreunuksen #1c1a17 kontrasti ympäröivään taustaan on valkoisella 17,4:1, päänavigoinnissa 14,5:1 ja murupolussa 7,2:1. Ei-tekstisisällön raja on 3:1.

6. Kuvat

1. Sovita murupolun logo tekstiriville. Oletuksena kuvan alareuna asettuu tekstin peruslinjalle, jolloin logo nostaa rivin ja teksti jää logon alalaitaan. Keskitä kuva pystysuunnassa:

   .navbartop img {
     vertical-align: middle;
   }

   Logon kokoa ei kannata muuttaa tyylitiedostossa. Se on bittikarttakuva, joka näyttää terävimmältä luonnollisessa koossaan; venytetty bittikartta sumenee ja pienennetty menettää yksityiskohtia. Jos logo on väärän kokoinen, tee siitä oikean kokoinen kuva kuvankäsittelyohjelmalla.

   Entä border: 0?

   Vanhoissa ohjeissa ja tyylitiedostoissa näkee usein säännön a img { border: 0; }. Vanhat selaimet piirsivät linkkinä toimivan kuvan ympärille linkin värisen reunuksen, ja se piti poistaa erikseen. Nykyselaimet eivät tee niin enää, joten sääntöä ei tarvita.

2. Avaa editoriin Nanonanon IT ja tietoliikenne -artikkeli ja lisää kuvan sisältävälle figure-elementille luokka: <figure class="kuva">. Kuva merkittiin figure-elementillä jo edellisessä ohjauksessa.

3. Lisää tyylitiedostoon .kuva-tyyli, jossa liu'utat kuvan oikeaan laitaan ja annat sille marginaalit:

   .kuva {
     float: right;
     margin: 0 0 1em 1em;
     max-width: 45%;
   }

   Selain antaa figure-elementille oletuksena melko suuret sivumarginaalit, joten ne kannattaa määritellä itse. Rajaus max-width-ominaisuudella estää kuvaa viemästä koko palstaa.

   Kokeile selaimella, miten teksti kiertää kuvaa. Tämä on float-ominaisuuden alkuperäinen käyttötarkoitus.

4. Varmista, ettei kuva vuoda ulos kapealla näytöllä:

   img {
     max-width: 100%;
     height: auto;
   }

5. Lisää alatunnisteelle clear-määritys, jotta se ei tule kelluvan navigointipalkin viereen vaan asettuu kunnolla sen alle:

   footer {
     clear: both;
   }

   Tämä on float-asemoinnin klassinen sudenkuoppa: kelluva lohko ei kasvata äitilohkonsa korkeutta, joten ilman clear-määritystä alatunniste valuu navigointipalkin päälle, jos sisältöä on vähän.

6. Tallenna tyylitiedostosi.

7. Testaus

Käy nämä läpi järjestyksessä. Suurin osa virheistä löytyy kahdella ensimmäisellä.

8. Lisätehtäviä

8.1 Taulukot

Muotoile Nanonanon Opiskelu-sivulla oleva taulukko siistiksi.

1. Lisää koko taulukon ympärille raja.
2. Lisää jokaisen solun ympärille raja.
3. Muotoile otsikkosolut (th) selkeästi erottumaan varsinaisista soluista, esimerkiksi taustavärillä #e8b45c, joka antaa tummalle tekstille kontrastin 8,6:1.
4. Keskitä otsikkosolujen sisältö ja tasaa muiden solujen sisältö vasempaan reunaan.
5. Muotoile myös taulukon otsikko (caption) sopivaksi.

6. Määritä solujen väliin neljän pikselin alue:

   table {
     border-collapse: separate;
     border-spacing: 4px;
   }

   border-spacing vaatii erilliset rajat

   Ominaisuus toimii vain, kun border-collapse on arvossa separate. Jos arvo on collapse, solujen rajat sulautuvat yhteen eikä väliä voi määrätä. Katso CSS-luennon luku 10.

7. Lisää soluille hieman täytettä (padding), jotta sisältö ei ole kiinni rajoissa.

8. Tarkista lopuksi, että taulukon merkintä on kunnossa: onko siinä caption, ja onko otsikkosoluissa scope-attribuutti? Ilman niitä ruudunlukija ei osaa kertoa, mihin sarakkeeseen solu kuuluu.

9. Mallivastaus

• Mallivastaus selattavana
• Mallivastaus ZIP-paketissa