HTML & CSS aloittelijoille (Osa 31): Värit ja taustat

Väri on esitetty color-ominaisuudella. Värit voidaan esittää monin eri tavoin. Yleensä käytetään heksadesimaalilukuja. Nämä arvot alkavat aina risulla. Perässä on yleensä kolme numeroparia ja/tai kirjainparia, jotka edustavat punaista, vihreää ja sinistä. Väri-ilmaukset noudattavat aina seuraavaa kaavaa:

RRGGBB

Ilmaisulla #ffffff saadaan valkoinen väri. Jos käytetään sen sijaan #000000, musta väri näytetään. "Järkevissä" HTML-muokkaimissa on väripyöristä vastaavat valitsimet.

Voi löytää heksadesimaalikoodit. Lisäksi on useita verkkosivuja (esim. http://www.farbtabelle.net/), joissa on väriyhteenvedot.

CSS:ssä on mahdollisuus lyhentää heksadesimaalisten väriarvojen kirjoitustapaa. Tätä periaatetta ei kuitenkaan voi soveltaa kaikkiin väriarvoihin. Se toimii tosiasiassa vain silloin, kun yksi arvo koostuu kolmesta samasta parista. Tyypillisiä esimerkkejä ovat mustan ja valkoisen värimääritelmät. Niitä kirjoitetaan yleensä näin:

.schwarz {
   color: #000000;
}
.weiss {
   color: #ffffff;
}

Tätä syntaksia voi myös lyhentää.

.schwarz {
   color: #000;
}
.weiss {
   color: #fff;
}

CSS:ssä voidaan käyttää myös RGB-arvoja. Tässä annetaan luvut 0 ja 255 väliltä, jotka erotetaan toisistaan pilkuilla. Värien järjestys vastaa heksadesimaalisia värejä.

a { 
color: rgb(100%, 100%, 100%); 
background: rgb(0, 0, 0); 
}

Kuten esimerkistä näkyy, prosentuaaliset arvot ovat myös mahdollisia, mutta niitä on käytännössä harvoin.

Värimääritelmiin löytyy toinen vaihtoehto, nimittäin väriavainsanat. Tässä muutamia esimerkkejä:

• black

• red

• blue

• yellow

• white

• green

Vastaava määritelmä voi näyttää tältä:

p { 
 color: white; 
 background: black; 
}

On huomattava, että CSS3:lla väriavainsanojen saatavilla olevaa valikoimaa on laajennettu merkittävästi. CSS3 on ottanut käyttöön värien nimet SVG-määrittelystä. Luettelon käytettävissä olevista värien nimistä löydät osoitteesta http://www.w3.org/TR/SVG/types.html#ColorKeywords.

Määrittele tausta

Ominaisuudella background esitetään seuraavat mahdolliset arvot, jotka esitellään tässä opetusohjelmassa yksityiskohtaisemmin myöhemmin:

• background-attachment

• background-color

• background-image

• background-position

• background-repeat

Yksittäiset arvot erotetaan toisistaan välilyönnein. Niiden järjestys ei ole tärkeä. Kaikkia arvoja ei tarvitse antaa.

Esimerkki:

p { 
    background: transparent
    url(logo.jpg)
    scroll repeat 0% 0%; 
 }

Taustavärit

Elementille taustavärin määrittämiseksi käytetään ominaisuutta background-color.

div { 
   background-color: #009999;
}

Toivotun värin määrittelynä annetaan haluttu väri.

Taustakuvat

background-image määrittää kuvan taustaksi. Kun tätä ominaisuutta käytetään ulkoisessa CSS-tiedostossa, suhteellinen hakemiston rakenne perustuu siihen, missä CSS-tiedosto sijaitsee.

• none – ei taustakuvaa

• URI – polkutieto kuvaan

Tästä on myös esimerkki.

<div style="background-image:url(hinten.jpg); margin:20px; padding:20px">
    Willkommen auf PSD-Tutorials.de!
</div>

Ole varovainen taustakuvien käytössä. Liian huomiota herättävät taustakuvat eivät ole kovin suotuisia tekstien luettavuudelle.





On kyllä sivustoja, joissa pelkkä ulkonäkö on tärkeää. Tällaisilla sivustoilla voi varmasti käyttää näyttävämpiä taustoja.

Liikkuvat taustat

Pitemmille elementeille taustakuva liikkuu vierityksen yhteydessä. background-attachment voi estää tämän.

• fixed – ei liiku

• scroll – taustakuva pysyy paikallaan ja on suhteessa selaimeen (näkymään).

Ominaisuutta background-attachment käytetään luonnollisesti yleensä yhdessä background-image-ominaisuuden kanssa.

Esimerkki:

div.fest {
    background-image: url(background.gif); 
    background-repeat: no-repeat;
 }

Taustan sijainti

Ominaisuuden background-repeat avulla määritetään, missä sijainnissa taustakuva tulisi aloittaa. Viitepiste on elementti, jolle kuva on määritetty.

• Prosenttiosuus - yksi tai kaksi arvoa, jotka määrittävät kuvan etäisyyden elementin vasemmasta yläkulmasta. Mikäli määritetään kaksi arvoa, ensimmäinen on vaakasuuntainen etäisyys ja toinen pystysuuntainen etäisyys. Viitepiste ei ole kuvan vasen yläkulma, vaan piste kuvassa, joka määritellään myös x/y-arvoilla.

• Pituusarvo - määrittää kuvan etäisyyden sen vasemmasta yläkulmasta elementin vasempaan yläkulmaan. Sallittuja ovat yksi tai kaksi arvoa. Mikäli määritellään kaksi arvoa, ensimmäinen määrittää vaakasuuntaisen etäisyyden ja toinen pystysuuntaisen etäisyyden.

Lisäksi mahdollisia ovat seuraavat avainsanat:

• left - vaakasuunnassa vasemmalle

• center - keskitetty

• right - vaakasuunnassa oikealle

• top - pystysuunnassa ylös

• bottom - pystysuunnassa alas

Tässä esimerkki, miltä tällainen voisi näyttää:

p { 
   background-position: 8em top; 
}

Toistuvat taustakuvat

Onko ja miten taustakuva toistetaan, jos se on pienempi kuin näytettävä alue, määräytyy käyttäen background-repeat -ominaisuutta.

• repeat - taustakuva toistetaan vaaka- ja pystysuunnassa täyttäen elementin.

• repeat-x - kuva toistetaan vain vaakasuunnassa.

• repeat-y - kuva toistetaan vain pystysuunnassa.

• no-repeat - kuvaa ei toisteta.

Tähänkin on esimerkki:

body { 
   background-repeat: repeat-y; 
}

Tässä tapauksessa kuva toistetaan vain pystysuunnassa.

Kun käytetään repeat-y, toisto tapahtuu ainoastaan vaakasuunnassa.





Tämä opetusohjelma on osoittanut, kuinka tehokasta CSS voi olla myös värityksessä ja kuvissa.