Cascading Style Sheets

Wikipedia
Loikkaa: valikkoon, hakuun
Hakusana ”CSS” ohjaa tänne. Sanan muista merkityksistä kerrotaan sivulla CSS (täsmennyssivu).

Cascading Style Sheets (lyh. CSS, kirjaimellisesti ”porrastetut tyyliarkit”) on erityisesti WWW-dokumenteille kehitetty tyyliohjeiden laji. 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

CSS perustiedot[muokkaa | muokkaa wikitekstiä]

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 (X)HTML:n kanssa, mutta se sopii yhtä lailla muidenkin rakenteisten dokumenttien (esimerkiksi XML, MathML) tyyliohjeeksi.

CSS-Versiot[muokkaa | muokkaa wikitekstiä]

World Wide Web Consortium (W3C) ylläpitää CSS-kielien määritelmiä. 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 ominaisuudet[muokkaa | muokkaa wikitekstiä]

  • 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 uudet ominaisuudet[muokkaa | muokkaa wikitekstiä]

  • 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 uusia ominaisuuksia[muokkaa | muokkaa wikitekstiä]

  • 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 perussyntaksi[muokkaa | muokkaa wikitekstiä]

CSS:n perussyntaksi muodostuu valitsimesta, ominaisuudesta ja arvosta.

Valitsin { Ominaisuus: Arvo; }

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ä[muokkaa | muokkaa wikitekstiä]

/* 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ös[muokkaa | muokkaa wikitekstiä]

Wikibooks
Wikikirjastossa on aihe: CSS.
Wikibooks
Wikikirjastossa on aihe: CSS3.

Lähteet[muokkaa | muokkaa wikitekstiä]

Aiheesta muualla[muokkaa | muokkaa wikitekstiä]