Menthal27

CSS 2.1

Mitä CSS on?

CSS (lyhenne englannin kielen sanoista cascading style sheet) on kuvailukieli, jolla määritetään mm. XHTML:llä ja HTML:llä rakennetuille sivuille ulkoasu. CSS:n avulla voidaan määrittää esimerkiksi taustakuvia ja -värejä, reunuksia, marginaaleja, fontteja ja läpinäkyvyyttä. Muotoilut voidaan halutessa kohdistaa esimerkiksi yksittäisiin www-sivuilla näkyviin sanoihin, kuviin, laatikoihin tai muihin elementteihin.

Www-sivuja ei voi kuitenkaan rakentaa pelkän CSS:n avulla. CSS keskittyy pelkkään ulkoasun kuvailuun, eikä sen avulla voi lisätä sivulle esimerkiksi tekstiä. CSS onkin kotisivujen yhteydessä lähinnä XHTML:n ja HTML:n jatke, jonka avulla sivut saadaan kauniimman näköisiksi. Taitava kotisivuntekijä osaa rakentaa sivunsa niin, että ne ovat selkeät ja helppokäyttöiset myös silloin, kun CSS ei ole käytössä.

Toistaiseksi CSS:stä on olemassa kolme versiota. Ensimmäisen version (1.0) suositus julkaistiin vuonna 1996 ja toisen (2.0) vuonna 1998. Kolmas versio on oikeastaan tarkenne toiseen versioon, ja onkin siksi versionumeroltaan 2.1. Versioiden 2.0 ja 2.1 suurin ero on siinä, että versiosta 2.1 on poistettu joukko 2.0:n muotoiluja, joita selaimet eivät koskaan tukeneet kunnolla. CSS 3 on myös kehitteillä, mutta sen suositusta ei ole vielä julkaistu.

CSS ja eri selaimet

Www-sivujen selaamiseen ja katselemiseen tarvitaan erityinen ohjelma, selain. Erilaisia selaimia — niin ilmaisia kuin maksullisiakin — on tarjolla kymmeniä, ellei satoja, mutta suurin osa ihmisistä käyttää jotakin niin sanotuista valtaselaimista, joiden yhteenlaskettu osuus selainmarkkinoilla on yli 90 prosenttia. Valtaselaimia ovat mm. Microsoft Windowsin mukana tuleva Internet Explorer sekä yhä yleistyvä Mozilla Firefox. Melko yleisiä ovat myös norjalainen Opera sekä Applen Safari.

Eri selaimet näyttävät CSS-muotoilut hieman eri tavoin. Hyvänä esimerkkinä voidaan pitää tekstin kokoa: vaikka tekstin koko olisi määritetty hyvinkin tarkasti, eri selaimet näyttävät tekstin yleensä hieman eri kokoisena.

Toisinaan jokin selain ei tue jotakin CSS-muotoilua lainkaan. Internet Explorer ei esimerkiksi ymmärrä läpinäkyvää taustaa, vaikka kyseessä on aivan tavallinen CSS-muotoilu, joka toimii hyvin muilla selaimilla. Muotoiluja voidaan myös näyttää ja tulkita väärin tai vajaasti. Esimerkiksi Internet Explorer 6 ymmärtää periaatteessa korkeutta ja leveyttä koskevat muotoilut, mutta näyttään niiden yhteydessä marginaalit väärin.

Tämän vuoksi on tärkeää testata www-sivujensa toimivuutta eri selaimilla. Vaikka sivu toimisi loistavasti yhdellä selaimella, se ei välttämättä tarkoita, että sivu näkyisi myös vierailijoille oikein.

Tällä hetkellä Safari ja Opera tulkkaavat CSS:ää parhaiten ja Internet Explorer 6 huonoiten. Internet Explorer 7:n myötä IE:n CSS-tuki on hieman parantunut, mutta yleisimmistä selaimista sen CSS-tuki on yhä huonoin. Usein www-sivu näkyykin oikein niin Operalla, Firefoxilla, Safarilla kuin monilla muillakin selaimilla, mutta väärin Internet Explorerilla. Sivun saaminen toimivaksi sekä IE:llä että muilla selaimilla voi joskus olla vaikeaa, mutta tähän on olemassa omat vippaskonstinsa.

