CSS - aloitus ICT01D – syksy 2005 Mirja Jaakkola, Helia.

Esitys aiheesta: "CSS - aloitus ICT01D – syksy 2005 Mirja Jaakkola, Helia."— Esityksen transkriptio:

1 CSS - aloitus ICT01D – syksy 2005 Mirja Jaakkola, Helia

2 Ulkopuolisen tyylitiedoston käyttö Tyylimääritykset sijaitsevat erillisessä.css- tiedostossa, joka linkitetään xhtml-dokumenttin head- lohkossa link-elementillä: 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

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}

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. body {font-family:arial,sans-serif; color: navy;} p {color:#99CC33;} h3 {background:yellow}

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 Sininen otsikko

6 class-attribuutti Elementille voidaan antaa tyyliluokka class-attribuutilla Yleisiä tyyliluokkia voidaan käyttää eri elementtien kanssa.punainen {color:red}.sininen {color:blue} Punainen otsikko Tässä on sinistä tekstiä Teksti on nyt punaista

7 id-attribuutti Elementille voidaan antaa yksikäsitteinen tunniste id-attribuutilla. Tyyli koskee vain id:llä yksilöityä elementtiä #aika {color:red} Kello löi jo kuusi Aika herätä…

8 Pseudoluokka Pseudoluokkaa eli näennäisluokkaa käytetään linkkien tyylimäärittelyssä seuraavasti: a:linklinkki a:visitedkäyty linkki a:activeaktiivinen 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 a:hoverhiiri linkin päällä toimii Mozillassa myös muilla elementeilläkin esim. p Esimerkki: a:link {color:blue} a:active {color:lime} a:visited {color:navy} a:hover {color:red; text-decoration:none}

9 Fontit colorFontin värin nimenä, heksadesimaalina tai rgb-arvona h1 {color:blue} H3 {color:#330099} font-familyFontin, 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 p {font-family: verdana, arial, sans-serif} font-sizeKertoo fontin koon: prosenteissa, pikseleinä, h1 {font-size:1.5em} h3 {font-size:120%} p {font-size:14px} font-styleKertoo fontin tyylinh3 {italic} font-weightFontin paksuush3 {bold} text-alignTekstin sijoittelu: left, center, righth1 {text-align:center}

10 Elementin laatikkorakenne sisältö padding: tila sisällön ja reunuksen välissä border eli kehys marginal: marginaali muihin elementteihin nähden Kaikki elementit, joiden ulkoasu määritellään CSS:llä omaavat yllä esitetyn laatikkorakenteen

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

12 Esimerkki esimerkki * {border:solid thin blue} Laatikkorakenne Elementtien tärkeimmät esitystavat (display) ovat: block inside list-item none Elementin esitystavan voi muuttaa oletusarvosta toiseksi (display).

13 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 Esim. h1 {padding:1.2em} h3 {padding-left:10%}

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 Marginaali margin sekä margin-top, margin-bottom, margin- left, 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}

16 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

17 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

18 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)