Ajatus kaiken taustalla

Transkriptio

1 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 2002) luentorunko ON 70

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

3 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 2002) luentorunko ON 72

4 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">  </STYLE> </HEAD> <BODY> <P>Roses are red - so am I. </BODY> </HTML> RAKENTEISET DOKUMENTIT (kevät 2002) luentorunko ON 73

5 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 2002) luentorunko ON 74

6 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 2002) luentorunko ON 75

7 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 2002) luentorunko ON 76

8 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">  </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 2002) luentorunko ON 77

9 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 jos on 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 2002) luentorunko ON 78

10 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 2002) luentorunko ON 79

11 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 2002) luentorunko ON 80

12 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 2002) luentorunko ON 81

13 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 2002) luentorunko ON 82

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

15 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 2002) luentorunko ON 84