Cascading Style Sheets (CSS) - Luento 13

Tällä luennolla käsitellään WWW-sivujen ulkoasun muokkaamista CSS-tiedostojen avulla.

CSS (Cascading Style Sheets)

Esimerkkejä

Tyylitiedoston liittäminen dokumenttiin

XHTML-dokumentin otsikkotietoihin (head) lisätään seuraava määritys:

  <link href="tyylit.css" rel="stylesheet" type="text/css"  media="all" />

all-media tarkoittaa, että asetuksia käytetään kaikille medioille. all-median asetuksia voidaan ylikirjoittaa tarvittaessa muissa medioissa. Muiden medioiden tyylitiedostot pitää muistaa linkittää XHTML-tiedostoon all-median linkityksen jälkeen, koska tyylit otetaan käyttöön ylhäältä alas periaatteella. Viimeisenä käyttöön tulee siis viimeiseksi liitetty tiedosto.

Tulostustyylit:

<link rel="StyleSheet" href="print.css" type="text/css" media="print" />

Tietokoneen näytön media on screen.

CSS-Syntaksi

Perusperiaate on muuttaa olemassaolevien XHTML-elementtien ulkoasun ominaisuuksia.

Ominaisuuksilla saattaa olla olemassa selainkohtaiset alkuarvot (kuten esim. että tausta on valkoinen ja teksti musta body-lohkossa).

Ominaisuuksia voidaan muokata suoraan kirjoittamalla sääntöjä CSS-muotoiseen tekstitiedostoon. Muoto on määritelty CSS-suosituksessa.

tyylinimi {

  ominaisuus: arvo;

}

Esimerkki

body {
  color:  black;
  background-color:  white;
}

Esim. määritellään kaikille otsikkotasoille sama fontti, väri ja alaviiva:

h1, h2, h3, h4, h5, h6 {
  font-family: Verdana, sans-serif;
  color: blue;
  border-bottom: 1px solid black;
}

Isompi esimerkki

Esimerkki CSS-tiedostosta

Perintä

Dokumenttipuun elementit perivät esim. tekstin värin äitielementiltään:

<h1><strong>CSS</strong> on iso juttu.</h1>

strong-elementti saa saman tekstin värin kuin mikä h1-elementillä on, ellei väriä ole strong-elementille erikseen määrätty. Aivan kaikki ominaisuudet eivät kuitenkaan periydy.

Mittayksiköt

Pituudet ja korkeudet kannattaa aina ilmaista suhteellisesti prosentteina tai em-yksikköinä. em suhteutetaan aina oletusfontin kokoon.

px (pikseli) -yksikköä voi käyttää pienten (alle 5 px) reunusten ja marginaalien määrittelyssä sekä kuville tarkoitettujen lohkojen leveyksissä ja korkeuksissa, mutta sitä ei suositella käytettäväksi kirjasimen koon määrittämiseen. 

p {
  font-size: 120%;
}

h1 {
  margin-top: 1em;
}

h2 {
  border: 1px solid black;
}

Sivuilla käytettävät värit

Värien määrittämisessä on käytössä useita tapoja. Yksi tapa on käyttää prosentteja: 

p {
  background-color: rgb(100%, 100%, 100%); /* valkoinen */
}

Perusvärit voidaan myös kirjoittaa suoraan nimillä: 

p {
  background-color: blue; /* sininen */
}

Yksi käytetty tapa on antaa värit RGB-arvoina: 

p {
  background-color: #FF0000; /* punainen */
}

Kommentit

Kommentointi CSS-tyylitiedostossa onnistuu c-kielestä tutulla tavalla:

strong { /* Korostamiseen käytettävä tyyli */
  background-color: white;
  color: red;
}

CSS1:n ominaisuudet

Tyylien valitsimet (engl. selectors)

Luokat (class) valitsimina

class-attribuutin avulla voidaan XHTML-elementti määrätä käyttämään tiettyä tyyliä. Esim.

<p>Normaalitekstiä kappaleellinen</p>
<p class="varoitus">varoitus</p>

Vastaavat tyylimääritykset

p {
  background-color: white;
  color: green;
  text-align: center;
}

p.varoitus {
  background-color: white;
  color: red;
}

Edellisen valitsimen yleistys, jota voidaan käyttää kaikkien elementtien yhteydessä.

.varoitus {
  background-color: white;
  color: red;
}

Elementin yhteyteen määritelty valitsin on "vahvempi" kuin yleistetty valitsin. Siispä alla olevilla tyylimäärityksillä tekstikappaleen väriksi tulisi punainen, vaikka yleistetty valitsin tulee tyylitiedostossa vasta elementin yhteyteen määritetyn valitsimen jälkeen.

p {
  background-color: white;
  color: green;
  text-align: center;
}

p.varoitus {
  background-color: white;
  color: red;
}

.varoitus {
  background-color: white;
  color: blue;
}

Tyylien valitsimien yhteydessä perintä tarkoittaa sitä, että voit luoda luokkia (class) jokaisesta elementistä. Kaikki luokat perivät joitakin ominaisuuksia peruselementiltä (paitsi, jos uusia arvoja määritetään vanhojen tilalle tai ominaisuus ei ole perittävissä).

Esimerkki tyylin aliluokan käytöstä

Asiayhteyden mukaan määräytyvät tyylit

Tyylien avulla voidaan määritellä asiayhteyden mukaan käyttäytyviä tyylejä. Eräs tällainen esimerkki on p-elementin sisällä oleva strong-elementti.

p-elementin sisällä oleva strong-elementti muotoillaan seuraavan säännön mukaisesti:

