Cascading Style Sheets (CSS) -perusteet

Mallivideot

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.

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.

Ylä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. Avaa etusivu-dokumentti. Lisää body-elementin alkuun div-elementti, jolle annat attribuutin class arvoksi navbartop.
  2. Lisää lohkon sisään järjestämätön lista (ul) ja ainoaksi lista-alkioksi (li) pieni kuva nanonanosta.
  3. Tee ensimmäisen div-elementin jälkeen toinen div-lohko. Sijoita tämän lohkon class-attribuutin arvoksi navbar.
  4. 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).
  5. Tee kohdista Opiskelu, Linkit ja Artikkelit linkit kyseisiin alihakemistoihin. Muihin kohtiin ei tehdä vielä linkkejä, koska kyseiset sivut eivät ole vielä valmiina.
  6. Kopioi molemmat lohkot leikepöydälle ja avaa alihakemistojen index.html- tiedostot muokkaamista varten.
    • Liitä div-lohkot leikepöydältä kunkin dokumentin body-elementin alkuun.
    • Muokkaa kussakin tiedostossa ensimmäistä div-lohkoa siten, että lisäät listakohdaksi alasivujen otsikot. Esimerkiksi kokkaus-hakemiston dokumenttiin (index.html-tiedostoon) tulisi siis lista:
      • Nanonanon kuva Nanonanon kuva ylänavigoinnissa.
      • Artikkelit
      • Kuinka valmistaa maistuvaa opiskelijaruokaa halvalla?
    • Tee listakohdista linkit haluttuihin sivuihin. Nanonanon kuvasta tehdään linkki etusivulle. Viimeisestä kohdasta ei tehdä linkkiä. Käytä suhteellista viittausta. 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>
    • Muokkaa kunkin tiedoston toisen div-lohkon linkit viittaamaan oikeaan paikkaan. Merkitse linkit niihin kohtiin, jotka ovat valmiina. Älä poista listakohtia vaikka niihin ei vielä tulisikaan linkkiä. Luonnollisesti linkkiä ei tarvitse, mikäli se viittaa itseensä (esim. opiskelu-sivulta opiskelu-sivulle). Esimerkiksi ruokaohjeita koskevaan artikkeliin tulisi seuraavanlaiset linkit: 
      <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

CSS-perusteet -mallivideo

  1. Tallenna css-pohja V:\www\-hakemistoon demo2.css-nimellä.
  2. Muuta jokainen edellisessä demossa tekemäsi XHTML-dokumentti käyttämään demo2.css-tiedostoa. Käytä suhteellista linkkiä: 
    <link href="demo2.css" rel="stylesheet" type="text/css" title="Tyylipohja" />
    Alihakemistoissa on muistettava lisätä viittauksen alkuun ../ ja alihakemistojen alihakemistoissa ../../
  3. Kokeile 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. Muuta Xetorilla tyylitiedoston määrityksiä valitsemalla Plugins|XML|Show CSS Dialog
  6. Vaihda sivulla käytetty kirjasin seuraavasti:
    • Valitse body-elementti ikkunan vasemmasta laidasta.
    • Valitse ominaisuudeksi font-family ja kirjoita sen arvoksi 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ä.

    • Napauta alalaidasta Update file-painiketta niin muutokset tallentuvat.
  7. Kokeile selaimella WWW-dokumenttiesi ulkoasua. Voit vaihdella kirjasimien järjestystä ja kokeilla miten sivun ulkoasu muuttuu.
  8. Voit jatkaa CSS-ominaisuuksien muokkausta Xetorin dialogin avulla tai avata CSS-tiedoston tavallisen tekstitiedoston tapaan muokattavaksi.
  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.

    Testaa sivun ulkonäön muuttuminen selaimella.

    Lisää body-elementtiin myös rivivälistysmääritys:

    line-height: 150%

    Isompi riviväli parantaa luettavuutta.

  10. 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.

    Testaa selaimella. Muuta marginaalimääritykset mieleisiksesi.

Navigoinnin ulkoasu

Navigointi -mallivideo

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: #000000;

    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ä määriteltäessä pitää muistaa määritellä myös tekstin väri: 
     background: #FFC653 none;
 color: #666666;

    Värien määritteleminen RGB-koodeina on selitetty esim. RGB Color Values-dokumentissa. Xetorissa on myös helppo värityökalu Macros|Text|Color Picker jota voi käyttää apunaan.

  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. Siistitään edelleen navbartop:ssa olevan linkkilistan ulkoasua seuraavilla lisäyksillä edellä määriteltyyn tyyliin (.navbartop ul li): 
    border-left: 1px solid black; /* lisätään linkkien väliin pieni pystysuora palkki */
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 eikä esim. HTML-kitin preview-tilassa. Testaa sivujasi Mozillalla, Operalla sekä Internet Explorerilla.

  11. Yritä keksiä vaihtoehtoinen tapa tehdä edellä toteutettu first-child-määritys jokaisella selaimella toimivaksi.
  12. Siisti .navbar-tyylin sisällä olevaa linkkilistaa. Siirrä lista aivan laatikon vasempaan reunaan.
  13. Validoi CSS-tiedostosi W3C CSS Validatorilla. Anna validaattorille CSS-tiedostosi absoluuttinen osoite:

    http://www.ad.jyu.fi/users/t/tunnus/www/demo2.css

    Korjaa mahdolliset virheet ja varoitukset.

Linkkien muotoilu

Linkit -mallivideo

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-efektinä linkin taustaväriksi voisi muuttua #D69C52 ja tekstin väri muuttua valkoiseksi.
  2. Navigointipalkkien linkkien väritys ja hover-efekti kannattaa määrätä hieman leipätekstistä eroaviksi. 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.

Kuvat

Kuvat & taulukot -mallivideo

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

Esimerkki kuvan liu-uttamisesta

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

Taulukot

Esimerkki taulukon ulkoasusta

Muotoile Nanonanon opiskelu-sivulla oleva taulukko siistiksi:

address

  1. Määritä siisti ulkoasu etusivun alaosassa olevalle address-elementille. Sijoita elementin sisältö oikeaan laitaan ja pienennä kirjasinkokoa aavistuksen verran.

Testaus

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/www/demot/demo2/
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2005-01-14 18:24:57
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto