Cascading Style Sheets (CSS) -perusteet

Mallivideot

Ongelmia videon katselussa?

Alkuvalmistelut

Näissä demoissa opetellaan perusteet WWW-sivun ulkoasun ehdottamisesta CSS-kielen avulla. Jatketaan edelliskerran tehtävistä ja tehdään Nanonanon kotisivuille siisti ulkoasu. Jos edelliset demot jäivät kesken, niin tee ne ensin valmiiksi. Voit jatkaa näitä demoja myös mallivastauksesta.

Colorzilla

Asennetaan Firefoxiin Colorzilla-laajennos.

  1. Mene Colorzilla-laajennoksen sivuille.
  2. Valitse Install Now, jonka jälkeen sama uudelleen asennusikkunasta.
  3. Käynnistä Firefox uudelleen

Nyt vasemmassa alakulmassa pitäisi näkyä pipetti-ikoni colorzilla. Työkalun avulla voit valita sopivan värin ruudulta tai paletista.

Navigointipalkkien rakenne

Tarkoituksena on luoda jokaiselle sivulle navigointi. Navigointi koostuu kahdesta osasta. Sivun yläreunaan halutaan palkki, joka kertoo missä sivu sijaitsee sivuston hierarkiarakenteessa. Kustakin navigointipalkin tekstin osasta tehdään linkki kyseiselle sivulle paitsi tietenkin viimeisestä, koska se viittaa sivulle, jota parhaillaan selataan.

Murupolku

Ylänavigointi

Muropolkunavigointi kertoo missä hakemistossa sijaitsemme sivustolla. Listan osia napauttamalla pääsee ylemmille tasoille.

  1. Käynnistä Amaya. Avaa V:-asemalta Nanonano-sivuston etusivu-dokumentti.
  2. Lisää dokumentin alkuun (body-elementin sisälle) div-elementti valinnalla XHTML | Division (div). Anna lohkon class-attribuutin arvoksi navbartop. div-lohko on helpointa valita rakennenäkymästä Views | Show Structure napauttamalla div-tekstiä.
  3. Tallenna pieni kuva Nanonanosta V-asemalle samaan hakemistoon etusivun kanssa.
  4. Lisää lohkon sisään järjestämätön lista (ul) ja lisää ainoaan lista-alkio (li) tallentamasi kuva.

Päänavigointi

Lisäksi sivun toiseen laitaan halutaan yleisnavigointi, josta löytyy sivuston pääkohdat. Kustakin listan kohdasta tehdään linkki kyseiselle sivulle. Navigointipalkkien muotoilu tehdään myöhemmissä demoissa. Tässä vaiheessa keskitytään määrittämään palkkien sisältö ja rakenne.

Esimerkki navigointipalkista

  1. Tee ensimmäisen div-elementin jälkeen toinen div-lohko. Sijoita tämän lohkon class-attribuutin arvoksi navbar.
  2. Lisää lohkoon järjestämätön lista (ul) ja siihen lista-alkioksi kaikki tarjolle olevat alasivut (Artikkelit, Galleria, Harrastukset, Linkit, Opiskelu, Työt, Vieraskirja).
  3. Tee kohdista Opiskelu, Linkit ja Artikkelit linkit kyseisiin alihakemistoihin. Katso, että viitteisiin ei jää index.html-sivua vaan viittaus on hakemistoon.

Navigointipalkkien linkit

Usealla sivulla toistuvan navigoinnin automaattiseen lisäämiseen on tekniikoita, joita käsitellään demossa 7, mutta toistaiseksi liitämme navigointipalkit leikepöydän avulla kopioimalla.

  1. Kopioi molemmat lohkot leikepöydälle. Helpoiten valinta onnistuu joko rakenne- tai koodinäkymästä. Rakennenäkymässä (Views | Show Structure) kaksi peräkkäistä lohkoa voi valita napauttamalla niiden nimiä Shift-näppäin pohjassa.
  2. Avaa alihakemistojen index.html-tiedostot muokkaamista varten.
  3. Liitä div-lohkot leikepöydältä kunkin dokumentin body-elementin alkuun.
  4. Muokkaa kussakin tiedostossa ensimmäisen div-lohkon sisällä olevaa listaa siten, että lisäät listakohdaksi alasivujen otsikot. Listakohtia pystyy lisäämään kahdella enterillä tai napauttamalla rakennenäkymässä li-elementtiä ja painamalla kerran enteriä. Esimerkiksi kokkaus-hakemiston dokumenttiin (index.html-tiedostoon) tulisi siis lista:
    • Nanonanon kuva Nanonanon kuva ylänavigoinnissa.
    • Artikkelit
    • Kuinka valmistaa maistuvaa opiskelijaruokaa halvalla?
  5. Tee listakohdista linkit haluttuihin sivuihin. Käytä suhteellista viittausta.
    • Nanonanon kuvasta tehdään linkki etusivulle.
    • Viimeisestä kohdasta ei tehdä linkkiä, koska se viittaa samalle sivulle.
    Esimerkiksi kokkaus-hakemiston index.html-tiedoston body-elementin alkuun tulisi: 
    <div class="navbartop">
