Aulikki Hyrskykari Antti Sand

Edellinen luento o Videotiedostot - palvelimelle tallennetun videon tuonti verkkosivulle - HTML5 videoformaatit - videon nouto sivulle verkosta o Äänitiedostot o CSS taustaa, syntaksista, valitsimet Tällä kertaa o Valitsimista vielä hiukan o Sääntöjen kohdistamisjärjestyksestä sijainti, periytyminen, painoarvo o CSS värit o CSS mittayksiköt o Kirjasimet, typografiaa, webbikirjasimet, kirjasinkokojen hallinnasta o Tekstin muotoilusta o Lokeromallin periaate

Määrittää, mihin dokumenttipuun elementtiin tyylisääntö kohdistuu CSS2.1 valitsimet o hahmo (pattern), jota dokumenttipuusta haetaan o sääntö kohdistetaan elementtiin tai elementteihin, johon hahmonhaku (pattern matching) sopii

Pseudoluokkavalitsin kirjoitetaan elementin nimen perään kaksoispisteellä erotettuna o ei soviteta elementteihin nimen, esiteltyjen attribuuttien eikä attribuuttien sisältöjen o vaan jonkun muun elementin ominaisuuden perusteella o pseudoluokka ts. kyseistä luokkaa ei varsinaisesti ole määriteltynä o :link :visited :hover :active :focus :first-child :lang

Pseudoelementtivalitsin liitetään elementin nimen perään kahdella kaksoispisteellä erotettuna o pseudoluokkavalitsinta sovitetaan olemassa oleviin elementteihin, kun taas o pseudoelementtivalitsemen avulla voidaan "luoda" pseudoelementtejä, ts. varsinaisesti ei ole luotu vastaavaa elementtiä ::before ::after ::first-letter ::first-line

Univeraalivalitsin *, sopii kaikkiin elementteihin o näkee harvoin käytettävän o itse asiassa se on käytössä koko ajan, mutta se jätetään kirjoittamatta näkyviin o jos universaalivalitsin on ainoa elementtivalitsin yksittäisessä valitsimessa, sen saa jättää pois *.omaluokka *#osa-1.omaluokka #osa-1

Edellä lueteltujen valitsimien tehokkaan käytön opettelu riittää hyvin perussivustojen toteuttamiseksi Kolmostason valitsimetkin kuitenkin jo standardoitu o Merkkijonon hahmohaku valitsimet, joilla elementti voidaan valita sovittamalla merkkijonoa attribuutin arvon osaan (osamerkkijonoon, alkaa, loppuu, sisältää) o Rakenteelliset pseudovalitsimet, joilla haku tehdään dokumenttipuun rakenteen perusteella (juuri, n. lapsi, n. sisarus, ensimmäinen/viimeinen lapsi, lapsettomat elementit, jne.) o Käyttöliittymäelementtien pseudovalitsimet, joilla haku tehdään elementin tilan perusteella o Negaatio pseudoluokka, joka kohdistaa säännöt elementtiin, joka ei sovi annettuun hahmoon. o Sisaruspseudoluokka, jolla haetaan elementit jolla on sama äiti.

Yhteen elementtiin kohdistuu usein monta tyylisääntöä o yhdessä tyylitiedostossa saattaa olla useita o sääntöjä saatetaan tuoda useasta lähteestä o sääntöjä periytyy elementille automaattisesti (äidiltä) Minkä mukaan elementin ulkoasu määräytyy? Kolme pääperiaatetta: o sijanti (location), o periytyminen (inheritance) ja o painoarvo (specificity)

Elementtien ulkonäkoon vaikuttavat säännöt, jotka joka on voitu kohdistaa sille o selaimen oletustyyleissä o selaimessa käyttäjän itsensä määrittäminä tyyleinä (esim. Firefoxissa asetuksissa tai usercontent.css-tiedoston kautta) o dokumentissa - erillisessä css-tiedostossa - dokumentin otsikko-osassa <style>-elementissä - elementin style-attribuutin avulla Ylläolevalla listalla alempana annettu sääntö kumoaa ylempänä annetun o ulompana annettu sääntö valuu sisemmäs (cascades), ellei uusi sääntö sitä kumoa

