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, 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 70
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" - 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 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 71
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} 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 72
Tyylien liittäminen (HTML-)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> 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 73
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" 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 74
Esimerkki 2/2 ulkoisesta tyylitiedostosta ja sen käyttämisestä: @IMPORT tiedosto red.css: P { color: red } HTML-dokumentti: <HTML> <HEAD> <TITLE>Hello world</title> <STYLE TYPE="text/css"> <!-- @import 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 CSS:n @import-komennolla 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 75
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ä 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 76
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> 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 77
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 jos on tarvis) @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 2002) luentorunko ON 78
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 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 79
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 2002) luentorunko ON 80
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 } 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 81
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 2002) luentorunko ON 82
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 STYLE="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 STYLE="blue">Weird Al says that blue is good, too.</p> <B STYLE="blue">Fat blue text.</b> 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 83
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) 73275 RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 84