Tähän CSS-oppaaseen on pyritty merkitsemään jokaisen muotoilun toimivuus yleisimmillä selaimilla. Merkinnät ovat seuraavat:

Toimii IE 6:lla Muotoilu toimii Internet Explorer 6:lla.
Toimii osittain IE 6:lla Muotoilu toimii osittain tai vajaasti Internet Explorer 6:lla.
Ei toimi IE 6:lla Muotoilu ei toimi Internet Explorer 6:lla.
Toimii IE 7:llä Muotoilu toimii Internet Explorer 7:llä.
Toimii osittain IE 7:llä Muotoilu toimii osittain tai vajaasti Internet Explorer 7:llä.
Ei toimi IE 7:llä Muotoilu ei toimi Internet Explorer 7:llä.
Toimii FF 2:lla Muotoilu toimii Mozilla Firefox 2:lla.
Toimii osittain FF 2:lla Muotoilu toimii osittain tai vajaasti Mozilla Firefox 2:lla.
Ei toimi FF 2:lla Muotoilu ei toimi Mozilla Firefox 2:lla.
Toimii Opera 9:llä Muotoilu toimii Opera 9:llä.
Toimii osittain Opera 9:llä Muotoilu toimii osittain tai vajaasti Opera 9:llä.
Ei toimi Opera 9:llä Muotoilu ei toimi Opera 9:llä.
Toimii Safari 3:lla Muotoilu toimii Safari 3:lla.
Toimii osittainSafari 3:lla Muotoilu toimii osittain tai vajaasti Safari 3:lla.
Ei toimi Safari 3:lla Muotoilu ei toimi Safari 3:lla.

Mikäli jokin muotoilu toimii jollakin selaimella osittain tai vajaasti, kyseisen muotoilun kohdalla on yleensä tarkempi selostus asiasta. Jollakin tietyllä selaimella toimimattomat muotoilun arvot on yleensä merkitty tähdellä.

Yleiset kielioppisäännöt

Muotoilu eli määre ja sen arvo

Muotoilulla eli määreellä tarkoitetaan tässä oppaassa sellaista CSS-koodin peruspalaa, joka vaikuttaa tiettyyn ominaisuuteen. Esimerkiksi color vaikuttaa tekstin väriin ja background-image taustakuvaan. Muotoilun arvo puolestaan on CSS-koodin osa, joka tarkentaa itse perusmuotoilua. Esimerkiksi color-muotoilun arvo yellow määrittää tekstin väriksi keltaisen.

CSS-koodiin merkitään ensin muotoilu ja sitten sen arvo. Nämä kaksi erotetaan toisistaan kaksoispisteellä:

muotoilu:arvo

Tässä oppaassa muotoilut ja arvot on esitetty taulukkomuodossa seuraavan esimerkin mukaisesti:

Esimerkkikuva CSS-muotoilun arvojen taulukoinnista

Auki purettuna tämä tarkoittaa sitä, että tekstin kursivointiin voi vaikuttaa seuraavilla muotoilu/arvo -yhdistelmillä:

font-style:italic
font-style:oblique
font-style:normal
font-style:inherit

Pääsääntönä voidaan pitää, että arvoista voi käyttää vain yhtä kerrallaan. On esimerkiksi väärin määrittää samalle elementille sekä font-style:oblique että font-style:normal. Myös arvojen yhdistely, esimerkiksi font-style:italic normal, on kielioppisääntöjen vastaista.

Jotkin muotoilut voivat saada useita arvoja yhtä aikaa, mutta ne on merkitty oppaaseen erikseen. Esimerkiksi marginin voi määrittää samalla kertaa kaikille neljälle sivulle ilmoittamalla sille neljä arvoa: margin:10px 20px 1em 5pt.

Muotoilujen erottaminen toisistaan

