Siirry sisältöön. | Siirry navigointiin

Jyväskylän yliopiston Koppa

HUOM! Kopan käyttö päättyy 31.7.2024! Lue lisää.


Navigation

Tyylit verkkosivuilla

tekijä: Tanja Tuulikki Välisalo Viimeisin muutos keskiviikko 12. marraskuuta 2014, 21.36

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

  1. html-elementtien yhteydessä style-attribuutin arvoina
  2. html-dokumentin alussa
  3. 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: hrefrel 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.