Ulkopuolisen tyylitiedoston käyttö

Transkriptio

1 1 CSS - aloitus Sisältö: s. 2. Ulkopuolisen tyylitiedoston käyttö s. 3. Tyyliohjeen kirjoittaminen s. 4. style-elementti s. 5. style-attribuutti s. 6. class-attribuutti s. 7. id-attribuutti s. 8. Fontit s. 9. Fonttiperheet, värit s. 10. Mittayksiköt s. 11. Elementin laatikkorakenne s. 12. Display s. 14. Padding s. 15. Reunukset border s. 16. Marginaali Ulkopuolisen tyylitiedoston käyttö 2 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

2 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 spanelementille: h1 span {color:red;font-size:1.3em} 4 style-elementti xhtml-dokumentille voidaan tehdä dokumentin sisäinen tyyliohje style-elementille, joka tulee head-elementin 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; color: navy;} p {color:#99cc33;} h3 {background:yellow} </style> 2

3 5 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> 6 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} </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> 3

4 7 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} </style> <body> <p id="aika">kello löi jo kuusi</p> <p>aika herätä </p> </body> 8 Fontit color 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.5em} h3 {font-size:120%} p {font-size:14px} h3 {italic} h3 {bold} h1 {text-align:center} 4

5 10 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 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 5

6 11 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 12 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ä 6

7 Esimerkki <!DOCTYPE HTML PUBLIC "-//W3C//DTD X HTML 1.1//EN" " <html xmlns= xml:lang= fi > <head> <meta http-equiv= Content-Type content= text/html;charset=iso /> <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 Padding 14 Antaa tilaa elementin sisällön ja reunuksen (border) välille padding sekä padding-top, padding-bottom, padding-left, padding-right Arvona mittayksiköt Esim. h1 {padding:1.2em} h3 {padding-left:10%} 7

8 15 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 Marginaali margin sekä margin-top, margin-bottom, margin-left, marginright: 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} 16 8