HTML ja tyylit. 5 HTML ja tyylit

Transkriptio

1 HTML ja tyylit 5 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-tageja ei ole "riittävästi", jotta deklaratiivinen merkintä olisi aina mahdollista Useissa sovelluksissa on kuitenkin perusteltua asettaa vaatimuksia myös dokumenttien ulkoasulle - HTML-koodit formatointimerkintöinä aiheuttavat ongelmia. Mikä ratkaisuksi? Vastaus: tarjotaan HTML-kehittäjälle mahdollisuus eksplisiittisesti päättää, miltä annetun elementin tulee näyttää Ratkaisu: tyylien käyttö (toisinaan käytetään myös termejä: tyylipohja, tyyliarkki, tyylimääritys, jne.) RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 71

2 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 missään" - 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-koodeja 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 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 72

3 HTML ja tyylit Tyylien käytöstä Yhden ja saman dokumentin "sama" 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 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 73

4 HTML ja tyylit CSS Cascading Style Sheets (CSS) on menetelmä jonka avulla esim. HTMLdokumenttien elementtien ulkoasu voidaan (kohtuullisen suurelta osin) eksplisiittisesti määrittää Perusominaisuudet - rungon muodostavat muotoilusäännöt - säännöt voivat sijaita joko suoraan itse elementissä, dokumentissa tai ulkoisessa tiedostossa - elementin efektiivisen 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, ) RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 74

5 HTML ja tyylit Historiaa - CSS1 suositus: 1996 ("korjattu painos" 1999) - CSS2 suositus: 1998 (CSS3 on jo kehitteillä) Käytännössä "yleisimmät & uusimmat" selaimet tukevat CSS1:stä, CSS2 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) RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 75

6 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ä "vain" 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: fontit, värit, kappaleet, laatikot, luokittelu, CSS2 sisältää "CSS1:n lisäksi" myös - uusia käsitteitä: media, tulostaminen & sivun käsite, autom. tuotettu sisältö, elementtien vierekkäisyys, taulukot, lapset, - uusia ominaisuuksia: systeemifontit, kursorit, varjostus, RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 76

7 6 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" - esittelyosa ([declaration]), esim. "{ color: blue; font-size: 26pt }" Säännön valitsinosa kirjoitetaan ISOILLA kirjaimilla! Säännön esittelyosassa isoilla ja pienillä kirjaimilla ei ole eroa RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 77

8 Esittelyosa: - 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} RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 78

9 Tyylien liittäminen (HTML4-)dokumentteihin Kolme vaihtoehtoa: 1) inline-tyylimääritykset, 2) dokumenttikohtaiset tyylimääritykset tai 3) ulkoiset tyylitiedostot Esimerkki inline-tyylimääreestä: <P STYLE="color: red">simons says: turn red!</p> Esimerkki dokumenttikohtaisesta tyylimääreestä: <HTML> <HEAD> <TITLE>Hello world</title> <STYLE TYPE="text/css"> <!-- P { color: red } --> </STYLE> </HEAD> <BODY> <P>Roses are red - so am I. </BODY> </HTML> RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 79

10 Esimerkki 1/2 ulkoisesta tyylitiedostosta ja sen käyttämisestä: LINK tiedosto red.css: P { color: red } HTML-dokumentti: <HTML> <HEAD> <TITLE>Hello world</title> <LINK REL="stylesheet" TYPE="text/css" HREF="red.css" TITLE="Red Paragraphs"> </HEAD> <BODY> <P>Roses are red - so am I. </BODY> </HTML> Linkitys toteutetaan LINK-elementillä - relaatio, tyyppi, resurssi ja otsikko URL-viittaus tyylitiedostoon, joka tulkitaan "pelkäksi tekstitiedostoksi" RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 80

11 Esimerkki 2/2 ulkoisesta tyylitiedostosta ja sen tiedosto red.css: P { color: red } HTML-dokumentti: <HTML> <HEAD> <TITLE>Hello world</title> <STYLE TYPE="text/css"> url(red.css); --> </STYLE> </HEAD> <BODY> <P>Roses are red - so am I. </BODY> </HTML> CSS1 Nyt tyyli liitetään dokumentin tyylimääritykseen linkkirelaation sijaan RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 81

12 Tyylien liittäminen XHTML-dokumentteihin Tyylitiedoston liittäminen XHTML-dokumenttiin poikkeaa HTML 4:stä ainoastaan XML-kieliopin vaatimien muutosten osalta <html xmlns=" <head> <link rel="stylesheet" type="text/css" href="tyyli.css" /> <title>xhtml and CSS</title> </head> <body> <p>first chapter</p> </body> </html> XHTML Basic ei sisällä STYLE-elementtiä, joten tyylitiedoston liittäminen tehdään aina LINK-elementin avulla RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 82

