Cascading Style Sheets (CSS) -perusteet
- Alkuvalmistelut
- Navigointipalkkien rakenne
- Ulkoasun määrittäminen
- Navigoinnin ulkoasu
- Linkkien muotoilu
- Kuvat
- Testaus
- Lisätehtäviä
Alkuvalmistelut
Näissä tehtävissä opetellaan perusteet WWW-sivun ulkoasun tekemisestä CSS-kielen avulla. Jatketaan edelliskerran tehtävistä ja tehdään Nanonanon kotisivuille siisti ulkoasu. Jos edelliset tehtävät jäivät kesken, niin tee ne ensin valmiiksi. Voit jatkaa näitä tehtäviä edellisen tehtävän 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.
Murupolku
Murupolkunavigointi kertoo missä hakemistossa sijaitsemme sivustolla. Listan osia napauttamalla pääsee ylemmille tasoille.
- Käynnistä haluamasi editori (esim. Visual Studio Code). Avaa W:-asemalta Nanonano-sivuston etusivu-dokumentti.
- Lisää dokumentin alkuun
(
body
-elementin sisälle)nav
-elementti, joka on erityisesti tarkoitettu navigointipalkkeja varten. Voit käyttää myös yleistä div-elementtiä. Anna nav-elementinclass
-attribuutin arvoksinavbartop
. - Tallenna pieni kuva Nanonanosta W-asemalle samaan hakemistoon etusivun kanssa.
-
Lisää nav-elementin sisään järjestämätön lista (
ul
) ja lisää ainoan lista-alkioon (li
) sisään 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öhemmin. Tässä vaiheessa keskitytään määrittämään palkkien sisältö ja rakenne.
- Lisää ensimmäisen nav-elementin jälkeen toinen nav-elementti. Sijoita
tämän elementin
class
-attribuutin arvoksinavbar
. - Lisää navbar-lohkoon järjestämätön lista (
ul
) ja siihen lista-alkioiksi kaikki tarjolla olevat alasivut (Artikkelit, Galleria, Harrastukset, Linkit, Opiskelu, Työt ja Vieraskirja). - Tee kohdista Artikkelit, Linkit ja Opiskelu linkit kyseisiin alihakemistoihin. Katso, että viitteisiin ei jää index.html-sivua, vaan viittaus on pelkkään hakemistoon.
Navigointipalkkien linkit
Usealla sivulla toistuvan navigoinnin automaattiseen lisäämiseen on tekniikoita, joita käsitellään myöhemmin. Toistaiseksi liitämme navigointipalkit leikepöydän avulla kopioimalla.
- Kopioi molemmat
nav
-elementit sisältöineen leikepöydälle. - Avaa alihakemistojen index.html-tiedostot muokkaamista varten.
- Liitä
nav
-lohkot leikepöydältä kunkin dokumentinbody
-elementin alkuun. - Muokkaa kussakin tiedostossa navbartop
nav
-lohkon sisällä olevaa listaa siten, että lisäät listakohdaksi kyseistä kansiota kansiohierarkiassa ylempänä olevien sivujen otsikot. Esimerkiksi kokkaus-hakemiston dokumenttiin (index.html-tiedostoon) tulisi siis lista, jossa ensimmäisenä alkiona on Nanonanon kuva ja sen jälkeen artikkelit- ja kokkauskansioiden dokumenttien otsikot:- Artikkelit
- Kuinka valmistaa maistuvaa opiskelijaruokaa halvalla?
- 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.
body
-elementin alkuun tulisi:
Luo kokkaus-kansioon index.html-dokumentti ja siihen oikeanlainen navigointi<nav 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> </nav>
- Päivitä myös navbar
nav
-lohkon suhteelliset viittaukset kuntoon eri tiedostoissa. Esimerkiksi ruokaohjeita koskevassa artikkelissa linkkien viitteiden pitäisi olla seuraavanlaisia:<nav 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> </nav>
- Testaa koko sivuston toimivuus jollakin Firefox-selaimella. Testaa sivu suoraan W:-asemalta ja osoitteesta http://users.jyu.fi/~tunnus/www/. Miksi linkit toimivat eri tavalla suoraan W:-asemalta käytettyinä kuin users.jyu.fi:n kautta?
Ulkoasun määrittäminen
- Tallenna ohjaus3.css W:\www\-hakemistoon ohjaus3.css-nimellä.
- Muuta jokainen tekemäsi HTML-dokumentti käyttämään ohjaus3.css-tiedostoa.
Viittausten pitäisi tulla suhteellisina, esim. kokkaus-dokumenttiin:
Katso, ettei ohjaus 2:sen jäljiltä ole viitteitä muihin tyylitiedostoihin. Poista viitteet, jos niitä löytyy.<link href="../../ohjaus3.css" rel="StyleSheet" type="text/css" />
- Avaa sivusi Mozilla Firefoxissa uuteen tabiin ja katso miten WWW-sivujesi ulkoasu muuttui.
- CSS-kielellä voidaan määritellä oletusulkoasu halutuille HTML-elementeille. Voidaan luoda myös uusia tyylimäärityksiä, joita voi ottaa HTML-dokumentissa käyttöön halutessaan. Esimerkkejä CSS-määrityksistä löytyy CSS-oppaasta ja luentosivulta.
-
Käytä Firefox-selaimessa
näppäinyhdistelmää SHIFT+F7. Sivun alaosaan aukeaa tyylieditori.
Editorin vasemmasta laidasta voit valita muokattavan tyylitiedoston.
Voit vapaasti muokata CSS-tiedostoa ja muutokset näkyvät heti sivulla. Muista tallentaa
muutoksesi joko valitsemalla vasemman laidan css-tiedostolistauksesta tiedoston nimen vierestä save tai CTRL+S-näppäinyhdistelmällä.
Voit käyttää editointiapuna myös Firefoxin Inspector-näkymää, jonka voit aktivoida näppäinyhdistelmällä CTRL+SHIFT+C. Inspectorin kautta muutettua css-koodia ei voi suoraan tallentaa vaan muutokset täytyy muistaa kopioida Style Editorin puolelle ja tallentaa sieltä. Katso seuraava mallivideo:
- Vaihda sivulla käytetty kirjasin seuraavasti:
- Etsi
body
-lohko. Ohjeet CSS:n merkintätavoista löytyvät CSS-luennolta. - 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 oletuksena. 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ä.
- Etsi
- 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.
- 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.
- Lisää body-elementtiin myös rivivälimääritys:
line-height: 150%;
Isompi riviväli parantaa luettavuutta.
- Määritellään lisää marginaaleja. Nyt
h1
-,h2
-, jap
-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. - Tallenna tyylitiedosto napauttamalla Save -linkkiä tyylitiedoston nimen vierestä. Valitse nimeksi ohjaus3.css.
Navigoinnin ulkoasu
- Määritellään seuraavaksi sivustolla käytetylle navigointipalkille erottuva ulkoasu.
- Lisää uusi
.navbar
-tyyli ja sille reunus seuraavalla tavalla:.navbar { 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.
- Navigointipalkille voidaan määritellä myös taustaväri.
Aina taustaväriä (
background-color
) 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 Firefox-selaimen Eyedropper-työkalua (Tools|Web developer|Eyedropper) tai Firefoxiin erikseen asennettavaa ColorZilla-työkalua:- Klikkaa työkalu aktiiviseksi ohjelmaikkunan vasemmasta alakulmasta klikkaamalla työkalun pipetti-ikonia kerran hiiren ykköspainikkeella.
- Hiiren ykköspainikkeella voi valita värin ruudulta.
- Napauttamalla vasemmalla alakulmassa olevaa pipetti-ikonia hiiren kakkospainikkeella saat vaihtoehtoja, joilla saat väriarvon leikepöydälle.
- Värien määritteleminen RGB-koodeina on selitetty esim. RGB Color Values -dokumentissa.
- Navigointipalkille pitää määrittää myös normaalista poikkeava leveys, jotta
se sopii siististi sivun jompaan kumpaan laitaan:
width: 20%;
- Navigointipalkin siirtäminen jompaan kumpaan laitaan onnistuu helposti float-ominaisuudella,
jolla voi liu'uttaa elementin oikeaan (right) tai vasempaan (left) laitaan:
float: right;
- Määrittele oma ulkoasu myös sivun yläosassa olevalle leivänmurunavigoinnille, joka käyttää .navbartop-css-tyyliä. Aseta taustaväriksi #D69C52.
-
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ä olevanul
-listanli
-elementeillä, eli kyseessä on ns. asiayhteyden mukaan määräytyvä tyyli.display
-ominaisuudella muutetaan lista ulkoasultaan tavalliseksi tekstitason (inline)
elementiksi.Tallenna ja kokeile.
- 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;
- 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. Samalla voit lisätä pienen vasemman reunan välistyksen .navbartop-tyyliin, jotta kuva ei ole ihan kiinni lohkon reunassa.
-
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; }
- Siisti .navbar-tyylin sisällä olevaa linkkilistaa. Siirrä lista aivan laatikon vasempaan reunaan.
- Jos tekstit eivät asetu nanonanon kuvan kanssa samaan linjaan, voit vielä
lisätä nanonanon kuvalle seuraavan tyyliasetuksen, joka asettaa kuvan keskelle
riviä:
vertical-align: middle;
- Tallenna CSS-tyylisi ohjaus3.css-tiedostoon.
- Validoi CSS-tiedostosi W3C CSS Validatorilla valitsemalla Web Developer -työkalupalkista Tools | Validate CSS. Korjaa mahdolliset virheet ja varoitukset.
Linkkien muotoilu
- 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 määrittää linkeille yhteiset ominaisuudet.
- a:link määrittää käymättömien linkkien ulkoasun.
- 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:
- Käymättömän linkin väriksi sininen.
- Käydyn linkin väriksi purppura.
- hover-efektiin linkin taustaväriksi #D69C52 ja tekstin väri valkoiseksi.
- Poista lisäksi navigointipalkkien sisällä olevista linkeistä
alleviivaus. Muista poistaa alleviivaus sekä käymättömiltä että käydyiltä linkeiltä.
.navbartop a:link, .navbar a:link { text-decoration: none; /* poistaa alleviivauksen */ }
Jos sama tyylimääritys sopii useampaan paikkaan, niin sama määritys voidaan 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 käymättömien linkkien ja .navbar-tyylin sisällä olevien käymättömien linkkien ulkoasua muutetaan.
- Navigointipalkkien linkkien väritys kannattaa myös määrätä hieman leipätekstin linkeistä eroaviksi. Keksi sopivat väriarvot ja laita ne CSS-tiedostoon samoihin luokkiin, joista poistit alleviivauksen navigointipalkkien linkeiltä.
- Tallenna tyylitiedosto.
Kuvat
Muotoillaan myös ylänavigoinnissa oleva Nanonano-kuvalinkki järkevän näköiseksi.
- Kirjoita asiayhteydestä riippuva tyyli, joka poistaa reunukset ylänavigoinnin sisällä olevilta kuvilta.
- Lisää samaan tyyliin määritys, joka keskittää sisällön pystysuunnassa.
-
Tehdään myös leipätekstissä oleville kuville pieniä muutoksia.
Avaa käyttämääsi editoriin Nanonanon IT ja tietoliikenne -artikkeli. Lisää sivulla olevan kuvan sisältävään p-elementin
class
-attribuuttiin arvo kuva.<p class="kuva">
- Lisää css-tiedostoon .kuva-tyyli, jossa liu'utat (float) kuvan oikeaan laitaan. Määrittele kuvan ympärille siistit marginaalit.
- Kokeile selaimella miten teksti kiertää kuvaa.
- Voit myös halutessasi liu'uttaa address-lohkon oikeaan laitaan samalla tavalla.
- Tallenna tyylitiedostosi.
Testaus
- Validoi tekemäsi CSS-tiedosto valitsemalla Web Developer -työkalupalkista Tools | Validate CSS. Korjaa mahdolliset virheet CSS-tiedostosta.
- Testaa, että kaikki Nanonanon sivut näyttävät järkeviltä Firefox- ja Chrome-selaimilla. Ei tarvitse hätääntyä, jos sivut eivät näytä täysin samanlaisilta jokaisella selaimella. Täysin samanlaiseen ulkoasuun on turha edes pyrkiä, koska selaimia ja käyttöympäristöjä on liian monenlaisia. Oleellisinta on, että sivusto on jokaisella selaimella järkevästi luettavissa.
Lisätehtäviä
Taulukot
Muotoile Nanonanon Opiskelu-sivulla oleva taulukko siistiksi:
- Lisää koko taulukon ympärille raja.
- Lisää jokaisen solun ympärille raja.
- Muotoile otsikkosolut (th) selkeästi erottumaan varsinaisista soluista (td).
- Keskitä otsikkosolujen sisältö.
- Tasaa muiden solujen sisältö solun vasempaan reunaan.
- Muotoile myös taulukon otsikko (caption) sopivaksi.
- Määritä solujen väliin neljän pikselin alue.
- Voit myös laittaa soluille hiukan välistystä (padding).
Käyttäjien kommentit