Lataa esitys
Esittely latautuu. Ole hyvä ja odota
JulkaistuRiikka Siitonen Muutettu yli 9 vuotta sitten
1
CSS ja sen sovellukset 9.2.2006 Vesa Jussila
2
Esitys Yleistä –Historia –Etuja ja huonoja puolia –Mediatyypit Käyttö –Laatikkomalli –CSS-taitto –Sovelluksia
3
Mitä on CSS? Cascading Style Sheets, Porrastetut tyyliarkit Kuvataan HTML, XHTML ja XML dokumenttien ulkoasua Ulkoasun erottaminen sisällöstä
4
Etuja Luettavissa helposti eri alustoilla Dokumentit kevenee Ylläpito helppoa Uusia keinoja ja mahdollisuuksia taitossa
5
Huonoja puolia ja ongelmia Selaintuki vaihtelevaa –Useimmat selaimet ei tue täydellisesti CSS2 spesifikaatiota Erilainen ajattelutapa taitossa Puutteellinen pystysuuntainen asettelu
6
Historia Kehittely aloitettiin 1994 CSS Level 1 (1996) CSS Level 2 (1998) CSS Level 2 revision 1 (2004) CSS Level 3 kehityksessä (2001…)
7
Mediatyypit Yksi CSS:n tärkeimmistä ominaisuuksista Tyylejä eri alustoille Yksi huonoiten tuettuja ominaisuuksia
8
Mediatyypit all - kaikille laitteille aural - kuulomuotoilumalli braille- kosketeltava media embossed- sivutettu braille handheld- kädessä pidettävät laitteet
9
Mediatyypit print- sivutettu printtimedia projection- heijastettavat screen- tietokoneen näyttö tty- kiinteää kirjasin leveyttä käyttävät laitteet tv- televisio-tyyppiset matalaresoluutioiset laitteet
10
Käyttöotto 3 eri tapaa liittää: –Suoraan HTML-koodin sekaan (Inline) –HTML-sivun elementtiin –Linkitys ulkoiseen CSS-tiedostoon Ulkoinen tapa suositeltu
11
Mediatyyppien käyttöotto Mediatyyppejä voidaan käyttää kolmella eri tavalla: @import url(“voice.css") aural; @media aural { body { volume: medium; } }
12
CSS ja taulukkotaiton erot Taulukoilla asetetaan ruudukkoon elementtejä CSS:llä pinotaan ja asetellaan laatikoita
13
Laatikkomalli
14
CSS-taitto HTML-tiedosto rakentuu Div- elementeistä Päänavigaatio Sivunavigaatio Sisältöä Vesa Jussila
15
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; }
16
Sovelluksia Kuvanvaihto hiiren ollessa elementin päällä Kehyksien (frameset ja iframe) korvaaminen JavaScriptin kanssa monimutkaisiakin navigaatioita yksinkertaisesti http://www.twinhelix.com/dhtml/fsm enu/demo/ http://www.twinhelix.com/dhtml/fsm enu/demo/
17
Yhteenveto Muodostunut de facto standardiksi WWW-tuottajien kesken Taulukoille vielä käyttöä Selain epäyhteensopivuuksien takia aina testaus tärkeää
18
Ulkoasu ja sisältö erotettu Radio Zen: http://csszengarden.com/?cssfile=/058/05 8.css http://csszengarden.com/?cssfile=/058/05 8.css Invasion of the Body Switchers: http://csszengarden.com/?cssfile=/142/14 2.css http://csszengarden.com/?cssfile=/142/14 2.css Revolution: http://csszengarden.com/?cssfile=/102/10 2.css http://csszengarden.com/?cssfile=/102/10 2.css Attack of the CSS Zen Garden: http://csszengarden.com/?cssfile=http://a djustafresh.com/zen/mozattack.css http://csszengarden.com/?cssfile=http://a djustafresh.com/zen/mozattack.css
19
Linkkejä http://www.w3schools.com/css/ http://www.w3schools.com/css/ http://glish.com/css/ http://glish.com/css/ http://www.w3.org/Style/CSS/ http://www.w3.org/Style/CSS/ http://www.w3.org/Style/LieBos2e/h istory/ http://www.w3.org/Style/LieBos2e/h istory/ http://jigsaw.w3.org/css-validator/ http://jigsaw.w3.org/css-validator/
Samankaltaiset esitykset
© 2024 SlidePlayer.fi Inc.
All rights reserved.