CSS ja sen sovellukset Vesa Jussila

Esitys  Yleistä –Historia –Etuja ja huonoja puolia –Mediatyypit  Käyttö –Laatikkomalli –CSS-taitto –Sovelluksia

Mitä on CSS?  Cascading Style Sheets, Porrastetut tyyliarkit  Kuvataan HTML, XHTML ja XML dokumenttien ulkoasua  Ulkoasun erottaminen sisällöstä

Etuja  Luettavissa helposti eri alustoilla  Dokumentit kevenee  Ylläpito helppoa  Uusia keinoja ja mahdollisuuksia taitossa

Huonoja puolia ja ongelmia  Selaintuki vaihtelevaa –Useimmat selaimet ei tue täydellisesti CSS2 spesifikaatiota  Erilainen ajattelutapa taitossa  Puutteellinen pystysuuntainen asettelu

Historia  Kehittely aloitettiin 1994  CSS Level 1 (1996)  CSS Level 2 (1998)  CSS Level 2 revision 1 (2004)  CSS Level 3 kehityksessä (2001…)

Mediatyypit  Yksi CSS:n tärkeimmistä ominaisuuksista  Tyylejä eri alustoille  Yksi huonoiten tuettuja ominaisuuksia

Mediatyypit  all - kaikille laitteille  aural - kuulomuotoilumalli  braille- kosketeltava media  embossed- sivutettu braille  handheld- kädessä pidettävät laitteet

Mediatyypit  print- sivutettu printtimedia  projection- heijastettavat  screen- tietokoneen näyttö  tty- kiinteää kirjasin leveyttä käyttävät laitteet  tv- televisio-tyyppiset matalaresoluutioiset laitteet

Käyttöotto  3 eri tapaa liittää: –Suoraan HTML-koodin sekaan (Inline) –HTML-sivun elementtiin –Linkitys ulkoiseen CSS-tiedostoon  Ulkoinen tapa suositeltu

Mediatyyppien käyttöotto  Mediatyyppejä voidaan käyttää kolmella eri url(“voice.css") aural { body { volume: medium; } }

CSS ja taulukkotaiton erot  Taulukoilla asetetaan ruudukkoon elementtejä  CSS:llä pinotaan ja asetellaan laatikoita

Laatikkomalli

CSS-taitto  HTML-tiedosto rakentuu Div- elementeistä Päänavigaatio Sivunavigaatio Sisältöä Vesa Jussila

CSS-taitto  Div-elementit sijoitetaan CSS:n avulla #center { width: 627px; } #header { clear: both; } #navi-main { clear: both; } #navi-right { float: right; clear: right; width: 163px;} #content { float: left; clear: left; } #footer { clear: both; }

Sovelluksia  Kuvanvaihto hiiren ollessa elementin päällä  Kehyksien (frameset ja iframe) korvaaminen  JavaScriptin kanssa monimutkaisiakin navigaatioita yksinkertaisesti enu/demo/ enu/demo/

Yhteenveto  Muodostunut de facto standardiksi WWW-tuottajien kesken  Taulukoille vielä käyttöä  Selain epäyhteensopivuuksien takia aina testaus tärkeää

Ulkoasu ja sisältö erotettu  Radio Zen: 8.css 8.css  Invasion of the Body Switchers: 2.css 2.css  Revolution: 2.css 2.css  Attack of the CSS Zen Garden: djustafresh.com/zen/mozattack.css djustafresh.com/zen/mozattack.css

Linkkejä     istory/ istory/ 