<ul>
  <li><a href="../../"><img src="../../nanonano.png" alt="Nanonano" /></a></li>
  <li><a href="../">Artikkelit</a></li>
  <li>Kuinka valmistaa maistuvaa opiskelijaruokaa halvalla?</li>
</ul>
</div>
  6. Toisen div-lohkon viittauksien pitäisi olla kunnossa sillä Amaya päivittää suhteellisten linkkien viittaukset automaattisesti kopioitaessa leikepöydältä. Esimerkiksi ruokaohjeita koskevassa artikkelissa linkkien viitteiden pitäisi olla seuraavanlaisia: 
    <div class="navbar">
<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>
</div>
  7. Testaa koko sivuston toimivuus jollakin selaimella. Testaa sivu suoraan V:-asemalta ja osoitteesta http://www.ad.jyu.fi/users/tunnuksen_1._kirjain/tunnus/www/. Miksi linkit toimivat eri tavalla suoraan V:-asemalta käytettyinä kuin www.ad.jyu.fi:n kautta?

Ulkoasun määrittäminen

Esimerkki nanonanon sivun ulkoasusta

  1. Tallenna css-pohja V:\www\-hakemistoon demo2.css-nimellä.
  2. Muuta jokainen tekemäsi XHTML-dokumentti käyttämään demo2.css-tiedostoa. Linkin tyylitiedostoon saa valinnalla Style | Link.... Viittauksen pitäisi tulla suhteellisena, esim. kokkaus-dokumenttiin: 
    <link href="../../demo2.css" rel="stylesheet" type="text/css" />
    Katso, ettei demo 1:sen jäljiltä ole viitteitä muihin tyylitiedostoihin. Nämä voit tarvittaessa poistaa valinnalla Style | Remove
  3. Avaa sivusi Mozilla Firefoxissa uuteen ikkunaan (File | New Window) ja katso miten www-sivujesi ulkoasu muuttui.
  4. CSS-kielellä voidaan määritellä oletusulkoasu halutuille XHTML-elementeille. Voidaan luoda myös uusia tyylimäärityksiä joita voi ottaa XHTML-dokumentissa käyttöön halutessaan. Esimerkkejä CSS-määrityksistä löytyy kurssimonisteesta ja luentosivulta.
  5. Valitse Firefoxin Web Developer Toolbarista (asennusohjeet demossa 1) CSS | Edit CSS. Laajenna sivupalkkia hieman niin että näet paremmin tekstit.
  6. Napauta Stick-painiketta Edit CSS-palkin ylälaidasta. Painike jää pystyasentoon Stick päällä. Tämä on olennaista sillä jos menet muulle sivulle selaimessa eikä stick ole päällä niin muutokset katoavat! Pidä tehtävät ja muut sivut omassa ikkunassa ja Nanonanon sivut omassa ikkunassa.
  7. Vaihda sivulla käytetty kirjasin seuraavasti:
    • Etsi body-lohko. Ohjeet CSS:n merkintätavoista löytyvät luennolta 2.
    • Kirjoita ominaisuuden font-family arvoksi (kaksoispisteen jälkeen): 
      Verdana, Arial, "Trebuchet MS", sans-serif;
    • Verdana, Arial ja "Trebuchet MS" ovat käytettävien kirjasimien nimiä. Listasta ensimmäisenä löytyvää kirjasinta käytetään sivulla. WWW-sivun tekijä ei voi tietää mitä kirjasimia on asennettuna kunkin selaajan koneelle joten on pakko antaa useita vaihtoehtoja.
    • sans-serif tarkoittaa päätteetöntä kirjasinperhettä josta poimitaan käyttöön jokin kirjasin jos mitään muuta kirjasinta ei ole käytettävissä.
  8. Ulkonäkömuutoksien pitäisi näkyä heti dokumentissa vaikka tyylitiedostoa ei olekaan tallennettu vielä. Voit vaihdella kirjasimien järjestystä ja kokeilla miten sivun ulkoasu muuttuu.
  9. Määritellään seuraavaksi sivun marginaali. Lisää body-elementille määrittelyt: 
    margin-left: 5%;