Mikäli samalle elementille määritetään useita CSS-muotoiluja, muotoilut erotetaan toisistaan puolipisteellä.

muotoilu:arvo;
toinen_muotoilu:arvo;

Esimerkiksi:

font-style:italic;
color:red;
background:black;

Arvon nollasääntö

Mikäli muotoilu saa arvokseen nollan, käytettyä yksikköä (esimerkiksi % tai px) ei tarvitse ilmoittaa. Sen ilmoittaminen ei kuitenkaan ole kiellettyä.

Esimerkiksi seuraavat kaksi muotoilua tarkoittavat täsmälleen samaa ja ovat molemmat oikein:

margin:0px;
margin:0;

Mikäli arvo on numero mutta ei 0, yksikkö tulee aina ilmoittaa. Ainoan poikkeuksen muodostaa riviväli.

Esimerkiksi:

OIKEIN:
margin:7pt;

VÄÄRIN:
margin:7;

Muotoilun merkitseminen tärkeäksi

Joskus www-sivuun voi vaikuttaa useita ristiriitaisia CSS-muotoiluja. Tämä voi johtua esimerkiksi siitä, että sivulla vierailija käyttää selaimessaan omaa tyylitiedostoa. Merkitsemällä tietyn muotoilun tärkeäksi voi vaikuttaa sen painoarvoon mahdollisissa ristiriitatilanteissa.

Yleensä selain pitää tärkeimpinä CSS-muotoiluina selaimen käyttäjän omia, tärkeiksi merkittyjä CSS-määrittelyjä. Mikäli ne menevät päällekkäin katsellun sivun CSS-muotoilujen kanssa, sivun omat CSS-muotoilut sivuutetaan, ja käytetään käyttäjän omaa tyylitiedostoa. Toiseksi tärkeimpiä muotoiluja ovat sivun omat, tärkeiksi merkityt CSS-muotoilut, ja kolmanneksi tärkeimpiä sivun omat (tavalliset) muotoilut. Käyttäjän omia, ei-tärkeiksi merkittyjä muotoiluja käytetään vain, mikäli sivun lähdekoodissa ei ole määritetty niiden kanssa päällekkäisiä muotoiluja.

Muotoilu merkitään tärkeäksi kirjoittamalla !important ennen eri muotoiluja erottavaa puolipistettä:

font-style:italic !important;
color:red;
font-weight:bold;
background:blue !important;

Yllä on merkitty ensimmäinen ja viimeinen muotoilu tärkeiksi.

CSS-koodin kommentointi

Halutessaan CSS-koodia voi kommentoida kirjoittamalla merkintöjen /* ja */ väliin. Kommentti voi käsittää useita rivejä, mutta se ei saa olla CSS-muotoilun ja sen arvon välissä.

Esimerkiksi:

OIKEIN:

/* Navigaatiolinkkien ulkoasu */

a:link.navigaatio {
   color:#000; /* Määritetään linkkien väri mustaksi */
/* kursori */   cursor:crosshair;
   text-decoration:underline;
/* kommentti voi käsittää myös
useita rivejä tai vaikkapa
koodia, joka ei kuitenkaan
vaikuta ollessaan kommentin
sisällä:
border:1px solid red; */
}
VÄÄRIN:
color:/*kommentti*/black;

Mikä inherit?

Jotkin CSS-muotoilut, kuten tekstin väri, periytyvät oletuksena ylemmiltä elementeiltä. Jos esimerkiksi määrität body-elementin tekstin väriksi punaisen, koko sivun tekstit värjäytyvät punaisiksi, ellet erikseen määritä niiden tekstin väriksi jotakin muuta.

Toiset muotoilut taas, kuten taustaväri, eivät periydy alemmille elementeille. Vaikka bodyn taustaväriksi määritettäisiinkin musta, kaikki sen sisällä olevat elementit eivät saa mustaa taustaa.

