Tieto- ja viestintätekniikan käyttötaito 2.0 → Verkkosivut ja ohjelmointi
© TvtDok
Tässä luvussa
Laajempia verkkosivustoja luodessa verkkosivun tyylimääritykset eli muotoilut on järkevää pitää erillään verkkosivun rakenteesta ja sisällöstä. Muotoilut kannattaakin yleensä toteuttaa CSS-tyylitiedostojen avulla.
CSS-tyylitiedostoja käytettäessä HTML-tiedostoon merkitään pelkästään verkkosivun elementit, sisältö ja tarvittaessa attribuutteja. Kaikki muotoilut merkitään erilliseen CSS-tiedostoon (tiedoston pääte .css). HTML-tiedostosta viitataan CSS-tiedostoon eli CSS-tiedostosta haetaan muotoilut verkkosivulle. Erillisen tyylitiedoston hyötynä on HTML-tiedoston pysyminen selkeänä sekä se, että samaa tyylitiedostoa voivat käyttää useat HTML-tiedostot. Tällä tavoin esimerkiksi laajan verkkosivuston muotoilut voidaan merkitä yhteen tiedostoon.
CSS-tiedosto linkitetään HTML-tiedostoon sijoittamalla link-elementti HTML-tiedostoon head-elementin sisälle seuraavasti:
<head>
<link rel="stylesheet" type="text/css" href="tyyli.css" />
</head>
Href-ominaisuuden arvoksi määritellään käytettävän tyylitiedoston nimi, joka on esimerkissä tyyli.css. Linkittämisen jälkeen tyyli.css-tiedoston tyylimääritykset tulevat voimaan ja verkkosivulle saadaan halutunlaiset muotoilut.
CSS:n syntaksi eli ns. kielioppi on seuraavanlainen:
elementti {
ominaisuus: arvo;
ominaisuus: arvo;
}
Joskus koodia kirjoittaessa tulee eteen tilanne, että CSS-muotoiluja kirjoittaessa tarvitsee selventää lukijalle, mihin
elementtiin ne vaikuttavat. Tämä on helpointa kommentoimalla koodia. CSS-dokumentissa
voit asettaa kommentteja käyttämällä /* ja */ -merkkejä.
HTML-elementin muotoilua määritettäessä ensin määritellään, mikä ominaisuus on kyseessä ja kaksoispisteen jälkeen ominaisuudelle asetetaan arvo. Arvon jälkeen merkitään puolipiste (;), joka erottaa eri ominaisuudet toisistaan. Elementin muotoilut sijoitetaan aaltosulkeiden sisälle. CSS-tiedostossa voi määrittää muotoiluja tarvittavan määrän eli mikään elementti tai muotoilu ei ole CSS-tiedostossa pakollinen.
Esimerkki tekstielementin väriominaisuuden määrittämisestä mustaksi:
p {
color: black;
}
Mikäli useamman elementin samat ominaisuudet halutaan määritellä samoilla arvoilla, elementit voidaan ryhmitellä pilkuilla eroteltuina:
h2, h3 {
color: red;
text-decoration: underline;
text-align: center;
}
Body-elementin ominaisuuksien määrittelyt tekevät yleiset eli globaalit muotoilut koko verkkosivulle:
body {
margin: 0;
padding: 0;
}
Kokeile yleisiä CSS-muotoiluja TIM-ohjelmointiympäristössä.
Fontti (font-family)
esim. font-family: Arial;
Fontin väri (color)
esim. color: red;
Fontin asettelu (text-align)
esim. text-align: left;
Tekstin asemointi tapahtuu arvoilla left (vasen reuna), right (oikea reuna), center (keskitetty) tai justify (tasaus kumpaankin reunaan).
Fontin koko (font-size)
esim. font-size: 120%;
Huomaa, että 100% on normaalikoko.
Taulukon reunat (border)
esim. border: 2px solid #400222;
Reunoille voidaan määritellä leveys, tyyli ja väri.
Leveys voidaan määritellä arvoilla medium (keskipaksu), thin (ohut), thick (paksu) tai jollain yksiköllä (esim. pikseleinä).
Reunan tyyli voidaan määritellä arvoilla dotted (pisteinä), dashed (viivoitettu), solid (yhtenäinen) tai double (tuplareunus).
Värit voidaan määritellä joko värin nimellä, heksakoodina (alkaa #-merkillä) tai rgb-muodossa. Lue lisää väreistä.
Korkeus (height) ja leveys (width)
esim. width: 100%;
esim. padding: 4em;
Määritykset marginaalille ja täytteelle tehdään samalla tavalla ja asetetut määrittelyt koskevat automaattisesti jokaista neljää sivua.
Voit kokeilla marginaalia ja täytettä TIM-ohjelmointiympäristössä.
Jos halutaan määritellä vain yhden sivun arvo, voidaan käyttää tarkempia ilmauksia:
margin-top / padding-top,
margin-left / padding-left,
margin-right / padding-right,
margin-bottom / padding-bottom
esim. float: right;
Voidaan käyttää esim. kuva-, div- ja linkkielementtien asemointiin.
Asemointi tapahtuu arvoilla left (vasemmalle) tai right (oikealle).
Absoluuttisia mittayksiköitä
Suhteellisia mittayksiköitä
CSS-tiedostossa voidaan määritellä esimerkiksi fontin kokoa, marginaalia tai täytettä erilaisilla yksiköillä. Mittayksiköitä on kahdenlaisia: absoluuttisia ja suhteellisia. Absoluuttiset mittayksiköt ovat aina tietyn mittaisia riippumatta siitä, missä niitä käytetään. Suhteelliset mittayksiköt määrittyvät tapauskohtaisesti eli sen mukaan, missä niitä käytetään. Suhteelliset mittayksiköt määrittyvät siis aina suhteessa johonkin muuhun. Yleensä suhteellisia mittayksiköitä kannattaa suosia.
Fonttikoko määritellään yleensä suhteessa oletusfontin kokoon em-yksikkönä tai prosentteina. Marginaali ja täyte taas määritellään pikseleinä tai suhteessa oletusfontin kokoon em-yksikköinä tai vastaavasti suhteessa selainikkunan kokoon prosentteina. Yksikköjä määriteltäessä luku ja yksikkö kirjoitetaan yhteen ilman välilyöntiä.
Esimerkki tekstielementin fontin ja täytteen koon määrittelystä:
p {
font-size: 0.8em;
padding: 10px;
}
Jatketaan edellisessä luvussa aloitetun CV:n työstämistä.
Luokka-attribuuttia käsiteltiin edellisessä luvussa. Voit käydä kertaamassa asiaa HTML:n perusteet luvusta.
CSS:n avulla yksittäistä luokka-attribuuttia ja siihen kuuluvia elementtejä voidaan muotoilla helposti
samanlaisiksi ja samalla kertaa. Esimerkiksi tekstielementtiä, joka kuuluu sisalto-nimiseen luokkaan
(HTML-tiedostoon merkitty <p class="sisalto">Tekstikappale</p>), voidaan muotoilla seuraavasti:
.sisalto {
float: left;
text-align: center;
width: 75%;
}
Luokka-attribuutti ilmoitetaan CSS-tiedostossa laittamalla luokan nimen eteen piste. Jos p-elementille määritellyissä muotoiluissa
on päällekkäisyyksiä sisalto-luokalle määriteltyjen muotoilujen kanssa,
voimaan jäävät sisalto-luokan muotoilut. Luokalle määritellyt muotoilut siis ylikirjoittavat eli kumoavat elementeille määritellyt muotoilut.
Kokeile luokkien muotoilemista TIM-ohjelmointiympäristössä.
HTML-merkintäkieltä ja CSS-tyylimäärittelyitä kirjoittaessa syntaksiin voi helposti tulla virheitä. Jos HTML-tiedostossa on syntaksivirheitä, voi verkkosivun ulkoasu näyttää virheelliseltä. Verkkosivun syntaksin oikeellisuuden eli validisuuden voi tarkistaa helposti internetissä löytyvän validaattorin avulla. Tarkistaminen tapahtuu seuraavasti:
Syötettyäsi verkko-osoitteen tai ladattuasi tiedoston avautuu verkkosivu, joka kertoo englanniksi, oliko verkkosivullasi virheitä. Validaattori kertoo virheiden lukumäärän, millaisia virheet ovat ja millä rivillä HTML-tiedostossa virheet sijaitsevat. Saadun informaation perusteella pystyt tarvittaessa korjaamaan HTML-tiedostosi validiksi. Tarkista korjausten jälkeen HTML-tiedostosi validaattorilla vielä uudelleen.
Edellä kuvattu validaattori tarkistaa vain verkkosivun HTML-tiedoston sisällön, mutta ei puutu mahdollisiin CSS-tiedoston syntaksivirheisiin. CSS-tiedoston tarkistamiseen löytyy myös oma validaattori internetistä ja se toimii samalla tavalla kuin HTML-validaattori. Tarkistaminen tapahtuu seuraavasti:
Jatketaan edellisessä tehtävässä tehdyn CSS-tiedoston muokkaamista.