Esimerkki: sivulla käytettävän kirjasimen määrittäminen jokaiselle elementille erikseen? ei vaan <body>-elementille font-family-piirre + periytyminen CSS-piirteiden yhteenvetotaulukko: http://www.w3.org/tr/css/#indices kustakin piirteestä määritellään seuraavat ominaisuudet

Määritellään listan alkioissa käytettäväksi tekstin värinä sinistä ja sovelletaan sitä järjestämättömään listan alkioon li { color: blue; } <ul> <li>tässä ensimmäinen listan alkio </li> <li> Listan toinen alkio onkin pidempi, jaettu kahteen kappaleeseen. Tässä ensimmäinen kappale. ja tässä toinen kappale </li> </ul> Tekstin väri oli alun perin musta: millä värillä listan toisen alkion kappaleet kirjoitetaan? o piirre color on periytyvä piirre o toinenkin listan alkio kirjoittuu sinisellä

Entä jos määritetään listan vasempaan reunaan leveä reunus? li { color: blue; border-left: 3em solid red; } Mikä on tulos? <ul> <li>tässä ensimmäinen listan alkio </li> <li> Listan toinen alkio onkin pidempi, jaettu kahteen kappaleeseen. Tässä ensimmäinen kappale. ja tässä toinen kappale </li> </ul> VAI?

Reunus ei siis periytynyt, mutta o piirteen voi kuitenkin pakottaa periytymään: arvo inherit li { color: blue; border-left: 3em solid red; } p { border-left: inherit; } <ul> <li>tässä ensimmäinen listan alkio </li> <li> Listan toinen alkio onkin pidempi, jaettu kahteen kappaleeseen. Tässä ensimmäinen kappale. ja tässä toinen kappale </li> </ul> Nyt koodi tuottaisi vasemmanpuoleisen tuotoksen

Annetaanpa listalle taustaväri li { color: blue; border-left: 3em red; background-color: lime; } p { border-left: inherit; } Kumpi tulos? <ul> <li> Tässä ensimmäinen listan alkio </li> <li> Listan toinen alkio onkin pidempi, jaettu kahteen kappaleeseen. Tässä ensimmäinen kappale. ja tässä toinen kappale </li> </ul> VAI?

VAI? Onko taustaväri periytyvä piirre? o taustaväri ei ole periytyvä piirre, joten ilmeisesti ei o siis vasemmanpuoleinen oikein? Kokeile o listan toinen alkio (kappaleet) ei tule eri värillä kuin muu lista o oikeanpuleinen tuotos - miksi? Piirteillä on alkuarvot (oletusarvot): taulukossa initial value o taustaväri on oletusarvoisesti läpinäkyvä (taulukossa arvo transparent)

Sääntö kohdistetaan aina tiettyyn elementtiin o mitä spesifisempi sääntö, sitä suurempi painoarvo o jos samaan elementtiin kohdistuu useampia sääntöjä, elementtiin sovelletaan sääntöä, joka on painoarvoltaan suurempi o toisin sanoen spesifisemmin kohdistettu sääntö ylittää karkeammin kohdistetun säännön. Painoarvo lasketaan säännön valitsimien painoarvojen summana seuraavasti:

valitsin painoarvo Miksi? p 1 1 ev div p 2 1+1 (2 ev).puu 10 10 (1 lv) div p.puu 12 (1+1+10) (2 ev+1 lv) #lehti1 100 1 iv body #sisalto.vaihtoehtoinen p 112 1+100+10+1 (2ev 1 lv 1 iv) elementissä kirjoitettu sääntö: 1000 id-valitsemella annetut säännöt ovat siis ylivoimaisesti painavavimpia, jos jätetään elementin attribuuttiin kirjoitettu sääntö huomiotta Saman painoarvon sääntöjen kesken voimaan jäävä sääntö määräytyy säännön sijainnin mukaan.

Erityistilanne: o kaikki nämä säännöt on mahdollista kumota antamalla säännölle määritys!important p { font-size:large;!important } Esimerkiksi o Jos käyttäjä omassa tyylitiedostossaan antaa!important määrityksen o kumoaa kaikki muut säännöt o ehkä haluaisi muuttaa body-elementin kirjasinkoon Tarkoitettu edelläkuvatuntyyppisiin erikoistilanteisiin o käytöstä tulisi siis pidättäytyä o vaikka sen avulla saisikin helposti joitain tilanteita hoidetuksi

