Tyylit verkkosivuilla
Tyylien käyttö verkkosivuilla
Tyylimääritykset kertovat, miltä WWW-sivut näyttävät. Erilaisista tyylien merkinnän tavoista yleisin on CSS.
Tyylimerkinnät voivat olla
- html-elementtien yhteydessä style-attribuutin arvoina
- html-dokumentin alussa
- erillisessä css-tiedostossa, jonne on linkki verkkosivulta
Nämä tavat eivät ole toisensa poissulkevia. Em. järjestys on myös ensisijaisuusjärjestys. Jos saman elementin ulkoasulle on määritelty tyyli sekä erilliesssä css-tiedostossa että html-tiedostossa, niin verkkoselain noudattaa html-tiedostossa olevia merkintöjä.
Työmäärällisesti tehokkainta on kaikkien tyylimerkintöjen vieminen yhteen css-tiedostoon.
Tyylimäärittelyn tekeminen ei ole välttämätöntä. Jos ulkoasua ei määritellä, käyttää verkkosivu kulloisenkin selaimen oletusfontteja ja -värejä. Käyttäjä voi itsekin määritellä selaimelleen oletustyylin.
Tyylitiedoston luominen ja linkittäminen verkkosivulle
Myös CSS-dokumenttien työstämiseen löytyy useita eri ohjelmia. CSS-dokumentteja voi luoda yksinkertaisesti tekstieditorilla, esim. Windows-järjestelmän apuohjelmalla Notepadilla. Useimmissa HTML-editoreissa, kuten HTML-Kitissä ja Amayassa, on mahdollista laatia myös CSS-tiedostoja.
Tyylitiedosto linkitetään verkkosivulle lisäämällä head-elementin sisälle elementti link. Elementillä on kolme pakollista attribuuttia: href, rel ja type. Attribuutin href arvoksi tulee polku tyylitiedostoon.
Esim. Html-sivun tyylien määrittely styles.css-tiedoston avulla
<link href="styles.css" rel="stylesheet" type="text/css" />
Tehtävä
- Luo uusi css-tiedosto ja anna sille nimeksi tyylit.css.
- Avaa tiedosto index.html.
- Lisää link-elementti head-elementin sisään ja määritä tyylitiedostoksi äsken luomasi css-tiedosto.
Tyylimerkintöjen tekemistä helpottavia työkaluja löytyy
- Amayassa yläpalkin kuvakkeesta CSS
- HTML-Kitissä Style-välilehdeltä
Materiaalin on laatinut Tanja Välisalo.