CSS:n inherit-arvon avulla muotoilut voidaan määrätä periytymään ylemmiltä elementeiltä silloinkin, kun ne eivät sitä normaalisti tekisi. Jos esimerkiksi body-elementin tausta on musta ja sen sisällä on kappalejako, voidaan kappalejaon taustaväriksi määrittää musta määrittämällä taustamuotoilun arvoksi inherit. Oletuksena kappalejaolla ei ole taustaväriä.

Inherit-arvoa voi käyttää kaikkien CSS-muotoilujen yhteydessä.

Esimerkiksi:

background:inherit;
color:inherit;
border-style:inherit;
font-style:inherit;
line-height:inherit;

CSS:n liittäminen www-sivulle

Yksittäiselle sivulle (style-tagit)

CSS-muotoiluja voi liittää yksittäiselle www-sivulle head-tagien väliin sijoitettavien style-tagien avulla. Style-tageja voidaan käyttää sekä HTML- että XHTML-sivulla, mutta näiden merkintätavat eroavat hieman toisistaan.

HTML:

<style type="text/css">
<!--
CSS TÄHÄN
-->
</style>

XHTML:

<style type="text/css">
/*<![CDATA[*/
CSS TÄHÄN
/*]]>*/
</style>

Yksittäiseen elementtiin (style-attribuutti)

CSS-muotoiluja voi liittää yksittäisiin HTML- tai XHTML-elementteihin erityisen style-attribuutin avulla. Tällöin ei voida kuitenkaan käyttää valitsimia.

Teoriassa:

<elementti style="CSS-muotoilut tähän">Eelementin sisältö</elementti>

Käytännössä esimerkiksi:

<span style="color:#e56;font-weight:bold;">Pienet vihreät miehet</span>

Ulkoisena CSS-tiedostona

Ulkoinen CSS-tiedosto on tiedosto, jonka tiedostopääte on .css. Sen sisältämät CSS-muotoilut voidaan lisätä sivulle erityisen link-elementin avulla (XHTML).

Käytännössä tämä tapahtuu seuraavalla head-tagien väliin asetettavalla koodipätkällä (huomaathan, että koodi poikkeaa toisistaan XHTML:ssä ja HTML:ssä):

XHTML:
<link rel="stylesheet" href="ulkoisen CSS-tiedoston osoite" type="text/css" />

HTML:
<link rel="stylesheet" href="ulkoisen CSS-tiedoston osoite" type="text/css">

Samalla sivulla voi olla myös useita, keskenään vaihtoehtoisia tyylitiedostoja. Tällöin vierailija voi itse valita selaimensa asetuksista käytettävän tyylitiedoston. Vaihtoehtoisten tyylitiedostojen linkittämisen yhteydessä niille tulee vaihtaa rel-attribuutin arvoksi alternate.

Vaihtoehtoinen tyylitiedosto (XHTML):
<link rel="alternate" href="ulkoisen CSS-tiedoston osoite" type="text/css" />

Oletustyylitiedosto (XHTML):
<link rel="stylesheet" href="ulkoisen CSS-tiedoston osoite" type="text/css" />

Tyylitiedostoille voi antaa myös otsikon. Otsikko näkyy mm. selaimen valikossa, jossa listataan kaikki tarjolla olevat CSS-tyylit.

<link rel="stylesheet" href="ulkoisen CSS-tiedoston osoite" title="Otsikko" type="text/css" />

Ulkoisena CSS-tiedostona @import-säännön avulla

Ulkoinen CSS-tiedosto voidaan liittää yksittäiselle www-sivulle myös erityisen @import-säännön avulla. Lisätietoa Valitsimet-osiossa.

CSS-muotoiluissa käytetyt mittayksiköt

Cm (senttimetri)

Mikäli jonkin koon määrittää CSS:llä senttimetreissä, se on "fyysisesti" aina samankokoinen riippumatta siitä, millä resoluutiolla, näytöllä tai laitteella sitä katsotaan. Toisin sanoen: katsoit senttimetreissä määritettyä objektia minkä laitteiston läpi tahansa, se on aina saman mittainen, jos mittaat sen viivaimella.