Ohjenuora sääntöjen kirjoittamiselle: o pyri tekemään säännöistä mahdollisimman yleisiä ja mennä spesifisiin sääntöihin vain kun tilanne tosiaan niin vaatii o mitä alhaisempi kynnys hyvin spesifisien sääntöjen käyttämiseen on, sitä helpommin tyylipohjasta tulee sekava ja vaikeasti ylläpidettävä Artikkeleja / blogeja aiheesta o Jim Jeffers: The Art and Zen of Writing css o Bobby Jack: Stop breaking inheritance o Inayaili de Leon: CSS Specificity And Inheritance

Värin voi määritellä usealla tavalla. CSS:ssä nimettyjä värejä o 16 perusvärin lista: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow o olivat aiemmin määriteltynä jo HTMLssä o CSS3:ssa on määritelty lisäksi 147 muuta nimettyä väriä: http://www.w3.org/tr/css3-color/#svg-color Nämä 163 väriä ovat vain pieni osa täysvärikuvassa käytettävissä olevista 16,7 miljoonasta värisävystä Tarkemman värinmäärityksen voi tehdä käyttäen o RGB /RGBA väriformaattia tai o HSL/HSLA formaatteja o A -versioissa on mukana koko kuvan läpinäkyvyys

RGB-väri määritellään kolmella luvulla: punaisen, vihreän ja sinisen värin määrä o värien intensiteetti voidaan siis määrittää joko - desimaalilukuna: 0-255, - prosenttina: 0%-100% tai - tai heksadesimaalilukuna: 00-FF o CCS-väreissä kaksi ensimmäistä koodausta annetaan - suluissa kolmena pilkuilla toisistaan erotettuna lukuna - sulkujen eteen kirjoitetaan tunnus rgb - esim. musta on rgb(0,0,0) = rgb(0%,0%,0%) o Heksadesimaaliesitys - alkaa #-merkillä jota seuraa - kuusi (tai kolme) merkkiä joukosta: 0, 1.. 9,a,..f. - esim. musta on #000000 (tai #000)

Esimerkkejä - rgb(0,0,0) = rgb(0%,0%,0%) = #000000 on musta väri - rgb(255, 255, 255) ta= rgb(100%,100%,100%) = #ffffff on valkoinen - rgb(54,165,63) = rgb(21%, 65%, 5%) =#36c93f on ruohonvihreä - rgb(153,0,5) = rgb(60%, 0%, 13%) = #990033 on tiilenpunainen RGBA-värit o määritellään kolmen luvun lisäksi neljäs luku o määrittää värin läpinäkyvyyden desimaalilukuna väliltä 0-1 o mitä lähempänä nollaa luku on, sen läpinäkyvämpi kuva on o Esimerkiksi - rgba(153,0,51,0.9) ei kuulla paljon vielä läpi, mutta - rgba(153,0,51,0.2) on hyvin läpikuultava väri Verkosta löytyy hyviä työkaluja värien määritykseen, esimerkiksi: ColorZilla Firefoxiin tai w3schoolin värinpoimija

CSS3: toinen tapa määritellä värisävy Myös tässä määrittely tapahtuu kolmella luvulla o Hue - värisävy o Saturation - värikylläisyys o Lightness - vaaleuden aste Väri ilmaistaan luvulla väliltä 0-360 ja kaksi jälkimmäistä prosentteina o musta: hsl(0, 0%,0%) ja valkoisen hsl(0, 0%, 100%) Läpinäkyvyys kuten RGB-väreissä o puolittain läpikuultava ruohonvihreä: hsl(124, 58%, 50%)

Käteviä lisäosia selaimeen o Esim. ColorZilla (sekä Firefoxiin että Chromeen) w3schools värinpoimija o http://www.w3schools.com/tags/ref_colorpicker.asp Visibone, 216 webbiväriä yhdellä silmäyksellä: o http://html-color-codes.com/ o http://www.visibone.com/colorlab/big.html Toisiinsa sointuvia värejä, väriharmonioita o Adoben ilmainen väriresurssisivu: http://kuler.adobe.com o About.com web design väripaletit: http://webdesign.about.com/od/colorpalettes/ Tulisi muistaa myös värisokeus o http://wearecolorblind.com/ o http://webaim.org/articles/visual/colorblind#designing o http://www.etre.com/tools/colourblindsimulator/ o http://www.vischeck.com/

