Internet ja CSS

 Etusivu

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ä.

 

Video

 
 

Aiheeseen liittyvät linkit

Internet ja historiaa
 - Värikoodit html-kielessä
 - Windows-fontit
 - W3schools css-koodeja

Opetusmateriaalia (PDF)
 - HTML-kielen perusteita
 

 

Kysy neuvoa tai anna vinkki

 

Tiedotteet ja aikataulut

Tervetuloa kurssille!

 

Tehtävät ja palautus

CSS-sivu tehtävä

1. Valmista sivu jossa kerrot itsestäsi ja harrastuksistasi. Käytä erilaisia fontteja sekä värejä. Tee sivulle otsikko ja taustakuva. Palauta sivu ja css-koodi erillisinä tiedostoina.

Palauta vastaukset verkkoon alla olevasta linkistä. Palauta tehtävät muistioon kirjoitettuna. Voit kirjoittaa ja muokata tehtäviä myös palautuksen jälkeen. Palautuskansio on salasanasuojattu. Saat käyttäjätiedot opettajalta. Palauta tiedosto varustettuna omalla nimelläsi muotoon:
sukunimi_etunimi.txt

» Palauta tiedosto tänne