Cascading Style Sheets
Cascading Style Sheets (lyh. CSS[1], kirjaimellisesti ”porrastetut tyyliarkit”) on erityisesti verkkosivuille kehitetty tyylisivu. CSS:ssä dokumentille voi määritellä useita tyyliohjeita, jotka yhdistetään tietyllä tavalla yhdeksi säännöstöksi. CSS-tiedostojen pääte on yleensä .css
PerustiedotMuokkaa
CSS:llä annetut säännöt ehdottavat, kuinka dokumentti voidaan esittää. Säännöt eivät siis ole ehdottomia, vaan ne voi halutessaan kiertää. Jotkin säännöt saattavat korvautua toisten tyyliohjeiden vastaavilla säännöillä. Esimerkiksi dokumentissa annetut ohjeet ovat yleensä toissijaisia dokumentin vastaanottajan ohjeisiin verrattuna.
CSS:llä voidaan kuvata monipuolisesti näkyvää esitysmuotoa, periaatteessa myös kuultavaa esitystapaa. Äänisyntetisaattoreita varten on määritelty muun muassa äänen korkeutta, painotusta ja äänenväriä sääteleviä ominaisuuksia, joskin ne on toteutettu varsin suppeasti. Visuaalisen esitystavan perusta on niin sanottu laatikkomalli (box-model). Jokainen dokumentin elementti käsitetään mallissa laatikoksi, joka sijoitetaan ympäröivän elementin laatikon sisään muiden saman tason elementtien vierelle. Elementti voi kuitenkin tuottaa myös useita laatikoita. Kullakin elementillä on neljä sisäkkäistä laatikkoa, joista uloin on marginaali eli reunus; sen sisällä on reunaviiva tai -kuvio, joka rajoittuu sisäpuolelta sisältöä ympäröivään täytteeseen. Sisältölaatikossa on kuvattavan elementin sisältö.
CSS:ää käytetään luonnollisesti HTML:n ja XHTML:n kanssa, mutta se sopii yhtä lailla muidenkin rakenteisten dokumenttien (esimerkiksi XML ja MathML) tyyliohjeeksi.
CSS-versiotMuokkaa
World Wide Web Consortium (W3C) ylläpitää CSS-kielien määritelmiä.[1] Alkuperäinen määrittely oli CSS 1, jolla on vain historiallinen merkitys. Nykyisin vakiintuneet ja lähes kaikissa selaimissa toteutetut ominaisuudet on kuvattu määrittelyssä CSS 2.1. ”CSS3” on yleisnimitys valmiusasteeltaan ja luonteeltaan hyvin erilaisille määrittelyille.
CSS1:n ominaisuudetMuokkaa
- yleinen muotoilu
- leveyden ja korkeuden asettaminen
- reunaviivat ja täytteet
- listojen muotoilu
- fontit ja niiden ominaisuudet jota ovat
- värit
- alleviivaus
- koko
- tausta
- rivivälit
- asemointi
- vasemmalle
- keskelle
- oikealle
CSS2:n uudet ominaisuudetMuokkaa
- asemoinnin uudistuminen, niin että kuvat ja teksti voidaan asemoida minne vain
- elementtejä voi asettaa päällekkäin, niin että toinen tulee päälle (Z-index)
- ylivuodon käsittely (mitä tehdään sisällölle, joka ei mahdu käytettävissä olevaan tilaan)
- taulukoiden ulkoasun parempi muokkaaminen
CSS3:n uudet ominaisuudetMuokkaa
- animointi
- elementin kääntäminen
- laatikoiden muuntaminen
- fontin venytys
- tekstin kelaaminen (marquee)
- rivien ominaisuudet
- rivien määrä
- rivien tausta
- puheominaisuudet (puheselaimille)
- X-, Y- ja Z-akseleiden suuntainen käänteleminen
Osa ominaisuuksista on suunniteltu osittain korvaamaan apletit ja flash.
CSS:n perussyntaksiMuokkaa
CSS:n perussyntaksi muodostuu selektorista eli valitsimesta, ominaisuudesta ja arvosta.
selektori {
ominaisuus: arvo;
}
Kaikki ominaisuudet ja arvot tulevat aaltosulkeiden {} sisään. Useita ominaisuuksia ja arvoja voi laittaa valitsimeen peräkkäin erottelemalla ne puolipisteellä ;.
Esimerkki CSS-määrittelystäMuokkaa
/* 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;
}
Katso myösMuokkaa
LähteetMuokkaa
- Web standards software and learning - browser support (englanniksi)
- Jukka K. Korpela: CSS3 – uudet mahdollisuudet. Docendo, 2013. ISBN 978-952-5912-79-1