w3schools värinpoimija o http://www.w3schools.com/tags/ref_colorpicker.asp Visibone, 216 webbiväriä yhdellä silmäyksellä: o http://html-color-codes.com/ o http://www.visibone.com/colorlab/big.html Käteviä lisäosia selaimeen o Esim. ColorZilla (sekä Firefoxiin että Chromeen) Toisiinsa sointuvia värejä, väriharmonioita o Adoben ilmainen väriresurssisivu: http://kuler.adobe.com o About.com web design väripaletit: http://webdesign.about.com/od/colorpalettes/

CCS:ssä käytetyt mittayksiköt ovat joko o suhteellisia tai o absoluuttisia Myös prosenttilukuja voidaan käyttää (suhteellisia)

em:käytetyn kirjasimen korkeus ex:kirjaimen "x" korkeus käytetyssä kirjasimessa (ts. pienen kirjaimen korkeus) o suhteessa elementissä käytettyyn kirjasimeen o mittayksikön edessä mittaluku, joko kokonaisluku tai desimaaliluku o mittaluvun ja mittayksikön väliin ei saa kirjoittaa välilyöntiä o esimerkiksi: 2em, 0.5em, 2.5ex px:pikseli o suhteellinen, ei absoluuttinen mittayksikkö o ei välttämättä sama kuin laitteen pikseli o CSS määritys: pienimmäksi mittayksikkö, joka on paljain silmin nähtävissa ja joka ko. tulostuslaitteessa voidaan tuottaa tarkkana

maaginen mittayksikkö Voi luottaa, että o yhden pikselin (ja sen kerrannaisten) viiva tulostuu tarkkana laitteesta riippumatta o bittikarttakuvien (jpg, png, gif) pikselit hahmonnetaan suoraan yksi-yhteen CSSpikseleihin o esimerkiksi 320 x 215 kuvapisteen kuva näkyy sivulla täsmälleen 320 px leveänä ja 215px korkeana Huomaa, että px mittasuhde ei tarkoita samaa kuin kirjasinten kirjasinkoko Bert Bos: em, px, pt, cm, in... http://www.w3.org/style/examples/007/units.en.html

Kokonaislukuina, esim. 40% o prosenttiarvot annetaan aina suhteessa johonkin toiseen arvoon o yleensä suhteessa vanhempielementin ko. piirteen arvoon Esimerkiksi body-elementin kokoon <body> <div class= vasenpalsta > sisältöä, sisältöä </div> <aside class= oikealla > olisko tää sitten varattu joillekin sivuhuomautuksille </aside>.vasenpalsta { width: 40%; }.oikealla { margin-right: 15%; } </video>

in:tuuma cm:senttimetri mm:millimetri pt:piste pc:pica Absoluuttisia mittoja, keskinäiset suhteet: 1in = 2.54cm = 25.4mm = 72pt = 6 pc o pysyvästi samanmittaisia riipumatta välineestä, missä ne esitetään o riippuu laitteesta, kuinka tarkasti se toteuttaa mittoihin liittyvät standardit Eivät juurikaan käytössä sivujen toteutuksessa o absoluuttisella mitalla määritetty elementti veisi esim. puhelimessa kovin erilaisen tilan näytöstä suhteessa isoon näyttöön

Sivustojen ulkoasua määritettäessä CSSsäännöissä olähes poikkeuksetta suhteellisia mittoja em, ex, px tai prosentit otällöin sivu skaalautuu kulloinkin käytettävään sivunkokoon. okirjasinten koot suositellaan annettavaksi em-yksiköissä.

font-family: [kirjasinperhe]* [geneerinen kirjasin-perhe] Elementissä käytettävän kirjasinperheen määrittäminen o kirjasinperhe : jokainen kirjasin sisältää useampia leikkauksia kirjasimesta (normaali, kursivoitu, lihavoitu,...).

Piirteen arvoksi voi antaa listan kirjasinperheitä o käyttöön ensimmäinen joka sivun tulkintaympäristössä on käytettävissä o viimeisenä vaihtoehtona suositellaan käytettävän jotakin ns. geneeristä kirjasinperhettä Esimerkiksi:.body { font-family: verdana, arial, sans-serif; }.lainaus { font-family: "new century schoolbook", serif; }