margin-right: 5%;
margin-top: 1%;
margin-bottom: 1%;

    Määritellään siis koko sivun vasemmaksi ja oikeaksi marginaaliksi 5% sivun koosta. Ylä- ja alamarginaaliksi määritellään 1% sivun koosta.

  10. Lisää body-elementtiin myös rivivälistysmääritys: 
    line-height: 150%

    Isompi riviväli parantaa luettavuutta.

  11. Määritellään lisää marginaaleja. Nyt h1-, h2-, ja p-elementeille. Lisää näille kaikille määritykset seuraavaan tapaan: 
    h1 {
margin-left: 1em;
margin-right: 1em;
margin-top: 1.5em;
margin-bottom: 1.5em;
}

    em-yksikkö suhteuttaa koon määrityksen selaimen oletusfontin kokoon.

  12. Tallenna tyylitiedosto napauttamalla Edit CSS-palkista Save...-painiketta. Valitse demo2.css.

Navigoinnin ulkoasu

Esimerkki navigointipalkin ulkoasusta
  1. Määritellään seuraavaksi sivustolla käytetylle navigointipalkille erottuva ulkoasu.
  2. Lisää uusi .navbar-tyyli ja sille reunus seuraavalla tavalla: 
    border-style: solid;
border-width: thin;
border-color: black;

    Kokeile sivujen toimintaa selaimella.

    Pisteellä (.) alkavat tyylit ovat määrityksiä joita voidaan käyttää minkä elementin yhteydessä tahansa kertomalla class-attribuutilla käytetyn tyylin nimi.

  3. Navigointipalkille voidaan määritellä myös taustaväri. Aina taustaväriä (background) määriteltäessä pitää muistaa määritellä myös tekstin väri (color). Lisää värimääritykset. Poimi niihin väriarvot mallikuvasta käyttäen Colorzilla-työkalua:
    • Vasemmalla hiiren napilla voi valita värin ruudulta
    • Napauttamalla oikealla alakulmassa olevaa pipetti-ikonia saat vaihtoehtoja, joilla saat väriarvon leikepöydälle
    • Värien määritteleminen RGB-koodeina on selitetty esim. RGB Color Values-dokumentissa.
  4. Navigointipalkille pitää määrittää myös normaalista poikkeava leveys jotta se sopii siististi sivun jompaan kumpaan laitaan: 
    width: 18%;
  5. Navigointipalkin siirtäminen jompaan kumpaan laitaan onnistuu helposti float-ominaisuudella, jolla voi kelluttaa elementin oikeaan (right) tai vasempaan (left) laitaan: 
    float: right;
  6. Esimerkki yläpalkin ulkoasusta
    Määrittele oma ulkoasu myös sivun yläosassa olevalle leivänmurunavigoinnille, joka käyttää .navbartop-css-tyyliä. Aseta taustaväriksi #D69C52.
  7. Määritellään lista näyttämään leivänmurunavigoinnin sisällä muulta kuin perinteiseltä listalta. Lisää seuraava uusi tyylimäärittely: 
    .navbartop ul li {
	display: inline;
}

    Ylläoleva määrittely on voimassa .navbartop-tyylin sisällä olevan ul-listan li-elementteihin eli kyseessä on ns. asiayhteyden mukaan määräytyvä tyyli.

    display-ominaisuudella muutetaan lista ulkoasultaan tavalliseksi tekstitason (inline) elementiksi.

    Tallenna ja kokeile.

  8. Lisätään linkkien väliin pieni pystysuora viiva. Määritetään navbartop:ssa olevan linkkilistan rajoja seuraavilla lisäyksillä edellä määriteltyyn tyyliin (.navbartop ul li): 
    border-left: 1px solid black;
