Css ja www-sivu
Css (Cascading style sheets) on webbisivuille kehitetty
tyylimäärittely-koodi. Ideana tässä määrittelyssä on
mahdollisuus jakaa www-sivujen sisältö staattisesta koodista
erilaisiksi tyylitiedostoiksi, joiden avulla dokumenttien
muotoja, tyylejä ja sijoittelua voidaan määritellä.
Css-tyylimääritemiä voidaan ohjata ulkoisesta tiedostosta ja
sen avulla verkkosivuston sisällön esittämistapaa pystytään
muuttamaan helposti ja nopeasti. Css-määritelmät laaditaan
dokumentiksi ja niiden tiedostopääte on yleensä *.css. Näiden
dokumenttien avulla ehdotetaan miten www-sivut voidaan
esittää. Nämä eivät ole kuitenkaan ehdottomia sääntöjä ja ne
voidaan halutessa kiertää ja muokata itse sivuilla toisien
koodien avulla.
Css,n perussyntaksi sisältää valitsimen, ominaisuuden ja
arvon. Ominaisuudet ja arvot laitetaan aaltosulkeiden sisään.
Näitä voi olla useampia ja ne erotetaan puolipisteelllä
toisistaan. Ne laitetaan usein omille riveilleen selkeyden
lisäämiseksi.
valitsin { ominaisuus: arvo; }
Taustaväri Seuraavassa esimerkissä
määrittelemme sivuille taustavärin css-tyylimäärittelyllä.
Tyylimäärittely aloitetaan kertomalla mistä koodista on kyse
<style> -tageilla. Valitsimeksi on valittu html-koodi body.
Ominaisuudeksi tulee background-color, eli taustaväri. Arvona
voi käyttää hexadesimaalia
#003399), rgb-arvoa
(rgb(120,0,50)) tai nimeämällä väri suoraan (blue).
Taustan muotoja voidaan muuttaa myös seuraavilla koodeilla:
background-image - taustakuva
background-repeat - taustakuvan jatkaminen
background-position - taustakuvan sijainti
esim: body
{background-image:url('kuva.jpg');
background-repeat:repeat-x;
background-position:top center;}
Tekstit ja muotoilu
Css-tyylimäärittelyssä usein määritellään sivulla käytettävien
tekstien tyylit. Tavallisimpia ominaisuuksia ovat:
font-family - fontti/kirjaisinperhe esim
arial, verdana font-size - koko esim 12px,
100%, xx-large font-style - kursivointi
esim normal, italic font-weight -
lihavointi esim bold, 900 color - väri
esim red, rgb(120, 10,50) text-decoration
- korostukset esim line-through, blink text-align
- sijoitus esim center, justify
Tyylit määritellään id,n avulla. Kun kyse ei ole
html-valitsimista, voidaan uusi määritelmä luoda #-merkin
avulla. Tyylit voidaan ottaa käyttöön <div> -koodin avulla
käyttämällä id-tageja.
Ulkoinen css-tiedosto Jos samaa tyyliä
käytetään useammassa sivussa, kannattaa määritelmät sijoittaa
ulkoiseen tiedostoon ennemmin kuin erikseen jokaiseen
dokumenttiin. Näin muutokset voidaan tehdä suoraan yhden
tiedoston kautta. Sivuihin liitetään linkki
css-tyylimääritelmään.
Ulkoinen css-tiedosto tallennetaan .css muotoon ja se sisältää
vain tyylimääritelmiä.
|