13 Tyylien yhteisvaikutus Eritasoiset tyylimääritykset (inline/dokumentti/ulkoinen) yhdistetään efektiiviseksi 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 spesifisimmän 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 "perinteisten" formatointielementtien ja -attribuuttien käyttöön on epäselvä RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 83

14 Esimerkki limityksestä tiedosto red.css: P { color: red } HTML-dokumentti: <HTML> <HEAD> <TITLE>Cascade that!</title> <LINK REL="stylesheet" TYPE="text/css" HREF="red.css"> <STYLE TYPE="text/css"> <!-- P { font-size: 12pt } --> </STYLE> </HEAD> <BODY> <P>This paragraph is red and the font-size is 12pt. <P STYLE="color: blue">this is blue, size is the same. </BODY> </HTML> RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 84

15 Link 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 taas yksinkertaisesti yhdistää eri tyylitiedostot yhdeksi efektiiviseksi tyylimääritykseksi (päällekirjoittamalla jo aiemmin ja link-tyylit voi sisällyttää myös CSS-tyylitiedostoihin (ja siten ketjuttaa näitä) LINK-elementti on osa HTML-spesifikaatiota, joka sisältyy aina 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 CSS-erikoiskomentoja tai (näihin palataan myöhemmin CSS2:n yhteydessä) RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 85

16 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 elementin efektiivinen tyyli määräytyy käytännössä perinnän ja päällekirjoittamisen kautta RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 86

17 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ä! RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 87

18 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>Blue <B>fat</B> text</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(mypic.gif) blue } RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 88

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

20 Elementtirakenteen hienontaminen: luokat ja ID Rakenne-elementtien rakeisuuden lisääminen onnistuu luokkavalitsimien avulla: P.freaky { font-style: italic; font-size: 14pt; color: purple } Luokkien käyttöönotto tapahtuu elementin STYLE-attribuutin avulla: <P CLASS="freaky">Weird Al says that purple is good.</p> Myös geneeriset luokat ovat mahdollisia:.blue { color: blue } Geneerisiä luokkia voidaan käyttää minkä tahansa tyyppisten (nimisten) elementtien yhteydessä: <P CLASS="blue">Weird Al says that blue is good, too.</p> <B CLASS="blue">Fat blue text.</b> RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 90

21 Luokkavalitsimien nimet ovat mielivaltaisia nimiä, mutta suositeltavaa on käyttää vain alfanumeerisia merkkejä sekä välttää avainsanojen käyttöä CSS1 Luokkavalitsimien ketjuttaminen ei ole sallittua (P.freaky.blue ei ole sallittu valitsin) Myös rakenne-elementtien (erityisen ja aina yksikäsitteisen) ID-attribuutin käyttö valitsimena on mahdollista Seuraavassa esimerkissä ensimmäinen tyylimääritys asetetaan täsmälleen yhdelle elementille, jonka ID on "yellowelement", toinen H1-elementille jonka ID on "blueelement": #yellowelement { color: yellow } H1#blueElement { color: blue } Em. määritykset otetaan automaattisesti käyttöön seuraaville elementeille <P ID="yellowElement">"Once upon a time in China" is a </P> <H1 ID="blueElement">Cold Winter</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) RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 91

22 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. "käytetyt" ankkurit graafisesti eri tavoin kuin "käyttämättömät"): A:link { color: red } /* unvisited link */ A:visited { color: blue } /* visited links */ A:active { color: lime } /* active links */ On syytä huomata, että tämäntyyppisten pseudoluokat saattavat olla selaimen näkökulmasta raskaita toteuttaa (esim. fonttikoon 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 } RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 92

23 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 2003) luentorunko ON 93

24 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 2003) luentorunko ON 94

25 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 2003) luentorunko ON 95

26 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 2003) luentorunko ON 96

27 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 2003) luentorunko ON 97

28 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 2003) luentorunko ON 98

29 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 2003) luentorunko ON 99

30 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 2003) luentorunko ON 100

31 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%) } RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 101

32 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 2003) luentorunko ON 102

33 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 2003) luentorunko ON 103

34 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 2003) luentorunko ON 104

35 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 2003) luentorunko ON 105

36 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 2003) luentorunko ON 106

37 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 2003) luentorunko ON 107

38 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 2003) luentorunko ON 108

39 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 2003) luentorunko ON 109

40 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 2003) luentorunko ON 110

41 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 2003) luentorunko ON 111

42 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 2003) luentorunko ON 112

43 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 2003) luentorunko ON 113

44 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 2003) luentorunko ON 114

45 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 2003) luentorunko ON 115

46 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 2003) luentorunko ON 116

47 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 2003) luentorunko ON 117

48 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 2003) luentorunko ON 118

49 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 2003) luentorunko ON 119

50 - 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 2003) luentorunko ON 120

51 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 2003) luentorunko ON 121

52 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 2003) luentorunko ON 122