margin-left: 0.5em;
padding-left: 0.5em;
  9. Lisää hieman välistystä (padding) .navbartop-tyylin sisällä olevaan ul:än ylä- ja alapuolelle. Poista samalla marginaali ja padding kokonaan vasemmasta laidasta niin navigointi siirtyy siististi aivan vasempaan reunaan.
  10. Vasempaan reunaan jää ylimääräinen raja
    Vielä pieneksi kauneusvirheeksi jää vasemmanpuolimmaisen linkin viereen tuleva turha palkki. Se voidaan piilottaa seuraavalla määrityksellä: 
    .navbartop ul li:first-child {
        border-left: 0;
        margin-left: 0;
        padding-left: 0;
}

    first-child-määritys ei välttämättä toimi jokaisessa selaimessa.

  11. Siisti .navbar-tyylin sisällä olevaa linkkilistaa. Siirrä lista aivan laatikon vasempaan reunaan.
  12. Tallenna CSS-tyylisi demo2.css-tiedostoon
  13. Validoi CSS-tiedostosi W3C CSS Validatorilla valitsemalla Web Developer Toolbarista Tools | Validate CSS. Korjaa mahdolliset virheet ja varoitukset.

Linkkien muotoilu

linkkien värit
  1. WWW-sivun linkeille on mahdollista määrittää ns. pseudoluokkia joiden ominaisuudet tulevat voimaan riippuen siitä onko linkki aktiivinen, onko hiiri linkin päällä tai onko linkin viittaamassa osoitteessa jo käyty.
    • a:link määrittää linkeille yhteiset ominaisuudet
    • a:visited määrittää käytyjen linkkien ulkoasun
    • a:hover määrittää linkin ulkoasun hiiren ollessa linkin päällä
    • a:active määrittää aktiivisen linkin ulkoasun

    Määritä linkeille seuraavat ominaisuudet:

    • Tavallisen linkin väriksi sininen.
    • Käydyn linkin väriksi purppura.
    • hover-efektiin linkin taustaväriksi #D69C52 ja tekstin väri valkoiseksi.
  2. Poista navigointipalkkien sisällä olevista linkeistä alleviivaus ja muuta värit sopivammiksi. 
    .navbartop a:link, .navbar a:link {
	text-decoration: none; /* poistaa alleviivauksen */
}

    Jos sama tyylimääritys sopii useampaan paikkaan niin voidaan sama määritys tehdä helposti vaikka useammalle elementille jos luettelee elementit pilkulla eroteltuina. Sama pätee myös asiayhteyden mukaan määräytyville tyyleille. Ylläoleva esimerkki tarkoittaa että .navbartop-tyylin sisällä olevien linkkien ja .navbar-tyylin sisällä olevien linkkien ulkoasua muutetaan.

  3. Navigointipalkkien linkkien väritys ja hover-efekti kannattaa määrätä hieman leipätekstistä eroaviksi.
  4. Tallenna tyylitiedosto.

Kuvat

Muotoillaan myös ylänavigoinnissa oleva nanonanokuvalinkki järkevän näköiseksi.

  1. Kirjoita asiayhteydestä riippuva tyyli, joka poistaa reunukset ylänavigoinnin sisällä olevilta kuvilta.
  2. Lisää samaan tyyliin määritys, joka keskittää sisällön pystysuunnassa.

  3. Tehdään myös leipätekstissä oleville kuville pieniä muutoksia.

    Esimerkki kuvan liu-uttamisesta

    Avaa Amayaan Nanonanon IT ja tietoliikenne -artikkeli. Lisää sivulla olevan kuvan sisältävään p-elementti class-attribuuttiin arvo kuva.

    <p class="kuva">
  4. Lisää css-tiedostoon .kuva-tyyli jossa leijutat (float) kuvan oikeaan laitaan. Määrittele kuvan ympärille siistit marginaalit.
  5. Kokeile selaimella miten teksti kiertää kuvaa.
  6. Voit myös liu'uttaa address-lohkon oikeaan laitaan samalla tavalla.
  7. Tallenna tyylitiedostosi.

Testaus

Lisätehtäviä

Taulukot

Esimerkki taulukon ulkoasusta

Muotoile Nanonanon opiskelu-sivulla oleva taulukko siistiksi:

Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/www/demot/demo2/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi)<URL: http://hazor.iki.fi/>
2005-11-17 11:18:03