Ensimmäisen sivuni ensimmäinen otsikko

Jatketaan vielä hieman edellisellä HTML-kerralla ollutta opasta. Viimeksi luotiin oma sivu, tehtiin erilaisia listoja, lisättiin kuva sivulle, ja lopuksi tutustuttiin tyylitiedostoihin.

Listalle tyyli!

Kerrataan hieman listojen tekemistä. Pallukkalistan saa tehtyä <ul>-elementin avulla.

  <ul>
    <li>Eka pallukka</li>
    <li>Toka pallukka</li>
    <li>Kolmas pallukka</li>
  </ul>

Lista näyttää seuraavalta:

Tutustutaan hieman lisää tyyleihin. Tyylitiedostoissa, eli .css -päätteeseen päättyvissä tiedostoissa, voimme määritellä erilaisia tyyliluokkia. Tyyliluokan määrittely alkaa aina pisteellä. Esimerkiksi seuraavassa tiedostossa määritellään tyyliluokka vihrea.

.vihrea {
    color: rgb(17,179,49);
}

Yllä olevassa tyyliluokassa käytettävä väri on annettu rgb-arvona. Sana rgb tulee sanoista red, green, blue, eli punainen, vihreä ja sininen. Kullekin värille voi antaa arvon väliltä 0-255. Jos arvo on 255, on väriä niin paljon kuin mahdollista. Jos taas arvo on 0, ei kyseistä väriä ole ollenkaan. Esimerkiksi arvo rgb(255, 0, 0) on täysin punainen, ja väri rgb(0, 0, 255) on täysin sininen. Voit käyttää sivulla http://www.daviddurman.com/flexi-color-picker/ olevaa ohjelmaa itsellesi sopivan värin valitsemiseksi.

HTML-elementeille voidaan määritellä käytettävä tyyliluokka avainsanalla class, jota seuraa tyylin nimi. Esimerkiksi seuraavassa listassa ekalla ja kolmannella pallukalla on tyyliluokka "vihrea".

  <ul>
    <li class="vihrea">Eka pallukka</li>
    <li>Toka pallukka</li>
    <li class="vihrea">Kolmas pallukka</li>
  </ul>

Itse lista näyttää HTML-sivulla nyt seuraavalta:

Tyylitiedostoilla saa tehtyä muitakin hauskoja juttuja. Esimerkiksi listalle voi antaa taustavärin, ja siitä voi poistaa pallot. Luodaan tyyliluokka harmaamenu, jossa listan taustaväri on vaalean harmaa, ja listan palloja ei näytetä.

.harmaamenu {
    /* tämä on muuten kommentti, eli kone ei tee sillä mitään */
    /* listan tausta on harmaa */
    background-color: rgb(220, 220, 220);

    /* ei näytetä palloja */
    list-style-type: none;
}
  <ul class="harmaamenu">
    <li class="vihrea">Eka pallukka</li>
    <li>Toka pallukka</li>
    <li class="vihrea">Kolmas pallukka</li>
  </ul>

Nyt lista näyttää seuraavalta:

Muutetaan vielä listan elementtejä siten, että ne ovatkin sivuttain. Luodaan tyyliluokka listaelementti, joka asettaa listaelementit vierekkäin, ja lisää niille hieman tilaa sivuille.

.listaelementti {
    /* 10 pikseliä tilaa jokaiselle puolelle */
    padding: 10px;
    /* näytetään menuelementit vierekkäin */
    display: inline; 
}

Lisätään listan elementeille tyyliluokka listaelementti. Huomaa, että sama elementti voi sisältää useampia tyyliluokkia!

  <ul class="harmaamenu">
    <li class="vihrea listaelementti">Eka pallukka</li>
    <li class="listaelementti">Toka pallukka</li>
    <li class="vihrea listaelementti">Kolmas pallukka</li>
  </ul>

Nyt lista näyttää seuraavalta:

Eikö olisi siistiä jos väri vaihtuisi kun listaelementin päälle viedään hiiri? Lisätään tyylitiedostoon vielä erikoinen :hover-tyyli, joka näkyy vain kun hiiri on elementin päällä. Nyt käytössämme on siis kaksi listaelementt-tyyliluokkaa, toinen joka on aktiviinen silloin kun hiiri ei ole tyyliluokan päällä, ja toinen muulloin.

.listaelementti {
    /* 10 pikseliä tilaa jokaiselle puolelle */
    padding: 10px;
    /* näytetään menuelementit vierekkäin */
    display: inline; 
}

.listaelementti:hover {
    /* valkoinen taustaväri kun hiiri on tyylin päällä */
    background-color: white;
    /* 10 pikseliä tilaa jokaiselle puolelle */
    padding: 10px;
    /* näytetään menuelementit vierekkäin */
    display: inline; 
}

Hauska juttu on se, että meidän ei tarvitse muuttaa HTML-tiedostoa. Koska :hover on liitetty tyyliluokkaan .listaelementti, on se käytössä kaikissa elementeissä, joissa on tyyliluokka listaelementti.

Hieno valikko!

Ylläolevalla tekniikalla saa luotua vaikkapa seuraavannäköisen listan. Linkit saa lisättyä a-elementillä!

Ensimmäinen Javascript-sivu!