HTML ja tyylit. 4 HTML ja tyylit

HTML ja tyylit 4 HTML ja tyylit Yksi HTML:n perinteisistä ongelmista on ollut se, että kehittäjät haluavat itse määrittää sen miltä dokumenttien tulee näyttää, käytännössä tämä johtaa dokumenttien formatointiin niiden rakenteen puhtaan määrittelyn sijaan - elementtien ulkoasun päättää selain (vieläpä eri selaimet eri tavalla) - HTML-elementtejä ei ole riittävästi, jotta deklaratiivinen merkintä olisi aina mahdollista Useissa sovelluksissa on kuitenkin perusteltua asettaa vaatimuksia myös dokumenttien ulkoasulle - toisaalta formatoivat HTML-elementit aiheuttavat ongelmia. Mikä ratkaisuksi? Vastaus: tarjotaan HTML-kehittäjälle mahdollisuus yksikäsitteisesti päättää, miltä annetun elementin tulee näyttää Ratkaisu: tyylien käyttö (toisinaan käytetään myös termejä: tyylipohja, tyyliarkki, tyylimääritys, jne.) 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 57

HTML ja tyylit Mitä tyylit ovat? Yksinkertaisimmillaan tyyli on joukko ohjeita tai sääntöjä, jonka perusteella selain (tms.) osaa valita rakenne-elementille sopivan ulkoasun Idea: lähdedokumentti + tyylimääritys "katselu" kohdedokumentti Puhtaasti lopputuloksen ulkoasun kannalta tyylien käyttö ei välttämättä näy dokumenttia katseltaessa: tyylien käyttö helpottaa, systematisoi ja tehostaa dokumenttien suunnittelu- ja toteutustyötä - yhden ja saman lähdedokumentin eri esitysversiot (media+käyttötarkoitus) - käytännössä kohdedokumentti tai dokumentin esitysversio voi olla jopa HTML-dokumentti, jossa HTML-elementtejä on käytetty puhtaasti formatointimielessä (kyseessä on tällöin kuitenkin eri dokumentti) - oleellista on se, että dokumentin ulkoasulliset muutokset edellyttävät mahdollisimman vähän dokumentin sisällön ja rakenteen muuttamista (tai ei ollenkaan) ja päinvastoin! Yleensä tyylit viittaavat johonkin tiettyyn tyylikieleen (esim. CSS), joka sisältää kieliopin ja formatointi- ja asemointikäskyt elementtien ulkoasun kuvailemiseksi 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 58

HTML ja tyylit Tyylien käytöstä Yhden ja saman dokumentin ulkoasu voidaan kuvata hyvinkin erilaisilla tyylikielillä (esim. CSS(1-3), JSS, XSL, DSSSL, ) Tyylejä (tyylikieliä) on perusluonteeltaan kahta eri tyyppiä: dokumentin elementtien muodostaman puurakenteen säilyttäviä tai puurakenteen muuttavia ([dressing up] vs. [transforming]) Vaikka ihannetapauksessa dokumentin ulkoasun suunnittelu pyritäänkin erottamaan täysin sen rakenteen suunnittelusta, ei tähän käytännössä aina päästä, syitä tähän: - halutaan, että dokumentit näyttävät järkeviltä myös ilman erikseen määritettyä (ja prosessoitua!) ulkoasua - käytetty tyylikieli ei välttämättä tarjoa riittävästi mahdollisuuksia dokumentin elementtirakenteen muuttamiseen tai vakio- yms. kenttien lisäämiseen - rakenteiden suunnittelu ulkoasu mielessä pitäen on usein käytännössä helpompaa sekä rakenteen suunnittelun että ulkoasun (ohjelmallisen) tuottamisen näkökulmasta 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 59

