Aulikki Hyrskykari. CSS valitsimista CSS sääntöjen kohditaminen CSS värit Kuvista verkkosivulla

Transkriptio

1 Aulikki Hyrskykari CSS valitsimista CSS sääntöjen kohditaminen CSS värit Kuvista verkkosivulla Jaoetaan pseudovalitsimet edelleen kahteen alaluokkaan: 1. Pseudoelementtivalitsimet o liitetään elementin nimen perään kahdella kaksoispisteellä erotettuna o luo maagisen pseudoelementin, joka eivät oikeasti ole olemassa 2. Pseudoluokkavalitsimet o liitetään elementin nimen perään kaksoispisteellä erotettuna o elementtiä haetaan jonkun muun ominaisuuden, kuin elementtityypin, tai attribuuttien tai niiden arvon perusteella

2 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

3 Esimerkki: sivulla käytettävän kirjasimen määrittäminen jokaiselle elementille erikseen? ei vaan <body> elementille font family piirre + periytyminen CSS piirteiden yhteenvetotaulukko: 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 alkioiden kappaleet kirjoitetaan? o piirre color on periytyvä piirre o toinenkin listan alkio kirjoittuu sinisellä

4 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

5 Annetaanpa listalle taustaväri li { color: blue; border left: 3em red; background color: lime; 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> Kumpi tulos? 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)

6 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 ev).puu (1 lv) div p.puu 12 (1+1+10) (2 ev+1 lv) #lehti iv body #sisalto.vaihtoehtoinen p (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.

7 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

8 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ä: 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 kolmen värin intensitetti 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 0m 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 # (tai #000)

9 Esimerkkejä - rgb(0,0,0) = rgb(0%,0%,0%) = # 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%) = # 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 Toinen tapa määritellä värisävy (CSS3) Tässäkin määrittely tapahtuu kolmella luvulla o värisävy (hue) o värikylläisyys (saturation) o ja vaaleuden aste (lighness) Ensimmäinen näistä luvuista ilmaistaan luvulla väliltä ja kaksi jälkimmäistä prosentteina Esimerkiksi o hsl(0, 0%,0%) on musta o hsl(0, 0%, 100%) valkoinen o hsl(124, 58%, 50%) ruohonvihreä ja o hsl(340, 100% 30%) tiilenpunainen HLSA värissä o neljäs luku prosenttilukuna läpinäkyvyydelle o muuten analoginen RGBA määrityksen kanssa

10 Tärkeitä o sivuston keventäjinä o ilmeen luojina o usein myös informaatiota sisältävinä elementteinä Kuvia käytettäessä tulee muistaa kuvien tekijänoikeudet o voit tuoda sivulle vain itse ottamaasi kuvan, tai o kuvan, jonka käyttöoikeudet eksplisiittisesti sallivat sen käyttämisen sillä tavalla ja siinä yhteydessä, jossa aiot kuvaa käyttää Creative Commons lisenssoinnin kautta on saatavissa eri tavoin vapaita tai rajoitetusti käytettävissä olevia kuvia Googlen kuvahaku o voit rajoittaa koskemaan vain vapaasti käytettävissä olevia kuvia o tarkennettu haku (kohta: Käyttöoikeudet) Vaikka kuva olisikin vapaasti käytettävissä o kuvan yhteyteen jollain tavoin hyvä liittää mainita kuvan tekijästä o jos se vaan on löydettävissä. Joissain tilanteissa tarpeen piirtää tai luoda kuvia "lennossa oesimerkiksi jossain grafiikkaa sisältävässä nettipelissä o HTML5:ssä uusi <canvas> elementtin o<canvas> on nimensä mukaisesti taustakangas kuvalle oitse kuva luodaan tai tuodaan taustakankaalle esim. javascriptillä tai jollain muulla skriptikielellä oemme siis käsittele <canvas> kuvia tässä yhteydessä Käsitellään siis <img> elementin avulla sivulle tuotuja kuvia

