CSS tyyliä sivuihin osa I Elina Ulpovaara
Mistä on kyse? CSS eli tyylisivut on dokumentin esitysasua koskeva ehdotus, joka on kirjoitettu tähän tarkoitukseen kehitetyllä kielellä. Yleisin Webissä käytetty kieli on CSS (Cascading Style Sheet), joka on oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä voi ehdottaa elementeille mm.: fontin tyypin, korostuksen, koon tekstin värin taustan värin, taustakuvion ja sen sijainnin marginaalien ja reunusten käytön, leveydet, värit ja muodot esitystavan:mm. elementin esittäminen lohkoina, luetteloalkiona tai ei ollenkaan 2
Mihin kirjoitan tyyliehdotukset? Kolme vaihtoehtoa. Tyyli kirjoitetaan erilliseen tiedostoon. <!DOCTYPE html> Tyylitiedosto liitetään html-dokumenttiin <html> <head>-elementtiin <link>-elementillä. <head> <title></title> <link href="tyyli.css" rel="stylesheet" type="text/css" > <style type="text/css"> h1 {color:rgb(255,0,0)} Tyyli kirjoitetaan <style>-elementtiin htmltiedoston otsikossa eli <head>-elementissä. </style> </head> <body> <h1 style="color:rgb(0,0,255)"><br> Verkkomultimedia</h1> <nav> Kirjoittamalla tyyliehdotus juuri siihen <ul><li>kotisivu</li> kohtaan, mihin haluat sen tulevat. <li>aikataulu</li> Html-dokumentissä voidaan tyyli antaa jokaiselle elementille erikseen style-attribuutin... avulla. 3
Miten kirjoitan CSS:ään? Tyyliehdotuksen kirjoitusperiaate: valitsin määritys määritys selector declaration declaration h1 {color:rgb(255,0,0); font-size:20px;} ominaisuus arvo property value Valitsin on usein html-elementti, johon tyyli kohdistuu. 4
Valitsimia: Yleisvalitsin * : koskee kaikkia elementtejä * {font-size: 12px;} Ehdotus kohdistuu yhteen tiettyyn elementtiin: H1-tason otsikot ovat punaisia ja kooltaan 20px. h1 { color: rgb(255,0,0); font-size: 20px;} Usealla elementillä sama ulkoasuehdotus: H1-tason otsikoiden ja kappaleiden väri on sininen. h1, p { color: rgb(0,0,255);} Elementin sisällä tarkentava elementti, johon ominaisuus kohdistuu: navelementin sisällä oleva a-elementin teksti sinisellä. nav a {color: rgb(0,0,255);} 5
Luokkavalitsin Yhdelle html-elementille voidaan ehdottaa useampia tyylejä käyttämällä luokkia. h1.pun { color:rgb(255,0,0)} h1.sin {color:rgb(0,0,255)} Määriteltyyn luokkaan viitataan html-tiedostossa elementeissä class- attribuutilla. <h1 class="pun">ärsyttääkö silmiäsi?</h1> <h1 class="sin">ei ärsytä.</h1> Voidaan käyttää myös yleisiä luokkia, joiden määritys voidaan liittää mihin elementtiin hyvänsä. Luokan määrittely aloitetaan pisteellä (.), jonka jälkeen tulee luokan nimi. Elementin taustaväri on harmaa:.htausta {background-color: rgb(204,204,204)} Näin määriteltyyn luokkaan voidaan viitata missä elementissä hyvänsä käyttämällä class-attribuuttia. <h2 class= htausta">tässä on... <table class= htausta">... 6
ID valitsin ID-attribuuttia annetaan dokumentin elementille ainutkertainen tunniste. <p id="eka">tämä on dokun eka kappale...</p> Tähän tunnisteeseen viitataan tyylimäärittelyssä #-merkillä: #eka {color:rgb(255,0,0)} Kommentti css:ssä Kommentti tyylitiedostossa: /* tyylimäärittelyn sisällä oleva kommentti*/ 7
Ulkopuolinen css-tiedosto HTML-dokumenttiin lisätään <head>-elementtiin <link>-elementti, joka osoittaa tyylitiedoston sijainnin. Tyylitiedoston tarkentimeksi annetaan.css. <!DOCTYPE html> <html> <head> <title></title> <link href="tyyli.css" rel="stylesheet" type="text/css" > <head>.. Sama tyyli voidaan linkittää useisiin html-sivuihin Yhtenäinen ulkoasu koko sivustolla Ulkoasun päivitys/uudistus on helppoa: muutat vain tyylitiedostoa. Ulkoasun tuottamisen voi hoitaa tarvittaessa eri henkilö kuin html-sivun tekijä/päivittäjä. Voit tuottaa erilaisia ulkoasuja erikoisille näytöille, kirjoittimelle ym. varten samasta html-sivusta 8
Style-elementti Html-dokumentille voidaan tehdä dokumentin sisäinen tyyliohje styleelementillä, joka sijoitetaan html-dokumentissa head-elementin alielementiksi. Tämä tyyliohje on olemassa vain siinä html-dokumentissa, jonka headelementissä style-elementti sijaitsee. Sisäisen style-elementin tyyliohje ohittaa ulkoisen.css tiedostossa olevan ohjeen silloin kuin ehdotus koskee saman elementin samaa ominaisuutta. <!DOCTYPE html> <html> <head> <title></title> <link href="tyyli.css" rel="stylesheet" type="text/css" > <style type="text/css"> h1 {color:rgb(255,0,0)} </style> </head>. 9
Style-attribuutti HTML-dokumentissa elementille voidaan antaa style-attribuutti, jonka arvoksi kirjoitetaan kyseiseen elementtiin kohdistuvia ulkoasuehdotuksia. Style-attribuutilla tehty tyylimääritys ohittaa sekä ulkoisen tiedoston että style-elementin kyseiselle elementille määritellyt tyyliohjeet. <p style= color:rgb(255,0,0); font-size:20px >Punaista tekstiä, jonka koko on 20px.</p> 10
Miten selaimet tukevat CSS:ää? Yleisesti voidaan sanoa, että kaikki selaimet tukevat CSS1 ja CSS2 tyylitiedostotekniikoita. CSS3:sessa on paljon uusia piirteitä, joita kaikki selaimet ei vielä tue. Tietoa piirteistä ja selainten tuesta: http://www.css3.info/ Everything yuo need to know about CSS3 http://caniuse.com/ http://www.w3schools.com/css/ Tähän dokumenttiin on pyritty lisäämään ulkoasuominaisuuksien kohdalle, jos tuessa on rajoituksia. 11
Osa uusista ominaisuuksista vaatii vielä toimiakseen selainten browser extension määritykset. Extension Rendering Selaimet Esimerkki engine -moz- Mozilla Firefox, Camino -moz-transform -ms- Trident IE -o- Presto Opera -o-transform -webkit- Webkit Chrome, Safari -webkit-transform #laatikko { -moz-transform: scale(2); -webkit-transform: scale(2); transform: scale(2); } Huom. Kirjoita viimeiseksi CSSsuosituksen mukainen määritys. CSStyyleissä viimeinen sääntö tulee aina voimaan. Joskus tulevaisuudessa ei enää extension poikkeussääntöjä tarvita. 12
CSS-tyylit color tekstinväri Kuvaus: - Asettaa tekstille värin. Periytyminen: kyllä Esimerkki: 1-tason otsikot punaisella Arvot: - heksadesimaalina: #CC0000 - rgb-väreinä: rgb(255,0,0) - rgba-väreinä: rgba(255,0,0,0.5) - värin nimellä: red - hsl-väreinä:hsl(0º,100%,50%) - hsla-väreinä:hsla(0º,100%,50%,0.5) h1 {color:rgb(255,0,0)} Heksadesimaalit Väri määritellään #RRGGBB, mikä muodostuu värin osista RR (punainen), GG (vihreä) ja BB (sininen). Osien arvojen täytyy olla väliltä 0-FF.
RGB Värit RGB -väri määritellään rgb(red, green, blue). Väriarvo ilmoitetaan Numerona väliltä 0-255 Prosenttina 0%-100% Tuki: IE9+, Firefox3+, RGBa Värit Chrome, Safari ja Opera10+ RGBa-värit laajentavat RGB-värejä aplha-kanavalla, joka kertoo elementin läpinäkyvyyden. RGBa-väri määritellään rgba(red, green, blue, alpha). Alpha-parametri on numero valiltä 0.0 (täysi läpinäkyvyys) ja 1.0 (täysi peittävyys). 14
Värien nimet Perusvärit: aqua, black, blue, fuchsia, gray (grey), green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow Lisäksi 130 väriä, linkkejä: http://www.w3schools.com/cssref/css_colornames.asp http://answers.oreilly.com/topic/453-color-names-and-rgb-valueswith-wide-browser-support/ HSL värit Väri määritellään hsl(hue, saturation, lightness) väri arvot asteita väliltä 0-360 kylläisyys arvot 0%-100% harmaa -> väri Tuki: IE9+, Firefox3+, Chrome, Safari ja Opera10+ valoisuus arvot 0%-100% musta -> valkoinen Hue: 0 punainen, 60 keltainen, 120 vihreä, 240 sininen http://www.w3.org/tr/css3-color/#hsl-examples 15
Tuki: IE9+, Firefox3+, HSLa Värit Chrome, Safari ja Opera10+ HSLA-värit laajentavat HSL-värejä aplha-kanavalla, joka kertoo elementin läpinäkyvyyden. HSLA-väri määritellään hsla(hue, saturation, lightness, alpha). Alphaparametri on numero valiltä 0.0 (täysi läpinäkyvyys) ja 1.0 (täysi peittävyys). Väriesimerkki: color:rgb(199,21,133) color:#c71585 color: MediumVioletRed color:hsl(322,89%,43%) 16
font-family - fontti Kuvaus: - Asettaa fonttityypin. - Tyyppi voidaan antaa fonttien niminä tai käyttämällä jotain viidestä fonttiperheestä. Arvot: - fonttien nimet - fonttiperheet: serif, sans-serif, cursive, fantasy, monospace Periytyminen: kyllä Esimerkki: 1-tason otsikot tulostetaan ensisijaisesti fontilla Tahoma, jos sitä ei ole saatavilla niin käytetään Arial-fonttia. Jos Arialia ei ole käytössä, niin käytetään selaimen sans serif (päätteetön fontti)-oletusfonttia. h1 {font-family: Tahoma, Arial, sans-serif}
Fonttien nimistä: Jos fontin nimi koostuu kahdesta tai useammasta sanasta, niin käytetään -merkkejä p {font-family: Times New Roman, serif} Fonttiperheet serif: päätteelliset fontit, esim. Times New Roman sans-serif: päätteettömät fontit, esim. Arial cursive: kaunokirjoitus, esim. script fantasy: esim. Jokerman monospace: tasalevyiset, esim. Courier New 18
font-size fontin koko Kuvaus: - Fontin koko Periytyminen: kyllä Arvot: - xx-small, x-small, small, medium, large, x-large, xx-large - larger, smaller - prosentit - pituusyksiköt: em, px, cm, pt... Esimerkki: Kappaleiden fonttikoko on kaksinkertainen oletusfonttikokoon verrattuna. p {font-size: 200%} p {font-size:2em}
font-style - tyyli Arvot: - oblique: kallistettu teksti - italic: kursivoitu teksti - normal: normaali teksti Esimerkki: 2-tason otsikot tulostetaan kallistettuna. h2 {font-style:oblique} Periytyminen: kyllä
font-weight - fontin lihavuus Arvot: - numeeriset arvot:100, 200, 300, 400, 500, 600, 700, 800, 900 - avainsanat: normal(400), bold(700), bolder, lighter Esimerkki: Kappaleen teksti on lihavoitu. p {font-weight:bold} Periytyminen: kyllä Lihavoinnin luvut esittävät fontin paksuusastetta. Yleensä selaimet esittävät font-weight-arvot 100-300 arvona 400, joka on perusteksti.
font-variant - kapiteeliteksti Kuvaus: - Teksti tulostetaan kapiteelikirjaimilla eli isoilla kirjaimilla tavallisten pienten kirjaimien asemasta. Arvot: - Small-caps: kapiteelikirjaimet - normal: normaalit kirjaimet Esimerkki: Kappaleen teksti tulostetaan kapiteelikirjaimilla. p {font-variant: small-caps}
font Yhdistää edellä esitetyt font-alkuiset ulkoasuehdotukset p {font: bold 12px arial,sans-serif} 23
Web fontit @font-face Tarkista lisenssit! Mahdollistaa fonttien lataamisen verkosta käyttäjän omalle koneelle. Mistä fontteja: www.fontsquirrel.com typekit.com Fonttien formaatit: WOFF - Web open font, myös IE9 TTF Toimii kaikilla selaimilla paitsi IE:llä ja iphone.:ssa EOT IE:n aikaisemmat versiot SVG - iphone/ipad. 24
Tässä on fontti nimeltä GoodDog tallennettu fontit-hakemistoon. Font-family-nimeksi on annettu leipis. CSS-koodiin: Fonttien mukana tulee mallikoodi css:lle. @font-face { font-family: 'leipis'; src: url('fontit/gooddog-webfont.eot'); src: url('fontit/gooddog-webfont.eot?iefix') format('eot'), url('fontit/gooddog-webfont.woff') format('woff'), url('fontit/gooddog-webfont.ttf') format('truetype'), url('fontit/gooddog-webfont.svg#webfontx1qlglst') format('svg'); font-weight: normal; font-style: normal;} Itse varsinaiseen html-koodiin: p {font-family:'leipis', arial, sans-serif} 25
Fontit Googlen palvelusta http://code.google.com/webfonts Valitse sivulta sopiva fontti ->kopio omalle sivullesi siihen osoittava linkki <link href='http://fonts.googleapis.com/css?family=skranji' rel='stylesheet' type='text/css'> Lisää määre tyylitiedostoosi: p {font-family: 'Skranji', cursive;} 26