HTML ja tyylit CSS Cascading Style Sheets (CSS) on menetelmä jonka avulla esim. HTMLdokumenttien elementtien ulkoasu voidaan (kohtuullisen suurelta osin) määrittää täsmällisesti Perusominaisuudet - rungon muodostavat muotoilusäännöt - säännöt voivat sijaita joko suoraan itse elementissä, dokumentissa tai ulkoisessa tiedostossa - elementtiin vaikuttava tyyli määräytyy tyylien limityksen ([cascade]) perusteella - osa ominaisuuksista periytyy elementtien sisäkkäisrakenteen perusteella CSS ei ole sitoutunut vain ja ainoastaan HTML-tyylien tekemiseen (ei edes CSS1), vaan sitä voidaan periaatteessa käyttää myös muualla (XML, VRsovellukset, ) 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 60

HTML ja tyylit Historiaa - CSS1 suositus: 1996 ("korjattu painos" 1999) - CSS2 suositus: 1998 (CSS3 on jo kehitteillä) Käytännössä uusimmat selaimet tukevat CSS1:stä, laajamittainen CSS2-tuki vasta tulossa Kannattaa pitää mielessä, vaikka käytännössä CSS:n avulla joskus pyritäänkin pikselintarkkaan ulkoasuun, ei spesifikaatio tähän mahdollisuutta virallisesti tarjoa, vaan puhuu vain ulkoasullisten suositusten tai ehdotusten ([suggestion]) antamisesta selaimelle Syitä CSS:n käyttämiseen - CSS1 on jo laajasti käytössä - CSS:n syntaksi on yksinkertaista ja kieli sisältää tehokkaita ominaisuuksia (limitys, konteksti, perintä, ) - CSS voidaan yleistää ja ottaa suoraviivaisesti käyttöön myös esim. XMLtyylikielenä - muut HTML-käyttöön soveltuvat tyylikielet ovat jäämässä marginaaliseen asemaan (esim. JSS jolla ei ole W3C:n suosituksen statusta) 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 61

HTML ja tyylit Ajatus kaiken taustalla Perimmäisenä tarkoituksena tarjota formatointi- ja taittokieli, jonka avulla elementtirakenteisten dokumenttien ulkoasun määrittely voidaan irrottaa sisällön ja rakenteen määrittelystä HTML:n tapauksessa tämä tarkoittaa käytännössä ainoastaan sisällön ja ulkoasun erottamista toisistaan, koska HTML-dokumenteillahan on jo periaatteessa tietty rakenne (joka joskin on melko yleinen) CSS1: - syntaksi ja tyylien liittäminen dokumentteihin + peruskäsitteet: limitys, ryhmittely, perintä, konteksti, luokat, pseudoluokat ja -elementit, mittayksiköt - perusominaisuudet: kirjasimet, värit, kappaleet, laatikot, luokittelu, CSS2 sisältää CSS1:n lisäksi myös - uusia käsitteitä: media, tulostaminen & sivun käsite, ohjelmallisesti tuotettu sisältö, elementtien vierekkäisyys, taulukot, lapset, - uusia ominaisuuksia: systeemikirjasimet, kursorit, varjostus, 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 62

5 CSS1 Aloitetaan esimerkillä käytännön tyylimäärityksestä: H1 { color: blue; font-size: 26pt } H2 { color: black! important; font-size: 26pt } P { font-size: 12pt } Tyylimääritys koostuu säännöistä ([rule]) Sääntöjen perusosat: - valitsin ([selector]), esim. "H1" - määrittely ([declaration]), esim. "{ color: blue; font-size: 26pt }" Säännön valitsinosa kirjoitetaan ISOILLA kirjaimilla! Säännön määrittelyosassa kirjaimen koolla ei ole merkitystä 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 63

Määrittelyosa: - ominaisuus ([property]), esim. "color", jota seuraa kaksoispiste (:) ja - arvo ([value]), esim. "blue" Ominaisuuksien arvon jälkeen voi esiintyä avainsana "!important", joka painottaa ko. ominaisuuden tärkeyttä Jos ominaisuuksia annetaan kerralla useita, erotetaan ne toisistaan puolipisteellä (;) - ominaisuuksien järjestyksellä ei ole merkitystä P { color: black; font-size: 26pt } Jos ominaisuudelle voidaan antaa useita arvoja, erotetaan ne toisistaan välilyönneillä P { font: italic 14pt Times } H1 { border-width: thin thick medium thin } Jotkin ominaisuudet edellyttävät useita arvoja, jotka erotetaan toisistaan pilkulla (,) P {font-family: "New Century Schoolbook", Garamond, serif} 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 64