sans-serif o päätteetön kirjasin o nykyisin paljon verkkosivuilla ja yleensäkin elektronisessa muodossa esitetyissä teksteissä käytetty o esim. Arial, Geneva, Helvetica, Lucida Sans, Trebuchet, Verdana serif o päätteellinen kirjasin, käytetään yleisesti paperille tulostetussa tekstissä o esim. Garamond, Georgia, New York, Times, Times New Roman monospace o tasavälinen kirjasin o tyypillisesti koodin kirjoittamiseen tai konekirjoituksenomaisen tekstin vaikutelman aikaansaamiseksi o kirjasimen kaikki kirjaimien vievät riviltä saman tilan ts. ovat saman levyisiä o esim. Courier, Courier New, Lucida Console, Monaco. cursive fantasy o käytetään erikoistilanteissa, otsikoissa tai lyhyissä huuhahduksenomaisissa tekstipaloissa o pitkissä teksteissä käytettynä tekee tekstistä vaikealukuista o kirjasinperhe /merkistökokoelma ei välttämättä ole kattavasti toteutettuna o esim. Impact, Copperplate, Desdemona, Kino

72 pisteen kirjasin

Aiemmin sivuilla pystyi käyttämään hyvin rajattua kirjasinvalikoimaa CSS3:n @font-face -sääntö o mahdollista käyttää mitä tahansa kirjasinta, jotka on määritelty tietyssä formaatissa o woff, ttf, otf tai svg (woff näistä selainten laajimmin tukema) Kirjasimia saatavilla maksullisista palveluista Vapaasti käytettäviä kirjasimia löytyy paljon o kokeile, tee haku free web fonts Periaate o tee kansio kirjasimille - esimerkiksi nimelle fonts - vastaavasti kuin sinulla on css- kansio tyylitiedostoille o määrittele kirjasimet käyttöön tyylitiedostossasi @font-face -säännöllä

1. Nouda kirjasin omalle koneelle, vie kansioon fonts 2. Esittele kirjasin css-tiedostossa @font-face { font-family: Chunkfive; src: url(font/chunkfive.otf); } 3. Käytä kirjasinta.mohkalekirjasin { font-family: Chunkfive serif; } Tämä teksti möhkälekirjasimella

Joistain palveluista voit käyttää kirjasimia suoraan palvelun serveriltä ogoogle Fonts https://developers.google.com/fonts/docs/getting_started ofontspring http://www.fontspring.com/support/installing_webfonts/how-do-i-use-thewebfonts

Tekstin kokoa elementissä voi hallita kahdella tavalla o absoluuttisina kokoina - määrätään absoluuttisen kirjasinkoon käyttäen CSS:n nimettyjä arvoja - xx-small, x-small, small, medium, large, x-large, xx-large - tai absoluuttisia mittayksiköitä o suhteellisin mittayksiköin prosentteina tai em/ex-mittayksiköillä Suhteellinen joustavampi o muista kuitenkin, että kirjasimen koko on periytyvä ominaisuus - sisäkkäiset elementit

Anna ensin dokumentin rungossa tekstille peruskoko säännöllä body { font-size=100% } o tuottaa useimmissa sealaimissa kirjasinkoon 16px o skaalataan muut elementit suhteessa tähän kirjasinkokoon o esim. kappaleiden kirjasinkooksi 14 px = 14/16em = 0.875em p { font-size = 0.875em }

@charset "UTF-8"; body { font-family: "Palatino Linotype", Palatino, serif; font-size: 100%; } h1, h2 { font-family: "Arial Black", Arial, sans-serif; font-weight: normal; } h1 { /* 22px/16px */ font-size: 1.375em; } h2 { /* 18px/16px */ font-size: 1.1em; } p { /* 14px/16px */ font-size:.875em; }

font-style: normal italic oblique inherit font-variant: normal small-caps inherit font-weight: normal bold bolder lighter 100 200 300 400 5 00 600 700 800 900 inherit (400 = normal)

text-decoration: none underline overline line-through blink inherit text-align: left right center justify inherit text-indent: pituusyksikkö prosentti inherit text-overflow: clip ellipsis merkkijono text-shadow: none x-offset y-offset [blur] [väri] text-transform: capitalize uppercase lowercase none inherit line-height: normal mittayksikkö kokonaisluku prosentti inherit letter-spacing: normal mittayksikkö inherit word-spacing: normal mittayksikkö inherit white-space: normal pre nowrap pre-wrap pre-line inherit word-wrap: normal break-word