p strong {
  background-color: white;
  color: red;
}

Esimerkki asiayhteyden mukaan määräytyvästä tyylistä

Pseudoluokat

Pseudoluokat ovat tyylien erikoistapauksia, joilla saadaan esimerkiksi linkille tapauskohtainen käyttäytyminen sen mukaan, onko linkki vierailtu vai ei.

a:link {  /* vierailematon linkki */
  color: blue;
  background-color: transparent;
}

a:visited {  /* vierailtu linkki */
  color: purple;
  background-color: transparent;
}

a:active {  /* aktiivinen linkki */
  color: red;
  background-color: transparent;
}

a:hover {  /* kohdistettu linkki */
  color: blue;
  background-color: grey;
}

Esimerkki pseudoluokkien käytöstä

Asemointi

Asemointia voidaan tehdä elementtien marginaaleilla, float-ominaisuudella ja position-ominaisuudella.

Asemoinnin onnistumiseksi on kuitenkin ymmärrettävä CSS:n laatikkomalli sekä erilaiset display-asetukset

display-ominaisuus

Normaalisti block-level-elementit (kappaletason elementit esim. h1, p) järjestyvät allekkain äitilohkon vasempaan laitaan ja inline-elementit (tekstitason elementit esim. a, strong) vierekkäin, kunnes äitilohkon leveys on täyttynyt. CSS-ominaisuuksilla voidaan kuitenkin irrottaa tietyt elementit perusjärjestyksestä ja asemoida ne sivulle uuteen paikkaan.

display-ominaisuudella voidaan muuttaa esimerkiksi tekstikappaleen näkymiseen liittyviä ominaisuuksia. Tekstikappaleesta voidaan tehdä visuaalisesti osa toista tekstikappaletta tai sen näkyminen voidaan estää kokonaan. display-ominaisuudelle voidaan asettaa esim. seuraavia arvoja:

Esimerkki keskittämisestä pystysuunnassa display-ominaisuuden avulla

Lisätietoa display-ominaisuudesta: http://www.w3.org/TR/CSS21/visuren.html#display-prop

Laatikkomalli (engl. box model)

CSS:n laatikkomalli määrittää jokaisen elementin laatikoksi, jolla on marginaali, raja, täyte ja sisältö.

Sivulla olevien elementtien rajat saat näkyviin esimerkiksi asentamalla Firefoxiin Web Developer -pluginin. Laatikkomallin saa näkyviin Web Developerissa valinnalla Outline | Outline Block Level Elements.

Esimerkki FireBugin käytöstä tyylien määrittämisessä (Inspect-toiminto, Style-välilehti, Layout-välilehti)

Esimerkki CSS:n editoimisesta dynaamisesti Web Developerin avulla

Liu'utus

Liu'utus eli float-ominaisuuden käyttäminen on yksinkertaisin ja helpoin tapa asemoida.

liu'utettu elementti poistuu normaalista dokumenttivirrasta sivun jompaan kumpaan laitan. Muu sisältö kiertää elementin automaattisesti.

float: left;

Kuvien liu'utus (esimerkki)

Lisätietoa: float- ja clear-ominaisuudet

Asemointi position-ominaisuudella

position-ominaisuudella voidaan määritellä kuinka elementti sijoittuu näytölle. Erilaisia arvoja ovat seuraavat:

Lisätietoa: position-ominaisuus

Positioinnin yhteydessä määritellään usein myös seuraavat ominaisuudet:

Lisätietoa: position-ominaisuuden kanssa tarvittavat ominaisuudet

Absoluuttinen asemointi (engl. absolute positioning)

Absoluuttisessa (engl. absolute) asemoinnissa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla absoluuttisesti tai kiinteästi asemoidun äiti-elementin sisällä välittämättä normaalista sijainnista.

Absoluuttisesti asemoitu elementti vierii dokumentin sisällön mukana.

.vasenylanurkka {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 30%;
  height: 10%;
}

Vierivä kehyksien korvike

Kiinnitetty asemointi (engl. fixed positioning)

Kiinnitetyssä (engl. fixed) asemoinnissa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla absoluuttisesti näyttöalueen sisällä.

Asemoitu elementti EI vieri dokumentin sisällön mukana.

Paljon tilaa vieviä lohkoja ei yleensä kannata kiinnittää näyttöön, koska ne vievät paljon tilaa sivun muulta sisällöltä.

Kiinnitetty asemointi ei toimi Internet Explorerissa 6:ssa, mutta versioissa 7-9 toimii.

.vasenylanurkka {
  position: fixed;
  top: 10%;
  left: 10%;
  width: 30%;
  height: 10%;
}

Kiinnitetty asemointi -esimerkki

Suhteellinen asemointi (engl. relative positioning)

Suhteellisessa (engl. relative) asemoinnissa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla suhteutettuna normaaliin sijaintiinsa. 

.up {
  position: relative;
  top: -1em;
}

Asemointi z-suunnassa

z-index-ominaisuudella voidaan määritellä elementin taso ruudulla. Mitä suurempi arvo, niin sitä lähempänä elementti on käyttäjää. Ominaisuus toimii vain position-asemoitujen lohkojen kanssa.

Asemointiesimerkkejä

Asemoinnin suunnittelu

CSS 2.1 (ja toki jo CSS2) antaa useita erilaisia mahdollisuuksia WWW-sivujen visuaaliseen muotoilemiseen. Käytetystä tavasta huolimatta sivu kannattaa suunnitella seuraavan ohjeistuksen mukaan:

Lisätietoa

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/tyovaline/luennot/luento13/
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2012-08-13 12:33:01
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta