CSS aloitus CSS Cascade Stylesheet Mirja Jaakkola
Sisältö 3. Ulkopuolisen tyylitiedoston käyttö 4. Tyyliohjeen kirjoittaminen 5. style-elementti 6. style-attribuutti 7. class-attribuutti 8. id-attribuutti 9. Fontit 10.Fonttiperheet 11.Mittayksiköt 12.Elementin laatikkorakenne 13.Esimerkki laatikkorakenteesta 14.Marginaalit 15.Reunukset border 16.Padding 17.Display, kommentit, lähteet 2
Ulkopuolisen tyylitiedoston käyttö Tyyliohjeet sijaitsevat erillisessä.css-tiedostossa, joka linkitetään xhtml-dokumenttin head-lohkossa link-elementillä: <link rel="stylesheet" type="text/css" href="tyyli.css" /> Sama tyyli voidaan linkittää muihin xhtml-dokumentteihin Yhtenäinen tyyli koko sivustolla Ulkoasun päivitys / uudistus helppoa: muutat vain tyylitiedostoa Ulkoasun luomisen voi hoitaa tarvittessa eri henkilö kun xhtml-sivun tekijä / päivittäjä Voit luoda erilaisia tyylejä näyttöä, wappia, kirjoitinta ym. varten samasta xhtml-sivusta 3
Tyyliohjeen kirjoittaminen Yksi elementti, usea määritys, jotka erotetaan toisistaan puolipisteellä: p {color:green; font-family:arial,sans-serif;} Samat määritykset usealle elementille, jotka erotetaan toisistaan pilkulla: h1,h3 {color:blue;font-family:monospace;} Määritys tehdään elementin sisällä olevalle toiselle elementille eli tässä h1- otsikon sisällä olevalle span-elementille: h1 span {color:red;font-size:1.3em} Jos elementti saa useamman kerran peräkkäin saman ominaisuuden määrityksen tulee viimeisin määritys voimaa. 4
style-elementti xhtml-dokumentille voidaan tehdä dokumentin sisäinen tyyliohje styleelementille, joka tulee xhtml-dokumentissa head-elementin alielementiksi. Tämä tyyliohje on olemassa vain siinä xhtml-dokumentissa, jonka headelementissä style-elementti sijaitsee. Sisäinen style-elementissä oleva tyyliohje ohittaa ulkoisen.css tiedostossa olevan ohjeen silloin kuin määritys koskee saman elementin samaa ominaisuutta. Esim. <style type = "text/css"> body {font-family:arial,sans-serif; color: navy;} p {color:#99cc33;} h3 {background:yellow;} </style> 5
style-attribuutti XHTML-dokumentissa elementille voidaan antaa style-attribuutti, jonka arvoksi tulee vain tuota elementtiä koskevia tyylimäärittelyjä style-attribuutilla tehty tyylimääritys ohittaa sekä ulkoisen tiedoston että style-elementin kyseiselle elementille määritellyt tyyliohjeet Esim. <h1 style="color:blue;border:solid"> Sininen otsikko </h1> 6
class-attribuutti Elementille voidaan antaa tyyliluokka class-attribuutilla Yleisiä tyyliluokkia voidaan käyttää eri elementtien kanssa Esim. <style type="text/css">.punainen {color:red}.sininen {color:blue} </style> <body> <h1 class="punainen">punainen otsikko</h1> <p class="sininen">tässä on sinistä tekstiä</p> <p class="punainen">teksti on nyt punaista</p> </body> 7
id-attribuutti Elementille voidaan antaa yksikäsitteinen tunniste id-attribuutilla. Tyyli koskee vain id:llä yksilöityä elementtiä Esim. <style type="text/css"> </style> #aika {color:red} <body> <p id="aika">kello löi jo kuusi</p> <p>aika herätä </p> </body> 8
Fontit color font-family Fontin värin nimenä, heksadesimaalina tai rgb-arvona Fontin, jota käytetään, ja muut fontit, joita käytetään, jos 1. ei ole. Jos mitään luetelluista ei ole niin käytetään viimeisenä annetun fonttiperheen oletusfonttia h1 {color:blue;} h3 {color:#330099;} p {font-family: verdana, arial, sans-serif;} font-size Fontin koko valitussa yksikössä h1 {font-size:1.5em;} h3 {font-size:120%;} p {font-size:14px;} font-style font-weight Fontin tyyli: normal, italic, oblique, inherit Fontin paksuus: normal, bold, bolder, lighter, inherit, 100, 200, 300, 400, 500, 600, 700, 800, 900 h3 {font-style:italic;} h3 {font-weight:bold;} text-align Tekstin sijoittelu: left, center, right h1 {text-align:center;} 9
Fonttiperheet, värit Fonttiperheet serif: päätteelliset fontit, esim. Times sans-serif: päätteettömät fontit, esim. Arial cursive: kaunokirjoitus, esim. script fantasy: esim. Jokerman monospace: tasalevyiset, esim. Courier Värit aqua, black, blue, green, fuchsia, gray, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow Heksadesimaalikoodit, esim. #9900CC, #3399FF Rgb-värit: esim. rgb(0,255,255) 10
Mittayksiköt Absoluuttiset cm: senttimetri in: tuuma (2,54 cm) mm: millimetri pt: piste 1 pt = 1 / 72 tuumaa pc: pica 1 pc = 12 pt Suhteelliset prosentti: suhteessa fonttiin em: suhteessa fontin m-kirjaimen leveyteen ex: suhteessa fontin x-kirjaimen korkeuteen px: pikselikoko suhteessa näytön resoluutioon 11
Elementin laatikkorakenne Marginal: marginaali muihin elementteihin nähden Border: kehys eli reunus Padding: tila sisällön ja reunuksen välissä Elementin sisältö Kaikki elementit, jotka määritellään CSS:llä omaavat kuvan laatikkorakenteen 12
Esimerkki laatikkorakenteesta <!DOCTYPE HTML PUBLIC "-//W3C//DTD X HTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns= http://www.w3.org/1999/xhtml xml:lang= fi > <head> <meta http-equiv= Content-Type content= text/html;charset=iso-8859-15 /> <title>esimerkki</title> <style type="text/css">* {border:solid thin blue}</style> </head> <body> <h1>laatikkorakenne</h1> <p> Elementtien tärkeimmät esitystavat <span style="color:red">(display)</span> ovat: </p> <ul> <li>block</li> <li>inside</li> <li>list-item</li> <li>none</li> </ul> <p>elementin esitystavan voi muuttaa oletusarvosta toiseksi<span style="color:red">(display)</span>.</p> </body> </html> 13
Marginaali margin sekä margin-top, margin-bottom, margin-left, margin-right: arvoina mittayksiköt p {margin-left:3cm} Voidaan antaa kaikki arvot kerralla järjestyksessä top, right, bottom, left (sama koskee border- ja padding-arvoja): h1 {margin: 5px 10% 2px 20%} Voidaan keskittää elementti niin, että elementin leveys on kiinteä riippumatta selainikkunasta: h1.leveys {width:15em; margin-left:auto; margin-right:auto} 14
Reunukset - border border-color sekä border-top-color, border-bottom-color, border-left-color, border-right-color: reunuksen väri border-style sekä border-top-style, border-bottom-style, border-left-style, border-right-style: reunuksen tyyli, arvoina: none, dotted, dashed, double, groove, inset, outset, ridge, solid border-width sekä border-top-width, border-bottom-width, border-left-width, border-right-width: reunuksen paksuus mittayksikköinä sekä arvoina thin, medium ja thick border sekä border-top, border-bottom, border-left, border-right: kaikki reunukseen liittyvä määrittely voidaan antaa kerralla 15
Padding Antaa tilaa elementin sisällön ja reunuksen (border) välille padding sekä padding-top, padding-bottom, padding-left, padding-right Arvona mittayksiköt <h1 style="border:solid;padding:0px"> Padding-arvo 0px</h1> <h1 style="border:solid;padding:5px"> Padding-arvo 5px</h1> <h1 style="border:solid;padding:10px"> Padding-arvo 10px</h1> <h1 style="border:solid;padding:20px"> Padding-arvo 20px</h1> 16
Display, kommentit, lähteet display kertoo miten elementti esitetään, voidaan muuttaa oletuksesta joksikin toiseksi esitystavaksi esim. display:block esittää elementin lohkoelementtinä (rivinvaihto) display:inline esittää elementin sisäelementtinä (ei rivinvaihtoa) display:list-item esittää elementin lista-alkiona display:inline-block esittää rivin sisäisen lohkon display:none jättää elementin esittämättä selaimessa CSS-kommentti kirjoitetaan: /* tämä on kommentti */ Lähdemateriaalina on toiminut http://www.w3.org 17