Tyylien liittäminen (XHTML-)dokumentteihin Kolme vaihtoehtoa: 1) inline-tyylimääritykset, 2) dokumenttikohtaiset tyylimääritykset tai 3) ulkoiset tyylitiedostot Esimerkki inline-tyylimääreestä: <p style="color: red">olen punainen!</p> Esimerkki dokumenttikohtaisesta tyylimääreestä: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ruusuinen tervehdys, maailma!</title> <style type="text/css"> <!-- P { color: red } --> </style> </head> <body> <p>ruusut ovat punaisia - kuten minä.</p> </body> </html> 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 65

Esimerkki 1/2 ulkoisesta tyylitiedostosta ja sen käyttämisestä: link-elementti tiedosto punainen.css: P { color: red } HTML-dokumentti: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ruusuinen tervehdys, maailma!</title> <link rel="stylesheet" type="text/css" href="punainen.css" title="punaiset kappaleet"/> </head> <body> <p>ruusut ovat punaisia - kuten minä.</p> </body> </html> Linkitys toteutetaan link-elementillä - relaatio, tyyppi, resurssi ja otsikko URL-viittaus tyylitiedostoon, joka tulkitaan pelkäksi tekstitiedostoksi 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 66

Esimerkki 2/2 ulkoisesta tyylitiedostosta ja sen käyttämisestä: @IMPORT tiedosto punainen.css: P { color: red } HTML-dokumentti: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ruusuinen tervehdys, maailma!</title> <style type="text/css"> <!-- @import url(punainen.css); --> </style> </head> <body> <p>ruusut ovat punaisia - kuten minä.</p> </body> </html> CSS1 Nyt tyyli liitetään dokumentin tyylimääritykseen linkkirelaation sijaan CSS:n @import-komennolla XHTML Basic ei sisällä style-elementtiä, joten tyylitiedoston liittäminen tehdään aina link-elementin avulla 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 67

Tyylien yhteisvaikutus Eritasoiset tyylimääritykset (inline/dokumentti/ulkoinen) yhdistetään elementtiin vaikuttavaksi tyyliksi limittämällä ([cascade]) Käytännössä limitys tarkoittaa sitä, että päällekkäisten sääntömääritysten tapauksessa elementeille annetut ominaisuudet yhdistetään siten, että viimeisin tai lähinnä elementtiä oleva sääntö jää voimaan Tarkempi sovellettavien sääntöjen valinta-algoritmi on kutakuinkin seuraava: - valitse läheisin tai peritty soveltuva sääntö - valitse valitun luokan ja säännön painoarvon mukaan (huom. "important" vs. "normal") - valitse tarkimman säännön mukaan (konteksti!) - jos vieläkin voidaan soveltaa useita sääntöjä, valitse näistä viimeisin Viime kädessä dokumentin lukija saattaa vielä pakottaa tyylin haluamakseen Pulmia: limitys on varsin mutkikas toteuttaa ja suhde HTML-kielen määrittelemien formatointielementtien ja -attribuuttien käyttöön on epäselvä 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 68

Esimerkki limityksestä tiedosto punainen.css: P { color: red } HTML-dokumentti: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>limitä tämä!</title> <link rel="stylesheet" type="text/css" href="red.css"/> <style type="text/css"> <!-- P { font-size: 12pt } --> </style> </head> <body> <p>tämä kappale on punainen ja kirjasimen koko on 12pt.</p> <p style="color: blue">tämä kirjasin on sinenen, koko säilyy samana.</p> </body> </html> 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 69