11 Piirretään käyttäen geometrisia olioita o viivoja, suorakaiteita, ellipsejä, Bezier käyriä, jne. o vektrorigrafiikan iso etu on sen skaalautuvuus o se säilyy terävänä kaikissa kooissa laadun kärsimättä. Vektorigrafiikkaa käytetään o esim. kirjasinten toteutuksessa, ja o logojen ja julisteiden suunnittelussa Vektorigrafiikkaa tukevia piirto ohjelmilla o esim. Freehand, Illustrator o toimisto ohjelmien piirtotyökalut Kun kuva tuodaan sivulle <img> elementin avulla o vektorigraafisena luotu kuvakin muunnetaan useimmiten bittikarttakuvaksi o yleisimmät formaatit: jpeg, gif ja png formaatit o <img> elementin avulla on kuitenkin mahdollista tuoda myös vektorigraafisia kuvia (svg piirrokset tai yksisivuiset pdf tiedostot) Valokuvat ovat aina bittikarttakuvia (rasterigrafiikkakuvia) o bittikarttakuvat koostuvat pisteistä, kuvapikseleistä. o yksi kuvapikseli voi saada arvokseen jonkun värin o kuvan värisyvyys (kuinka monta väriä kuvassa on käytettävissä) o vaikuttaa suoraan kuvan kokoon Esim. o kuvan värisyvyys on 8 bittiä - kunkin kuvapikselin esittämiseen varataan 8 bittiä - kullakin kuvapikselillä voi olla 2 8 =256 toisistaan poikkeavaa väriä o värisyvyys on 24 bittiä o täysvärikuva o yksi kuvapikseli voi tällöin saada yhden 2 24 =16,7 miljoonasta värisävystä o kuvakoko kasvaa kolminkertaiseksi.

12 JPG (Joint Photographic Expert Group) Suunniteltu tiivistämään jatkuvasävyisiä (continuoustone) väri tai harmaasävykuvia. o+ säilyttää värit (täysvärituki, 24 bittiä) o+ pakkaussuhteen voi määrätä portaattomasti o pakkaus vaikuttaa kuvan tarkkuuteen o ei tue läpinäkyvyyttä o ei tue animointia Graphics Interchange Format Sopiva tiivistysformaatti piirroksille, logoille ja muille kuville, joissa on käytössä vähän eri värejä. o värisyvyys 8 bittiä o kuvassa maksimissaan 256 väriä o gif pakkausalgoritmi patentoitu Unisys yhtiölle o + säilyttää kuvan tarkkuuden o+ tukee läpinäkyvyyttä o+ tukee animointia (peräkkäisten kuvien sitominen animaatioksi

13 Portable Network Graphics GIF korvaajaksi kehitetty patenteista vapaa tiivistysformaatti o + säilyttää kuvan tarkkuuden, mutta tiivistys tehokkaampaa kuin GIF kuvissa o + tukee läpinäkyvyyttä o ei tue animointia o selainten vanhat versiot eivät tue tätä formaattia Yleisohje: PNG kuvia voi käyttää muuten o paitsi isohkoissa, paljon pieniä väripintoja sisältävissä valokuvissa, jolloin JPGkuvat toimivat paremmin o tai tilanteissa, jossa sivujen toimita vanhoilla selaimilla ovat syystä tai toisesta olennaita. Läpinäkyvien kuvien avulla o on mahdollista luoda monimutkaisempia asetteluja o kuvan ääriviivan ei tarvitse olla suorakulmio, tai kuvia on helpompi sijoitella osittain päällekkäin. o GIF ja PNG tukevat läpinäkyvyyttä - kuvankäsittelyohjemissa voi määritellä läpinäkyvät alueet - GIF kuvissa voi yhden 256:sta väristä määritellä läpinäkyväksi, ts. yksi pikseli voi olla läpinäkyvä, tai sillä on väri - PNG kuvat tukevat ns. alpha läpinäkyvyyttä (alpha transparency), jolloin pikseli voi olla osittain tai kokonaan läpinäkyvä - PNG kuvien avulla on helpompi saada pehmeästi häpyviä reunoja tilanteissa joissa GIF kuvan reuna näyttäisi rosoiselta ja pykälikkäältä. o JPG ei tue läpinäkyvyyttä