Pseudoelementit CSS:n pseudoelementtien avulla on mahdollista systemaattisesti vaikuttaa (joidenkin) elementtien ulkoasuun ilman elementtien eksplisiittistä merkkausta Ideana on helpottaa ja vähentää esitettävien (display-tyyppisten) elementtien merkkaustyötä tarjoamalla tyylejä "kuvitteellisille elementeille", jotka realisoituvat vasta dokumenttia "tulostettaessa" CSS1 esittelee kaksi pseudoelementtiä: first-line ja first-letter Pseudoelementtien syntaksi noudattaa käytännössä pseudoluokkien syntaksia Seuraavassa ensimmäinen sääntö kursivoi jokaisen P-elementin ensimmäisen rivin ja toinen suurentaa jokaisen H1-elementin ensimmäisen kirjaimen: P:first-line { font-style: italic } H1:first-letter { font-size: bigger } Valitsimien konteksti ja yhdistely ovat mahdollisia myös pseudoelementeille Pseudoelementeille annettavien mahdollisten ominaisuuksien joukkoa on jonkin verran rajoitettu 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 85
Elementtien formatointi: luokkaominaisuudet Ulkoasullinen formatointi perustuu konkreettisten esitettävien elementtien kolmijakoon (vrt. HTML): - lohkotyyppiset objektit ([block]) - listatyyppiset objektit ([list-item]) - tekstityyppiset objektit ([inline]) Elementin "ensiarvoinen ulkoasullinen tyyli" määräytyy sen (yleensä oletusarvoisten) luokkaominaisuuksien ([classification properties]) perusteella: - ulkoasu (display) - tekstin ohjaus (white-space) - listojen muokkaus (list-style-type, list-style-image, list-style-position, liststyle) Oletusarvoisten luokkaominaisuuksien muuttaminen on tietenkin mahdollista, mutta ei aina suositeltavaa (esim. HTML:ssä display-muutokset aiheuttanevat elementtien "oletussemantiikan" takia päänvaivaa) 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 86
Formatoinnin suorakaidemalli Elementtien käsittely tapahtuu suorakaiteiden avulla: kaikki esitettävät elementit (display on joko block, list-item tai inline, tai float none) formatoidaan laatikoiksi, joilla on seuraavia ominaisuuksia: margin (transparent) border padding content element width box width 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 87
Lohko- ja listatyyppisten objektien asemoinnin käsitteitä --------------- <-- top top margin --------------- top border --------------- top padding +-------------+ <-- inner top --left-- --left-- --left-- -- content -- --right-- --right-- --right-- margin border padding padding border margin +-------------+ <-- inner bottom ^ ^ ^ ^ left left inner edge right inner edge right outer outer edge bottom padding edge --------------- bottom border --------------- bottom margin --------------- <-- bottom 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 88
Lohkotason elementit Elementit, joiden display-ominaisuuden arvo on "block" tai "list-item", käsitellään formatointimallissa yhteisesti "block-level"-tyyppisinä Listatyyppiset objektit ovat siten lohkotyylisten objektien formatoinnin erikoistapaus (vrt. HTML) - listamerkki ([list-item marker]) - sisennys- yms. ominaisuudet Jos annetun elementin display-ominaisuus on "none", ei sitä esitetä lainkaan (eikä sen reunaa, eikä elementin lapsia) Elementin koon ja erityyppisten reunusalueiden formatointi tapahtuu nimettyjen ominaisuuksien kautta - elementin kooksi lasketaan suorakaiteen "content"-osan koko, tulostuspinnalta ([canvas]) tilaa menee enemmän (padding, border ja margin) - tämän lisäksi reuna-alueiden kokoa yms. ominaisuuksia voidaan erikseen formatoida leveys- ja korkeussuunnassa 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 89
Formatointi suoritetaan systemaattisesti nimettyjä ominaisuuksia padding-top, padding-right, padding-bottom, padding-left, border-top, Myös usean formatointiominaisuuden asettaminen kerralla onnistuu, esim. tyyliin: BODY {margin: 2em} /* all margins set to 2em */ BODY {margin: 1em 2em} /* top & bottom = 1em, right & left = 2em */ BODY {margin: 1em 2em 3em} /* top=1em, right=2em, bottom=3em, left=2em */ Sääntö tälle: arvojen lukumäärä asetettavat ominaisuudet 1 kaikki 2 1. arvo asettaa t&b, 2. arvo l&r 3 1. arvo asettaa t, 2. arvo l&r, 3. arvo b 4 asetetaan järjestyksessä t,r,b,l CSS sisältää myös kelluvat elementit (elementille on määritelty ominaisuus float, jonka arvo "left" tai "right") 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 90
Tekstitason elementit Tekstitason inline-tyyppiset elementit "juoksevat tulostuspinnalla tekstin tavoin" Määritelmänsä mukaisesti tulostuspinnan yksittäinen rivi voi sisältää monta Inline-elementtiä ("Block-level"-tyyppisen elementit vaativat aina koko rivin itselleen, poikkeuksen muodostavat kelluvat elementit luokitellaan "block-level"- tyyppisiksi) Myös inline-tyyppisesti formatoitaville elementeille voidaan asettaa aikaisemmin kuvatut suorakaideominaisuudet; poikkeustapaus syntyy, mikäli inline-elementti katkeaa tulospinnalla usealle riville; tällöin katkeamiskohdassa reunaominaisuuksilla ei ole merkitystä (karkeasti sanottuna) Korvattavien elementtien ([replaced elements]) koko määräytyy joko niiden suorakaideominaisuuksien perusteella tai sitten korvaavien objektien sisäisten ominaisuuksien perusteella ("auto"-asetus) Erikorkuisten elementtien rivikorkeus määräytyy korkeimman elementin mukaisesti (ei kuitenkaan padding-, border- ja margin-korkeuksien mukaan) 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 91
CSS1: ominaisuudet ([properties]) Suurin osa käytännön CSS-säännöistä käsittelee ominaisuuksien antamista elementeille CSS1 luokittelee elementeille annettavat ominaisuudet viiteen luokkaan: 1) fonttiominaisuudet ([font]) 2) elementin väri- ja taustaominaisuudet ([color and background]) 3) tekstiominaisuudet ([text]) 4) suorakaideominaisuudet ([box]) 5) elementtien luokkaominaisuudet ([classification]) Osa ominaisuuksista on järkeviä vain sopivina kombinaatioina Elementeillä saattaa olla sovelluskohtaisia oletusominaisuuksia, esim: - HTML-elementin P tekstin väri on "yleensä" musta - XML-dokumenttien elementeillä taas ei oletusominaisuuksia ole yleensä lainkaan (ei edes display-ominaisuutta!) 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 92
Sovelluskohtaisten oletusominaisuuksien lisäksi joillakin CSS-ominaisuuksilla on oletusarvoja, esim: - font-weight: normal - border-style: none - background-color: transparent XML-dokumenttien elementtien yhteydessä CSS-oletusominaisuuksia ole välttämättä ole käytössä lainkaan (ei välttämättä edes display-ominaisuutta, jonka CSS-oletusarvo on "block") Ominaisuuden (saman) arvon asettaminen voidaan tehdä useilla eri tavoilla, käyttäen erilaisia sievennyssääntöjä (vrt. CSS-sääntöjen sieventäminen) Esimerkki: seuraava säännöt asettavat saman ominaisuuden: P { color: white } P { color: #fff } P { color: #ffffff } P { color: rgb(255,255,255) } P { color: rgb(100%,100%,100%) } 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 93
Ominaisuuksien arvon asettaminen Ominaisuudet on tyypitetty ja ne voivat saada ominaisuudesta riippuen seuraavantyyppisiä arvoja: 1) pituusarvoja ([length]) 2) prosenttiarvoja ([percentage]) 3) väriarvoja ([color]) 4) lokaattoreita ([url]) 5) avainsanoja ([keyword]) Esimerkkejä kustakin: P { font-size: 12px } P { line-height: 120% } P { color: rgb(255,0,0) } P { backgroung: url(http://www.gfx.com/tiles.gif) } P { font-weight: bold } Arvojen lailliset tyypit ovat tietenkin ominaisuuskohtaisia 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 94
Pituusarvojen yleismuoto on seuraava: "+"- tai "-"-merkki, numero desimaalipisteellä tai ilman, ja yksikkötunnus (tuttuun tapaan "+" voidaan jättää pois) Yksikkötunnuksen saa jättää pois vain lukuarvolle 0! Pituusarvot ovat joko suhteellisia tai absoluuttisia CSS1:n suhteelliset pituusyksiköt ovat em, ex ja px: H1 { margin: 0.5em } /* ems, the height of the element's font */ H1 { margin: 1ex } /* x-height, ~ the height of the letter 'x' */ P { font-size: 12px } /* pixels, relative to canvas */ CSS1:n absoluuttiset pituusyksiköt ovat in, cm, mm, pt ja pc: H1 { margin: 0.5in } /* inches, 1in = 2.54cm */ H2 { line-height: 3cm } /* centimeters */ H3 { word-spacing: 4mm } /* millimeters */ H4 { font-size: 12pt } /* points, 1pt = 1/72 in */ H4 { font-size: 1pc } /* picas, 1pc = 12pt */ Prosenttiarvojen yleismuoto on seuraava: "+"- tai "-"-merkki, numero desimaalipisteellä tai ilman, ja prosenttimerkki "%" (merkki "+" voidaan taas jättää pois) 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 95
Prosenttiarvot annetaan aina suhteessa johonkin toiseen arvoon (totta kai) "Yleensä" prosenttiarvo annetaan suhteessa elementin fontin kokoon, vrt. esim: P { line-height: 120% } /* 120% of the element's 'font-size' */ Väriarvot määritellään joko avainsanan avulla tai numeerisen RGBmäärityksen avulla: EM { color: silver } /* keyword */ EM { color: #f00 } /* #rgb */ EM { color: #ff0000 } /* #rrggbb */ EM { color: rgb(255,0,0) } /* integer range 0-255 */ EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */ CSS1 ehdottaa seuraavia avainsanoja väreille: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white ja yellow (~ Windows-paletin 16 väriä) Lokaattorit määrittävät URL-osoitteen tuttuun tapaan: BODY { background: url("http://www.bg.com/pinkish.gif") } 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 96
Erikoismerkit (sulut, pilkut, heittomerkit, lainausmerkit, tyhjämerkit) pitää koodata kauttaviivalla ("\") Suhteelliset url-viittaukset annetaan suhteessa tyylitiedostoon, ei tyylejä hyödyntävään dokumenttiin CSS1 Avainsanoja käytetään sellaisten ominaisuuksien arvojen asettamisessa, jossa ominaisuus valitaan arvoa kuvaavien termien joukosta: - "tunnisteavainsanat", esim. "normal", "serif", "transparent", jne. - "suhteelliset avainsanat", esim. "larger", "smaller", "bolder", jne. - "absoluuttiset avainsanat", esim. "xx-small", "bold", "large", jne. "Absoluuttisten avainsanojen" avulla asetetut arvot päättää lopulta selain esim. suhteessa omiin asetuksiinsa 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 97
CSS1-ominaisuuksien määrittely CSS-ominaisuudet määritellään spesifikaatiossa tyyliin: font-style Value: normal italic oblique Initial: normal Applies to: all elements Inherited: yes Percentage values: N/A Notaation merkitys (säännöllisiä lausekkeita ja englannin kieltä tunteville) selvä: - sallitut arvot ilmaiseva säännöllinen lauseke - oletusarvo, ne elementit, joille vaikuttaa, periytyykö, ja tieto siitä ovatko prosenttiarvot sallittuja (ja jos ovat, niin minkä suhteen prosenttiarvot annetaan) Kootaan sitten ominaisuuksista tiivistetty esitys: tarkoituksena ei ole toisintaa spesifikaatiota, vaan luoda yleiskatsaus siitä, mitä kaikkea CSS1:n avulla on mahdollista saada aikaan 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 98
CSS1: fonttiominaisuudet font-family (esitysfontti) Value: [[<family-name> <generic-family>],]* [<family-name> <generic-family>] (oletuksena löytyvät: serif,sans-serif,cursive,fantasy,monospace) font-style (fontin tyyli) Value: normal italic oblique font-variant (merkkikoon fonttivariaatio) Value: normal small-caps font-weight (vahvennus) Value: normal bold bolder lighter 100 200 300 400 500 600 700 800 900 font-size (kirjasinkoko) Value: <absolute-size> <relative-size> <length> <percentage> 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 99
font (lyhennemerkintä font-ominaisuuksille) Value: [ <font-style> <font-variant> <font-weight> ]? <fontsize> [ / <line-height> ]? <font-family> Esim. font: P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif } P { font: x-large/110% "new century schoolbook", serif } P { font: bold italic large Palatino, serif } P { font: normal small-caps 120%/120% fantasy } Yleisiä esimerkkejä fonttiominaisuuksien käyttämisestä: BODY { font-family: "new century schoolbook", serif } H3 { font-variant: small-caps } EM { font-style: oblique } P { font-weight: normal } /* 400 */ H1 { font-weight: 700 } /* bold */ STRONG { font-weight: bolder } P { font-size: 12pt; } BLOCKQUOTE { font-size: larger } EM { font-size: 150% } EM { font-size: 1.5em } 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 100
CSS1: elementin väri- ja taustaominaisuudet color (väri) Value: <color> background-color (taustaväri) Value: <color> transparent background-image (taustakuva) Value: <url> none background-repeat (taustakuvan monistus) Value: repeat repeat-x repeat-y no-repeat background-attachment (taustakuvan kiinnitys) Value: scroll fixed 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 101
background-position (taustakuvan asemointi) Value: [<percentage> <length>]{1,2} [top center bottom] [left center right] background (lyhennemerkintä background-ominaisuuksille) Value: <background-color> <background-image> <backgroundrepeat> <background-attachment> <background-position> Esim. background: BODY { background: red } P { background: url(chess.png) gray 50% repeat fixed } Yleisiä esimerkkejä elementin väri- ja taustaominaisuuksien käyttämisestä: BODY { background-image: url(marble.gif) } P { background-image: none } BODY { background: red url(pendant.gif); background-repeat: repeat-y; background-attachment: fixed; } 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 102
CSS1: tekstiominaisuudet word-spacing (sanojen välistys) Value: normal <length> letter-spacing (kirjainten välistys) Value: normal <length> text-decoratorion (tekstin "somistus") Value: none [ underline overline line-through blink ] vertical-align (tasaus pystysuunnassa) Value: baseline sub super top text-top middle bottom text-bottom <percentage> text-transform (kirjasinkoon muokkaus) Value: capitalize uppercase lowercase none 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 103
text-align (tasaus vaakasuunnassa) Value: left right center justify text-indent (sisennys) Value: <length> <percentage> line-height (rivinkorkeus) Value: normal <number> <length> <percentage> Yleisiä esimerkkejä elementin tekstiominaisuuksien käyttämisestä: H1 { word-spacing: 1em } BLOCKQUOTE { letter-spacing: 0 } BLOCKQUOTE { letter-spacing: 0cm } A:link, A:visited, A:active { text-decoration: underline } H1 { text-transform: uppercase } DIV.center { text-align: center } P { text-indent: 3em } DIV { line-height: 1.2; font-size: 10pt } /* number */ DIV { line-height: 1.2em; font-size: 10pt } /* length */ DIV { line-height: 120%; font-size: 10pt } /* percentage */ 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 104
CSS1: suorakaideominaisuudet margin-top, margin-right, margin-bottom, margin-left (marginaali) Value: <length> <percentage> auto margin (lyhennemerkintä margin-ominaisuuksille) Value: [ <length> <percentage> auto ]{1,4} Esim. margin: BODY { margin: 2em } BODY { margin: 1em 2em } BODY { margin: 1em 2em 3em } padding-top, padding-right, padding-bottom, padding-left (sisällön etäisyys reunasta) Value: <length> <percentage> padding (lyhennemerkintä padding-ominaisuuksille) Value: [ <length> <percentage> ]{1,4} 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 105
Esim. padding: H1 { background: white; padding: 1em 2em; } border-top-width, border-right-width, border-bottom-width, border-left-width, (reuna) Value: thin medium thick <length> border-width (lyhennemerkintä border-width-ominaisuuksille) Value: [thin medium thick <length>]{1,4} Esim. border-width: H1 { border-width: thin } /* thin thin thin thin */ H1 { border-width: thin thick } /* thin thick thin thick */ H1 { border-width: thin thick medium } /* thin thick medium thin */ border-color (reunan väri) Value: <color>{1,4} 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 106
border-style (reunan (viivan)tyyli) Value: none dotted dashed solid double groove ridge inset outset border-top, border-right, border-bottom, border-left (lyhennemerkintä eri reunoille (toistuvat ominaisuudet)) Value: <border-top-width> <border-style> <color> Esim. border-bottom: H1 { border-bottom: thick solid } border (lyhennemerkintä eri reunoille (toistuvat ominaisuudet)) Value: <border-width> <border-style> <color> Esim. border: P { border: solid red } width (elementin leveys) Value: <length> <percentage> auto 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 107
height (elementin korkeus) Value: <length> auto float (kellutus) Value: left right none clear (kellutus elementin vierellä) Value: none left right both Yleisiä esimerkkejä suorakaideominaisuuksien käyttämisestä: H1 { margin-right: 12.3% } H1 { margin-left: 2em } BLOCKQUOTE { padding-top: 0.3em } H1 { border: solid thick red } P { border: solid thick blue } P { color: black; background: white; border: solid; } #xy34 { border-style: solid dotted } 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 108
CSS1: luokkaominaisuudet Jakavat elementit pikemminkin eri kategorioihin kuin asettavat välittömiä ulkoasullisia ominaisuuksia. Kerrataan ominaisuudet vielä täydellisyyden nimissä: display (elementin esitystyyppi) Value: block inline list-item none white-space (rivinkatkaisu) Value: normal pre nowrap list-style-type (lista-alkion tyyppi) Value: disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none list-style-image (lista-alkion kuvake) Value: <url> none 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 109
list-style-position (lista-alkion kuvakkeen sisennys) Value: inside outside list-style (lyhennemerkintä list-style-ominaisuuksille) Value: [disc circle square decimal lower-roman upperroman lower-alpha upper-alpha none] [inside outside] [<url> none] Esim. list-style: UL { list-style: upper-roman inside } UL UL { list-style: circle outside } Yleisiä esimerkkejä luokkaominaisuuksien käyttämisestä: P { display: block } LI { display: list-item } IMG { display: none } PRE { white-space: pre } P { white-space: normal } OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */ OL { list-style-type: lower-alpha } /* a b c d e etc. */ OL { list-style-type: lower-roman } /* i ii iii iv v etc. */ UL { list-style: url(http://png.com/ellipse.png) disc } 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 110
CSS ja merkistöjen koodaus Kohdatessaan esim. HTML-dokumentin selain törmää ongelmaan: miten annettu tavujono pitäisi tulkita? - käytännössä selain kysyy koodauksen käyttäjältä tai tekee "luovan arvauksen" (esim. ASCII) ja lukee tämän avulla dokumentin koodauksen "tarkemman" tyypin dokumentista (esim. UTF-8) Merkkikoodit esitetään käyttäjälle graafisesti fontin avulla. Fontti on indeksoitu joukko kuvakkeita ([glyph]) - kuvakkeet esitetään bittikarttoina tai vektorikuvina, tämän lisäksi fontista yleensä tiedetään (esim. selain tietää) koodausvektori (muunnosvektori) suhteessa johonkin laajempaan standardiin (esim. Unicode tai ISO/IEC 10646) - jotta useiden fonttien yhteiskäyttö olisi mahdollista, pitää merkkiviittaukset tehdä suoraan fonttien kooditauluviittausten sijaan fontin koodausvektorin avulla Unicode mahdollistaa n. 50 000 eri merkin "yhtäaikaisen" esittämisen - yksittäiset fontit sisältävät kuitenkin vain muutamia satoja kuvakkeita: Unicode indeksoi tyypillisimmät kirjaimet (niitä vastaavat kuvakkeet) 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 111
- Unicode käyttää 16 bittiä yhden merkin esittämiseen, joskin käytännössä koodaustapoja (ns. [encoding forms]) on useita, esim. 7- ja 8-bittiset koodaukset, 16- ja 32-bittiset "kanoniset" koodaukset, jne. Esim. HTML:ssä yksittäisten fonttien kooditaulujen sijaan viittaukset tehdään Unicode-standardin kautta; tällöin valitaan jokin "perusmerkistö" (käytännössä ASCII), josta käsin Unicode-merkkiviittaukset esitetään: Seuraava merkki on iso pii: Π Näin dokumentin koodaaminen onnistuu suoraan esim. ASCIIlla (ja tilaa säästyy, jos merkkiviittauksia on vähän). Huomaa mahdollinen "kahden tason koodaus" (Unicode-tiedosto vs. Unicode-merkkiviittaus). Käytännöllisen ongelman muodostaa se, miten fontti pitäisi valita, kun halutaan esittää yhdistelmä eri fonttien kuvakkeista CSS ei suoranaisesti ota kantaa käytettyyn merkkikoodaukseen, mutta tarjoaa keinon ilmaista, mistä fonteista Unicode-viittauksia vastaavia kuvakkeita tulisi hakea. Seuraavassa esimerkissä kustakin fontista valitaan Unicode-viittauksia vastaavat kuvakkeet (fonteista pitää tällöin tietenkin tietää niiden koodausvektorit Unicoden suhteen) BODY { font-family: Baskerville, Mincho, Symbol, serif } 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 112
Mitä CSS1:llä saa aikaan ja miten sitä pitäisi käyttää? Mielessä kannattaa pitää sisällöntuottajan kultainen sääntö: sisällön tulee olla luonteeltaan abstraktia ja se kannattaa pitää erillään sisällön ulkoisista esitysmuodoista CSS1 soveltuu hyvin pelkistettyjen, sisältöpainotteisten dokumenttien ulkoasun määräämiseen sekä yksinkertaisten adaptiivisten sivujen toteuttamiseen Taulukkojen, vakiokenttien, attribuuttiviittausten ja sivumääritysten puuttuminen on ongelma: - monimutkaisen sivuntaiton toteuttaminen CSS1:llä on mahdotonta - paperidokumenttien tekeminen on kömpelöä ja vaatii paljon ulkoasullista suunnittelua myös rakenteen suhteen - suuri osa dokumentin metatiedosta jää hyödyntämättä Perusongelma on, että CSS ei kykene manipuloimaan dokumentin elementtirakennetta dokumentteja esittäessä ("dressing up") CSS1:n parasta antia ovat 1) tyylikielten perusideoiden esittely, 2) käytön helppous ja 3) kohtuullisen laaja "oikeasti olemassa oleva" selaintuki 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 113
Mitä CSS1:stä "puuttuu"? Sivun käsite ja median valinta yleisemminkin BR-elementin käsittely, taulukot Automaattisesti generoitavat elementit, vakioelementit Elementtien vierekkäisyyteen perustuvat valitsimet Fonttitiedoston eksplisiittinen valinta Elementtirakenteen transformointi ja "yleinen ohjelmoitavuus" Kerrokset, kehykset ja ikkunat Lomake-elementit, kohdistimen käsittely Avainsanamäärittelyjä esim. "yleisesti käytössä" oleville väreille ja muodoille "Yleisiä ominaisuuksia" saisi muutenkin olla enemmän ja ulkoasun mukauttaminen esim. asiakkaan käyttöliittymän ominaisuuksien mukaan pitäisi olla mahdollista 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 114
CSS2 6 CSS2 CSS2 laajentaa CSS1:stä tuoden muassaan ratkaisun osaan edellisistä ongelmista, CSS2:n uusia piirteitä ovat esim: - media-valitsin (aural, braille, embossed, handheld, print, projection, screen, tty, tv, all) - tulostamiseen liittyvät uudet ominaisuudet (sivun koko ja asemointi, marginaalit, rivinkatkaisun hallinta, sivukohtaiset säännöt) - automatisoitu sisällön tuottaminen (tiedon lisääminen elementtien yhteyteen, sekvenssit, attribuuttiarvot) - uudet valitsimet (valinta elementin lapsen ja attribuutin perusteella, valinta vierekkäisten elementtien perusteella, valinta taulukkokontekstin perusteella) - uusia ominaisuuksia (systeemifontit ja fonttien ominaisuudet, kohdistin) - uusia objekteja (taulukot) Tarkastellaan seuraavaksi joitakin CSS2:n "merkittävimpiä" uutuuksia esimerkkien kautta: 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 115
CSS2 Median valinta Median valinta: @media-sääntö: @media print, screen { background: white; color: blue } Esimerkki: ulkoisen tyylitiedoston valinta median mukaan: @import url(fancy.css) projection, tv tai vaihtoehtoisesti, esim: <HEAD> <TITLE>Link to a target medium</title> <LINK rel="stylesheet" type="text/css" media="print, handheld" href="foo.css"> </HEAD> CSS:n mediatyypit voidaan luokitella seuraavin kriteerein: - "continuous or paged", "visual, aural, or tactile" - "grid or bitmap", "interactive or static" tai "all" 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 116
CSS2 Media-valinnan yksityiskohta: tulostaminen @page-sääntö: @page { size: landscape; margin-top: 10%; margin-right:20%; margin-bottom: 10%; margin-left:20%; } Pseudoluokat left ja right: @page:left { background:white; color:red; } Rivinkatkaisu: H1 { page-break-before: always } MYROWS { page-break-inside: avoid } Nimetyt sivut: @page figures { size: portrait } img { page:figures; page-break-inside:avoid } CSS esittelee oleellisesti siis uuden "pseudoelementin": "sivun", jolle määritellään suorakaideominaisuuksia muiden blokkien tavoin 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 117
CSS2 Media-valinnan yksityiskohta: aural media Mediavalitsin "aural" tuottaa kolmiulotteisen, aikaan sidotun äänimaailman 1) useita "puhujia tai kertojia" joilla CSS2:n määrittämiä ominaisuuksia ja sijainti 2) tämän lisäksi tehoste- ja taustaääniä Esimerkkejä : H1, H2, H3, H4, H5, H6 { voice-family: paul; stress: 20; richness: 90; cue-before: url("ping.au") } P.heidi { azimuth: center-left } P.peter { azimuth: right } P.goat { volume: x-soft } BLOCKQUOTE.sad { play-during: url("violins.wav") } P.comment { azimuth: behind } /* 180deg */ CITE { elevation: above } 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 118
CSS2 Automaattinen sisältö CSS2 mahdollistaa myös automaattisen sisällön tuottamisen elementtien yhteyteen, mahdollista on myös lisätä elementtien esitysvaiheessa näkyville (ko. elementin) attribuuttiarvoja Esimerkkejä: BODY:after { /* pseudoelementti "after" */ content: "The End"; display: block; margin-top: 2em; text-align: center; } H1:before { /* autom. laskuri: "1." jne. */ content: "Chapter " counter(chapter) ". "; counter-increment: chapter; /* Add 1 to chapter */ counter-reset: section; /* Set section to 0 */ } H2:before { /* autom. laskuri: "1.1." jne. / content: counter(chapter) "." counter(section) " "; counter-increment: section; } 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 119
CSS2 Systeemifontit CSS2:n huomionarvoinen ominaisuus on fontin valinta, lataaminen palvelimelta, asteittainen esittäminen ja Unicode-muunnosvektorin esittely Esimerkkejä fontin määrittämisestä: @font-face: @font-face { font-family: "Robson Celtic"; src: url("http://site/fonts/rob-celt") } @font-face { font-family: "Swiss 721"; src: url("swiss721lt.pfr"); /* Swiss 721 light */ font-style: normal, italic; font-weight: 200; } @font-face { font-family: Excelsior; src: local("excelsior EastA Roman"), url("http://site/ear") format("intellifont"); unicode-range: U+100-220; /* Latin Extended A and B */ } H1 { font-family: "Robson Celtic", serif } /* let's use RC */ 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 120
CSS2 Taulukot Sivun elementtien asemointi helpottuu taulukkojen myötä, käytännössä asia hoituu elementtien uudentyyppisten display-arvojen avulla: inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footergroup table-row table-column-group table-column table-cell table-caption none Esimerkki: olkoon määritelty (esim. XML-)taulukko: <STACK> <ROW>This is the <D>top</D> row. </ROW> <ROW>This is the <D>bottom</D> row.</row> </STACK> Tällöin CSS-määrittely voisi olla esim: STACK { display: inline-table } ROW { display: table-row } D { display: inline; font-weight: bolder } 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 121
CSS2 Huomautuksia CSS1 on jo "kohtuullisesti" käytössä (NN4.5+, IE4.01+, Opr3.6+) - ennen laajamittaista käyttöönottoa kannattaa tosin tutustua testeihin tai systemaattisesti kokeilla omia dokumentteja kohdeselaimissa CSS2:sta tuetaan "yleisesti" huomattavasti heikommin; osa ominaisuuksista "vasta tulossa", kun taas osa ominaisuuksista (esim. mediavalitsimet) viittaa selkeästi tiettyihin erityissovelluksiin Kohtuullisen ohjelmistotuen ansiosta CSS tulee olemaan käytössä myös lähitulevaisuuden XML-sovelluksissa CSS rooli jatkossa on kuitenkin epävarma: - CSS on helppo ja nopea, hyvin tuettu, mutta samalla rajoitettu (ei loppujen lopuksi erota hyvin sisältöä ja ulkoasua) - tulossa on muita "parempia" (monipuolisempia) standardeja, joita tuetaan CSS:n kanssa rinta rinnan (läh. XSL) "Näppituntuma": CSS kokee samantyyppisen elonkaaren kuin HTML:kin, mutta lyhyemmällä aikavälillä (CSS3:n hyvyys ratkaissee tämän) 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 122
CSS2 Katso myös W3C:n tyylisivut (ks. http://www.w3.org/style/css/) CSS1-suositus (ks. http://www.w3.org/tr/rec-css1) CSS2-suositus (ks. http://www.w3.org/tr/rec-css2/) Unicode ("Unicode & HTML", ks. http://www.w3.org/international/ounicode.html ja "Unicode home page", ks. http://www.unicode.org/) Käytännönläheinen CSS(2)-tutoriaali, "Everything you ever wanted to know about Style" (ks. http://www.westciv.com/style_master/academy/css_tutorial/index.html) Käytännössä annattaa tutustua myös testeihin selainten CSS-ominaisuuksista (ks. esim. "webreview.com" http://webreview.com/pub/guides/style/style.html ja "Browser Compatibility" http://www.westciv.com/style_master/academy/browser_support/index.html) CSS:n tarina ei suinkaan (todennäkoisesti) pääty CSS2:een, vaan CSS3 on jo tekeillä (ks. http://www.w3.org/style/css/current-work) 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 123