Link vs. @import Jos HTML-dokumentti sisältää useita link-elementtejä, selain kysyy käyttäjältä, mitä tyylitiedostoa dokumentin esittämiseen käytetään (tai valitsee näistä vain yhden) - ts. valituksi tulee tasan yksi tyylitiedosto @import-kommento taas yksinkertaisesti yhdistää eri tyylitiedostot yhdeksi efektiiviseksi tyylimääritykseksi (päällekirjoittamalla jo aiemmin määritetyt @import- ja link-tyylit tarvittaessa) @import-komentoja voi sisällyttää myös CSS-tyylitiedostoihin (ja siten ketjuttaa näitä) link-elementti on osa HTML-spesifikaatiota, joka sisältyy aina HTMLdokumenttiin @import on CSS-komento, jonka on esiinnyttävä ennen ensimmäistäkään CSS-sääntöä; muussa tapauksessa selain hylkää tätä edeltävät CSSmääritykset Muita @-tyyppisiä CSS-erikoiskomentoja tai sääntöjä ovat @font-face, @media ja @page (näihin palataan myöhemmin CSS2:n yhteydessä) 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 70

Inline-tyyli vs. dokumenttityyli vs. ulkoinen tyyli 1) Inline-tyylien käyttöä tulisi välttää kokonaan; parempi vaihtoehto on käyttää joko luokkavalitsimia tai elementtien ID-valitsimia (näihin palataan kohta) 2) Dokumenttikohtaiset tyylimäärittelyt soveltuvat (sellaisenaan) hyvin esim. pieniin dokumentteihin tai tyylien suunnitteluun ja testaukseen 3) Ulkoiset tyylitiedostot tarjoavat mahdollisuuden yleiskäyttöisten tyylimääritysten tekemiseen ja ovat siten suositeltavia - dokumentin tyylin vaihtaminen on helppoa (tyyli voidaan helposti jopa kysyä käyttäjältä) - yhtä tyylitiedostoa muuttamalla voidaan muuttaa useiden dokumenttien ulkoasu - mahdollisuus toteuttaa monipuolisia tyylikirjastoja (@import!) Käytännössä suurin hyöty tyyleistä saadaan kun käytetään yhdessä tapoja 2 ja 3 - tällöin elementtiin vaikuttava tyyli määräytyy käytännössä perinnän ja päällekirjoittamisen kautta 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 71

Ryhmittely Kirjoitustyön vähentämiseksi useiden sääntöjen antaminen on mahdollista yhdellä kertaa ryhmittelyn ([grouping]) avulla: H1, H2, H3 { font-family: helvetica } Useiden ominaisuuksien antaminen yhdellä kertaa on tietenkin myös mahdollista: H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; font-variant: normal; font-style: normal; } Joillakin ominaisuuksilla on myös oma ryhmittelysyntaksinsa: H1 { font: bold 12pt/14pt helvetica } Tällöin arvojen järjestyksellä on tietenkin merkitystä! 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 72

Perintä Perinnän avulla dokumentissa sijaitsevien (konkreettisten) elementtien tyylisäännöt määräytyvät oletuksena niiden hierarkkisten vanhempien tyylien perusteella ([inheritance]) Seuraavassa esimerkissä elementti b perii elementin p ne (perittävissä olevat) ominaisuudet, joita b:lle ei erikseen ole asetettu: <p>sininen <b>pullea</b> teksti</p> Periytyvät ominaisuudet määräytyvät intuitiivisten CSS-sääntöjen mukaan - esim. background-ominaisuus ei periydy (näkyy tosin läpi) - esim. color-ominaisuus periytyy Periytyminen tapahtuu myös, vaikka isäelementin alku- ja lopputageja ei olisi merkitty näkyviin (esim. elementit body ja p) Näin ollen koko HTML-dokumentin kaikkien elementtien "oletusominaisuudet" voidaan asettaa body-elementin avulla: BODY {color: black; background: url(taustakuva.gif);} 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 73

