Cascading Style Sheets

WWW-dokumenteille kehitetty tyyliohjeiden laji
(Ohjattu sivulta CSS (tyyliohje))
Hakusana ”CSS” ohjaa tänne. Sanan muista merkityksistä kerrotaan sivulla CSS (täsmennyssivu).

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

CSS3:n logo

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.

Yhteensopivuus eri selaimillaMuokkaa

Verkkoselaimet käyttävät eri selainmoottoreita verkkosivujen esittämiseen, josta johtuen eri selaimet voivat käsitellä CSS:n eri tavoin. Tiettyjä selaimia varten on kehitetty väliaikaisia korjauksia (CSS hack tai CSS filtteri), joilla saavutetaan nettisivujen yhtenäinen ulkonäkö selaimissa, joissa ei ole yhdensopivaa renderöintiä.

Merkittävien selainten tuen puute voi olla este uusien CSS toiminnallisuuksien omaksumiselle. Esimerkiksi Internet Explorer ei tukenut CSS 3 ominaisuuksia, mikä hidasti näiden ominaisuuksien omaksumista ja samalla vahingoitti selaimen mainetta kehittäjien keskuudessa[2]. Yhtenäisen käyttäjäkokemuksen varmistamiseksi verkkokehittäjät yleensä testaavat sivustojaan useilla käyttöjärjestelmillä, selaimilla ja selainversioilla. Tämä puolestaan nostaa sivustojen kehitysaikaa ja monimutkaisuutta. Ohjelmistotyökaluja, kuten BrowserStack voidaan käyttää tällaisten kehitysympäristöjen ylläpitoon. Tilapäiset korjaukset ja usean vanhemman selainversion tuen ylläpito voivat nostaa ohjelmistokehitysprojektien monimutkaisuutta ja tästä syystä useat ohjelmistoyritykset määrittelevät listan selainversioista joita heidän ohjelmistonsa tukee.

Kun nettisivut ottavat käyttöön uudempaa koodia joka ei ole yhteensopiva vanhempien selainten kanssa, nämä selaimet eivät pääse enää käsiksi moniin verkon resursseihin. Monet modernit sivustot näyttävät erilaisilta vanhoilla selaimilla ja tämän lisäksi eivät välttämättä toimi ollenkaan, johtuen JavaSriptin ja muun verkkoteknologian kehityksestä.[3]

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;
}

Responsiivinen web-suunnitteluMuokkaa

CSS:n avulla pystymme suunnittelemaan responsiivisia verkkosivuja. Responsiivisuudella tarkoitetaan verkkosivun mukautuvuutta käyttäjän näytön kokoon halutulla tavalla niin, että se on käyttäjälle paremmin suunniteltu. Tämä voidaan toteuttaa CSS-tiedostossa mediakyselyiden avulla niin, että luodaan rajaehdot näytön koolle. Näin verkkosivu muuttaa asetteluaan tunnistaessaan minkä kokoisella näytöllä sivu avataan.

Esimerkkejä mediakyselyiden käytöstä:Muokkaa

/* Todella pienet laitteet (puhelimet, 480px ja pienemmät) */
@media screen and (max-width: 480px) {/* css koodi */}

/* Pienet laitteet (tabletit ja suuret puhelimet, 481px suuremmat) */
@media screen and (min-width: 481px) {/* css koodi */}

/* Keskikokoiset laitteet (pienet näytöt ja kannettavat tietokoneet, 769px suuremmat) */
@media screen and (min-width: 769px) {/* css koodi */}

/* Suuret laitteet (pöytätietokoneet ja suuret näytöt, 1025px suuremmat) */
@media screen and (min-width: 1025px) {/* css koodi */}

/* Todella suuret laitteet (todella suuret näytöt ja TV, 1200px suuremmat) */
@media screen and (min-width: 1201px) {/* css koodi */}

[4]

Suunnittelu kannattaa aloittaa mobiililaitteista ja edetä niistä suurempia laitteita kohti. Esimerkkikoodissa suuruusluokka on ensin asetettu 600px pienemmiksi ja seuraavat sitä suuremmaksi. CSS pystyy havaitsemaan mihin suuruusluokkaan näytön koko sopii ja toteuttaa verkkosivun asettelun siihen muokatun asettelun mukaan. Esimerkiksi jos näyttö on suurempi kuin 768px, mutta pienempi kuin 992px, sen asettelu on keskikokoisten laitteiden mukainen. CSS ei anna suuruusluokkia automaattisesti vaan ne täytyy määritellä itse.

Mediakyselyitä voidaan määritellä enemmänkin esimerkiksi tulostamiseen tai näytönlukemiseen käyttämällä screen tilalla print tai speech.

Katso myösMuokkaa

Wikikirjastossa on aihe: CSS.

LähteetMuokkaa

ViitteetMuokkaa

  1. a b Smith, Dori ja Negrino, Tom: ”11. CSS:n esitteleminen”, JavaScript: Tehokas hallinta, s. 263. Readme.fi, 2007.
  2. CSS3 Solutions for Internet Explorer Smashing Magazine. 28.4.2010. Viitattu 23.9.2022. (englanniksi)
  3. Lee Hutchinson: Looking at the Web with Internet Explorer 6, one last time Ars Technica. 9.4.2014. Viitattu 23.9.2022. (englanniksi)
  4. Media Query CSS Tutorial – Standard Resolutions, CSS Breakpoints, and Target Phone Sizes freeCodeCamp.org. 8.4.2020. Viitattu 24.9.2022. (englanniksi)

Aiheesta muuallaMuokkaa

 
Wikimedia Commonsissa on kuvia tai muita tiedostoja aiheesta Cascading Style Sheets.