Koska kuvien, tekstien ja muun sisällön koko muuttuu resoluution, näytön koon ja vastaavien seikkojen vuoksi, senttimetreissä määritetyt mitat eivät aina ole suhteessa saman kokoisia kuin muu sivu.

Deg (aste)

Käytetään äänimäärittelyissä. Ilmoittaa kulman (0-360 astetta). Myös negatiiviset arvot, kuten -90deg, ovat sallittuja.

Em

Merkintätapa, jossa mittana toimii tekstin M-kirjaimen koko. Esimerkiksi 1.5em on puolitoista kertaa niin suuri kuin fontin m-kirjain. Kun tekstin koko suurenee, myös M-kirjaimet suurenevat, jolloin myös yksikkö "1em" suurenee. Tämän vuoksi yksikköä kutsutaan suhteelliseksi. 1em voi olla eri kokoinen samalla sivulla esiintyvien eri kappaleiden sisällä riippuen siitä, minkä kokoista teksti näiden kappaleiden sisällä on.

Ex

Muuten vastaava kuin em, mutta yksikkö perustuu M-kirjaimen koon sijaan x-kirjaimen kokoon.

Grad

Käytetään äänimäärittelyissä. Ilmoittaa kulman (0-400).

Hz (hertsi)

Käytetään äänimäärittelyissä. Ilmoittaa äänen taajuuden.

In (tuuma)

Toimii kuten senttimetri. Tuuma on noin 2,54 senttimetriä.

Khz (kilohertsi)

Käytetään äänimäärittelyissä. Ilmoittaa äänen taajuuden.

Mm (millimetri)

Millimetri on 1/10 senttimetristä ja toimii CSS-muotoiluissa senttimetrin tavoin.

Ms (millisekunti)

Käytetään äänimäärittelyissä.

Pc (pica)

Toimii kuten senttimetri. Pica on 1/12 pisteestä eli 1/864 tuumaa.

Prosentti eli %

Em:n ja ex:n tapaan suhteellinen yksikkö, jossa 100 % on tekstin kohdalla alkutilanne. Näin ollen teksti, jonka kooksi määritetään 110 %, on 1,1 kertaa niin suuri kuin mitä se ilman muotoilua olisi.

Leveyksissä ja korkeuksissa prosentit lasketaan vapaana olevan tilan mukaan. Mikäli esimerkiksi tavallinen tekstikappale (<p>) on tyhjällä sivulla ja sen leveydeksi määritetään 50 %, sen leveys on tasan puolet ikkunan leveydestä ja muuttuu sen mukaan, kun ikkunan kokoa vaihtaa. Jos taas tekstikappale, jonka leveys on 50 %, on laitettu 400 pikseliä leveän elementin sisälle, tekstikappaleen leveys on tasan puolet isäntäelementin leveydestä eli 200.

Pt (piste)

Toimii kuten senttimetri. Piste on 1/72 tuumasta.

Px (pikseli)

Px on lyhenne pikselille. Pikseli puolestaan on pienin yksittäinen piste, jonka näyttö (tietokoneen ruutu) voi näyttää. Jokaisella näytöllä on niin sanottu resoluutio, joka kertoo, montako kuvapistettä näytölle mahtuu pysty- ja vaakasuunnassa. Yleisin resoluutio on tällä hetkellä 1024 (leveys) x 768 (korkeus). Muita yleisiä ovat esimerkiksi 800 x 600 ja 1280×1024.

Pikselien kanssa kannattaa olla varovainen. Yleensä millekään elementille ei kannata antaa leveydeksi enempää kuin 750 pikseliä, koska muussa tapauksessa pienimmillä resoluutioilla (esimerkiksi 800 x 600) liikkuvilla ihmisillä elementti menee ulos näytöstä ja sitä joutuu vierittämään näkyviin vierityspalkin avulla.

Rad (radiaani)

Käytetään äänimäärittelyissä. Ilmoittaa kulman (0-2p).

S (sekunti)

Käytetään äänimäärittelyissä.

  

Menthal27 © Sonja Valkeinen 2002-2008. Shadows. WP. Takaisin sivun alkuun.