Elementtikonteksti Tyylien vaikutusaluetta voidaan edelleen täsmentää valitsimen kontekstimäärityksen avulla ([contextual selector]) Seuraava esimerkki määrää tyylin elementin h1 sisällä olevalle elementille b: H1 B { color: blue } Kontekstin tarkkuus voidaan valita vapaasti (useampitasoinen konteksti): UL LI { font-size: small } UL UL LI { font-size: x-small } Konteksti- ja ryhmittelymäärityksiä voidaan yhdistää kirjoitustyön vähentämiseksi: H1 B, H2 B, H1 EM, H2 EM { color: red } Huomaa valitsinkontekstin ero ryhmittelyyn (kontekstissa ei pilkkua) CSS1 tunnistaa vain isäkontekstin (CSS2 laajentaa kontekstin käsitettä) 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 74

Elementtirakenteen hienontaminen: luokat ja ID Rakenne-elementtien rakeisuuden lisääminen onnistuu luokkavalitsimien avulla: P.erikoinen { font-style: italic; font-size: 14pt; color: purple } Luokkien käyttöönotto tapahtuu elementin class-attribuutin avulla: <p class="erikoinen">purppura näyttää hyvältä.</p> Myös geneeriset luokat ovat mahdollisia:.sininen { color: blue } Geneerisiä luokkia voidaan käyttää minkä tahansa tyyppisten (nimisten) elementtien yhteydessä: <p class="sininen">myös sininen teksti näyttää hyvältä.</p> <b class="sininen">sininen pullea teksti.</b> 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 75

Luokkavalitsimien nimet ovat mielivaltaisia nimiä, mutta suositeltavaa on käyttää vain alfanumeerisia merkkejä sekä välttää avainsanojen käyttöä Luokkavalitsimien ketjuttaminen ei ole sallittua (P.erikoinen.sininen ei ole sallittu valitsin) Myös rakenne-elementtien (erityisen ja aina yksikäsitteisen) id-attribuutin käyttö valitsimena on mahdollista CSS1 Seuraavassa esimerkissä ensimmäinen tyylimääritys asetetaan täsmälleen yhdelle elementille, jonka id-attribuutin arvo on "keltainenelementti", toinen h1-elementille jonka id-attribuutin arvo on "sininenelementti": #keltainenelementti { color: yellow } H1#sininenElementti { color: blue } Em. määritykset otetaan automaattisesti käyttöön seuraaville elementeille <p id="keltainenelementti">aurinko lämmittää</p> <h1 id="blueelement">kylmä talvi</h1> (Geneeristen)luokka- ja id-attribuuttien avulla myös yksittäisten elementtien formatointi on mahdollista (suositeltavaa käyttää inline-tyylien sijaan mutta laajamittainen käyttö ei tässäkään suositeltavaa) 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 76

