27.3.2014 Aulikki Hyrskykari JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto Edellinen luento o Videotiedostot - palvelimelle tallennetun videon tuonti verkkosivulle - HTML5 videoformaatit - videon nouto sivulle verkosta o Äänitiedostot o CSS taustaa, syntaksista, valitsimet Tällä 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 JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
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 JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto 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 JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
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 JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto 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 JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
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. JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto 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> <p> Listan toinen alkio onkin pidempi, jaettu kahteen kappaleeseen. Tässä ensimmäinen kappale. </p> <p>ja tässä toinen kappale</p> </li> </ul> Tekstin väri oli alun perin musta: millä värillä listan toisen alkioiden 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> <p> Listan toinen alkio onkin pidempi, jaettu kahteen kappaleeseen. Tässä ensimmäinen kappale. </p> <p>ja tässä toinen kappale</p> </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> <p> Listan toinen alkio onkin pidempi, jaettu kahteen kappaleeseen. Tässä ensimmäinen kappale. </p> <p>ja tässä toinen kappale</p> </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> <p> Listan toinen alkio onkin pidempi, jaettu kahteen kappaleeseen. Tässä ensimmäinen kappale. </p> <p>ja tässä toinen kappale</p> </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ö: <p style="margin left:20px"> 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%) 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 Kokonaisulukuina, 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 konekirjoitukseomaisen tekstin vaikutelman aikaansaamiseksi o kirjasimen kaikki kirjaimien vievät riviltä saman tilan ts. ovat samanlevyisiä o esim. Courier, Courier New, Lucida Console, Monaco. cursive fantasy o käytetään erikoistilanteissa, otsikoissa tai lyhyissä huuhahduksenomaisissa tekstpaloissa 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 JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
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ä JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto 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; <p class="mohkalekirjasin"> Tämä teksti möhkälekirjasimella </p> JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
Joistain palveluista voit käyttää kirjasimia suoraan palvelun serveriltä ogooglefonts https://developers.google.com/fonts/docs/getting_started ofontspring http://www.fontspring.com/support/installing_webfonts/how do i use thewebfonts JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto Tekstin kokoa elementissä voi hallita kahdella tavalla oabsoluuttisina 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ä osuhteellisin mittayksiköin prosentteina tai em/ex mittayksiköillä Suhteellinen joustavampi omuista 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
margin top Sisältö (content) Täyte (padding) border top padding top margin left border left padding left ELEMENTIN SISÄLTÖ (content area) padding right border right margin right Reunus (border) Marginaali (margin) padding bottom border bottom margin bottom Reunuksen paksuus, tyyli ja väri o border width: [thin medium thick mittayksikkö inherit] 1 4 o border style: [none hidden dotted dashed solid double width groove ridge inset outset] 1 4 o border color: [trasparent color inherit] 1 4 Elementtillä 10px levyiset reunat (kaikki reunat): p { border width: 10px; Elementillä katkoviivalla piirretty kehys.kehystetty { border style: dotted Elementillä katkoviivalla piirretty kehys div { border color: #34fade Tämä olisi tulos, jos oheiset säännöt olisi annettuna tämän tekstin sisältävään p elementtiin