CSS - aloitus ICT01D syksy 2005 Mirja Jaakkola, Helia Ulkopuolisen tyylitiedoston käyttö Tyylimääritykset sijaitsevat erillisessä.css-tiedostossa, joka linkitetään xhtml-dokumenttin head-lohkossa linkelementillä: <link rel= stylesheet type= text/css href= tyyli.css /> Sama tyyli voidaan linkittää eri 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 1
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} style-elementti xhtml-dokumentille voidaan tehdä dokumentin sisäinen tyyliohje style-elementille, joka tulee headelementin alielementiksi 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; p h3 color: navy;} {color:#99cc33;} {background:yellow} 2
style-attribuutti 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 <h1 style= color:blue;border:solid > Sininen otsikko </h1> class-attribuutti Elementille voidaan antaa tyyliluokka class-attribuutilla Yleisiä tyyliluokkia voidaan käyttää eri elementtien kanssa <style type="text/css">.punainen {color:red}.sininen {color:blue} <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> 3
id-attribuutti Elementille voidaan antaa yksikäsitteinen tunniste id-attribuutilla. Tyyli koskee vain id:llä yksilöityä elementtiä <style type="text/css"> #aika {color:red} <body> <p id= aika">kello löi jo kuusi</p> <p>aika herätä </p> </body> Pseudoluokka Pseudoluokkaa eli näennäisluokkaa käytetään linkkien tyylimäärittelyssä seuraavasti: :link :visited :active linkki käyty linkki aktiivinen linkki eri selaimilla erilainen tulkinta: linkki, jonka päällä hiiri on alhaalla, esim. Opera 6 linkki, jota on juuri klikattu, esim. Mozilla 1.2. linkki, jossa juuri on käyty, esim. IE6 Esimerkki: <style> :link {color:blue} :active {color:lime} :visited {color:navy} :hover {color:red; text-decoration:none} :hover hiiri linkin päällä toimii Mozillassa myös muilla elementeilläkin esim. p 4
color Fontit font-family font-size font-style font-weight text-align 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 Kertoo fontin koon: prosenteissa, pikseleinä, Kertoo fontin tyylin Fontin paksuus Tekstin sijoittelu: left, center, right h1 {color:blue} H3 {color:#330099} p {font-family: verdana, arial, sans-serif} h1 {font-size:1.5 em} H3 {font-size:120%} p {font-size:14px} h3 {italic} h3 {bold} H1 {text-align:center} Elementin laatikkorakenne marginal: marginaali muihin elementteihin nähden border eli kehys padding: tila sisällön ja reunuksen välissä sisältö Kaikki elementit, joiden ulkoasu määritellään CSS:llä omaavat yllä esitetyn laatikkorakenteen 5
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:none jättää elementin esittämästä Esimerkki <!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-1 /> <title>esimerkki</title> <style type="text/css"> * {border:solid thin blue} </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> 6
Padding Antaa tilaa elementin sisällön ja reunuksen (border) välille padding sekä padding-top, paddingbottom, padding-left, padding-right Arvona mittayksiköt Esim. h1 {padding:5 px} h3 {padding-left:10 %} 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-bottomwidth, 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 7
Marginaali margin sekä margin-top, margin-bottom, marginleft, margin-right: arvoina mittayksiköt p {margin-left:3cm} Voidaan antaa 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} 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 8
Fonttiperheet serif: päätteelliset fontit, esim. Times sans-serif: päätteettömät fontit, esim. Arial cursive: kaunokirjoitus, esim. script fantasy: esim, Matisse ITC 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) 9