Pseudoluokat Ns. pseudoluokkien avulla on mahdollista ottaa huomioon selaimen toiminta ja siten esim. vuorovaikutteisuus (CSS1:ssä vain elementissä a) Tyypillisiä pseudoluokkia ovat ankkurivalitsimien tarkentimet (yleensä selaimet koodaavat esim. vieraillut linkit graafisesti eri tavoin kuin vierailemattomat): A:link { color: red } /* vierailematon linkki */ A:visited { color: blue } /* vierailtu linkki */ A:active { color: lime } /* aktiivinen linkki */ On syytä huomata, että tämäntyyppisten pseudoluokat saattavat olla selaimen näkökulmasta raskaita toteuttaa (esim. kirjasinkoon muutokset) Pseudoluokat ja tavalliset luokat ovat eri asioita (pseudoluokkien nimet ovat avainsanoja, joissa isoilla ja pienillä kirjaimilla ei ole eroa) Pseudoluokkien yhteydessä myös konteksti ja luokat ovat sallittuja: A:link IMG { border: solid blue } A.external:visited { color: blue } 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 77

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 2004) luentorunko ON & JH 78

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 2004) luentorunko ON & JH 79

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 2004) luentorunko ON & JH 80

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 2004) luentorunko ON & JH 81

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 2004) luentorunko ON & JH 82

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} /* kaikki marginaalit 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 2004) luentorunko ON & JH 83

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-tyyppiset 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 2004) luentorunko ON & JH 84

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) kirjasinominaisuudet ([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 2004) luentorunko ON & JH 85

Sovelluskohtaisten oletusominaisuuksien lisäksi joillakin CSS-ominaisuuksilla on oletusarvoja, esim: - font-weight: normal - border-style: none - background-color: transparent 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 2004) luentorunko ON & JH 86

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.grafiikat.com/tiilet.gif) } P { font-weight: bold } Arvojen lailliset tyypit ovat tietenkin ominaisuuskohtaisia 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 87

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 } /* elementin kirjasimen korkeus */ H1 { margin: 1ex } /* x-kirjaimen korkeus */ P { font-size: 12px } /* pikseli */ CSS1:n absoluuttiset pituusyksiköt ovat in, cm, mm, pt ja pc: H1 { margin: 0.5in } /* tuuma, 1in = 2.54cm */ H2 { line-height: 3cm } /* senttimetri */ H3 { word-spacing: 4mm } /* millimetri */ H4 { font-size: 12pt } /* piste, 1pt = 1/72 in */ H4 { font-size: 1pc } /* pika, 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 2004) luentorunko ON & JH 88

Prosenttiarvot annetaan aina suhteessa johonkin toiseen arvoon (totta kai) Yleensä prosenttiarvo annetaan suhteessa elementin kirjasimen kokoon, vrt. esim: P { line-height: 120% } /* 120% elementin 'font-size'-arvosta */ 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.taustat.com/rattaat.gif) } 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 89

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 tai tietyn elementin perimiin arvoihin 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 90

CSS1-ominaisuuksien määrittely CSS-ominaisuudet määritellään CSS-suosituksessa seuraavaan tapaan: 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 2004) luentorunko ON & JH 91

CSS1: kirjasinominaisuudet font-family (esityskirjasin) Value: [[<family-name> <generic-family>],]* [<family-name> <generic-family>] (oletuksena löytyvät: serif,sans-serif,cursive,fantasy,monospace) font-style (kirjasimen tyyli) Value: normal italic oblique font-variant (kirjasimen merkkikoko) 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 2004) luentorunko ON & JH 92

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ä kirjasinominaisuuksien 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 2004) luentorunko ON & JH 93

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 toisto) Value: repeat repeat-x repeat-y no-repeat background-attachment (taustakuvan kiinnitys) Value: scroll fixed 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 94

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(tausta.png) gray 50% repeat fixed } Yleisiä esimerkkejä elementin väri- ja taustaominaisuuksien käyttämisestä: BODY { background-image: url(marmori.gif) } P { background-image: none } BODY { background: red url(koristeellinen.gif); background-repeat: repeat-y; background-attachment: fixed; } 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 95

CSS1: tekstiominaisuudet word-spacing (sanojen välistys) Value: normal <length> letter-spacing (kirjainten välistys) Value: normal <length> text-decoratorion (tekstin koristelu) 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 2004) luentorunko ON & JH 96

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 2004) luentorunko ON & JH 97

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 2004) luentorunko ON & JH 98

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 2004) luentorunko ON & JH 99

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 2004) luentorunko ON & JH 100

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 2004) luentorunko ON & JH 101

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 2004) luentorunko ON & JH 102

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/ellipsi.png) disc } 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 103

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 selaintuki 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 104

Mitä CSS1:stä puuttuu? Sivun käsite ja median valinta yleisemminkin BR-elementin käsittely, taulukot Kirjasintiedoston täsmällinen määritteleminen ja lataaminen verkosta Automaattisesti generoitavat elementit, vakioelementit Elementtien vierekkäisyyteen perustuvat valitsimet Elementtirakenteen muuntaminen ja yleinen ohjelmoitavuus Kerrokset, kehykset ja ikkunat Lomake-elementit, kohdistimen käsittely Avainsanamäärittelyjä esim. yleisille 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 2004) luentorunko ON & JH 105