CSS

Virtuaaliwiki

Loikkaa: valikkoon, hakuun

CSS (Cascading Style Sheets, porrastetut tyyliarkit) on erityisesti nettisivudokumenteille kehitetty tyyliohjeiden laji. CSS:ssä dokumentille voi määritellä useita tyyliohjeita, jotka yhdistetään tietyllä tavalla yhdeksi säännöstöksi. CSS:lla voi määritellä sivun elementeille esimerkiksi värejä, taustavärejä, taustakuvia, korkeutta, leveyttä ja marginaalia. CSS:ää käytetään luonnollisesti (X)HTML:n kanssa, mutta se sopii yhtä lailla muidenkin rakenteisten dokumenttien (esimerkiksi XML, MathML) tyyliohjeeksi.

Sisällysluettelo

CSS:n perussyntaksi

CSS:n perussyntaksi muodostuu valitsimesta, ominaisuudesta ja arvosta. <source lang="css"> Valitsin { Ominaisuus: Arvo; } </source> Kaikki ominaisuudet ja arvot tulevat aaltosulkujen {} sisään. Useita ominaisuuksia ja arvoja voi laittaa valitsimeen peräkkäin erottelemalla ne puolipisteellä ;

Esimerkki CSS-määrittelystä

/* Leipätekstin fontin määritys ja tasaus */

p {
 font: 11px 'Trebuchet MS', Verdana, Arial, Sans-serif;
 color: #9e9e9e;
 text-align: justify;
}

/* Linkit lihavoidaan, mutta ei alleviivata */

a {
 text-decoration: none;
 font-weight: bold;
}

/* Kursorin alla olevan linkin tausta mustaksi ja teksti valkoiseksi
 24-bittisellä heksakoodilla määritettyinä */

a:hover {
 color: #ffffff;
 background-color: #000000;
}

CSS:n lisääminen sivulle

CSS tieto lisätään nettisivuille joko suoraan html koodin sekaan tai ulkoisena tiedostona. Suoraan html tiedostoon lisättäessä kirjoitetaan seuraava koodipätkä sivun <head> </head> tagien väliin ja lisätään css määrittelyt oikealle paikalleen.

<style type="text/css">
<!--

CSS KOODI TÄHÄN

-->
</style>

Ulkoista tiedostoa käytettäessä CSS koodi tallennetaan omaan tiedostoonsa, esimerkiksi tyylitiedosto.css, jonka jälkeen <head> </head> tagien väliin vain seuraava koodinpätkä:

<link rel="stylesheet" href="tyylitiedosto.css" type="text/css" />

Ulkoinen CSS tiedosto on kätevä, jos samaa tyyliä käytetään useammalla sivulla. Mikäli tahdot esimerkiksi vaihtaa tallisi sivujen taustakuvan, ulkoista css:ää muokkaamalla voit vaihtaa sen samantien joka sivulle. Jos käyttäisit CSS:ää joka on kirjoitettu suoraan HTML dokumenttiin, joutuisit korjaamaan uuden taustakuvan osoitteen jokaiselle sivulle erikseen.

Opi lisää

Menthal 27 (Ohjeita HTML:n, XHTML:n ja CSS:n käyttöön)

Lähteet

Wikipedia Menthal 27

Henkilökohtaiset työkalut
Nimiavaruudet
Muuttujat
Toiminnot
Valikko
Wiki
Työkalut