Pseudoelementit. P:first-line { font-style: italic } H1:first-letter { font-size: bigger }

Transkriptio

1 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 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 85

2 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) RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 86

3 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 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 87

4 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 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 88

5 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 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 89

6 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") RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 90

7 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) RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 91

8 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!) RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 92

9 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%) } RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 93

10 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( } P { font-weight: bold } Arvojen lailliset tyypit ovat tietenkin ominaisuuskohtaisia RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 94

11 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) RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 95

12 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 */ EM { color: rgb(100%, 0%, 0%) } /* float range 0.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(" } RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 96

13 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 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 97

14 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 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 98

15 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 font-size (kirjasinkoko) Value: <absolute-size> <relative-size> <length> <percentage> RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 99

16 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 } RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 100

17 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 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 101

18 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; } RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 102

19 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 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 103

20 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 */ RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 104

21 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} RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 105

22 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} RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 106

23 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 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 107

24 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 } RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 108

25 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 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 109

26 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 } /* 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( disc } RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 110

27 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 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) RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 111

28 - 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 } RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 112

29 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 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 113

30 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 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 114

31 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: RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 115

32 CSS2 Median valinta print, screen { background: white; color: blue } Esimerkki: ulkoisen tyylitiedoston valinta median 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" RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 116

33 CSS2 Media-valinnan { size: landscape; margin-top: 10%; margin-right:20%; margin-bottom: 10%; margin-left:20%; } Pseudoluokat left ja { background:white; color:red; } Rivinkatkaisu: H1 { page-break-before: always } MYROWS { page-break-inside: avoid } Nimetyt 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 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 117

34 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 } RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 118

35 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; } RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 119

36 CSS2 Systeemifontit CSS2:n huomionarvoinen ominaisuus on fontin valinta, lataaminen palvelimelta, asteittainen esittäminen ja Unicode-muunnosvektorin esittely Esimerkkejä { font-family: "Robson Celtic"; src: url(" { font-family: "Swiss 721"; src: url("swiss721lt.pfr"); /* Swiss 721 light */ font-style: normal, italic; font-weight: 200; { font-family: Excelsior; src: local("excelsior EastA Roman"), url(" format("intellifont"); unicode-range: U ; /* Latin Extended A and B */ } H1 { font-family: "Robson Celtic", serif } /* let's use RC */ RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 120

37 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 } RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 121

38 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) RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 122

39 CSS2 Katso myös W3C:n tyylisivut (ks. CSS1-suositus (ks. CSS2-suositus (ks. Unicode ("Unicode & HTML", ks. ja "Unicode home page", ks. Käytännönläheinen CSS(2)-tutoriaali, "Everything you ever wanted to know about Style" (ks. Käytännössä annattaa tutustua myös testeihin selainten CSS-ominaisuuksista (ks. esim. "webreview.com" ja "Browser Compatibility" CSS:n tarina ei suinkaan (todennäkoisesti) pääty CSS2:een, vaan CSS3 on jo tekeillä (ks RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 123