CSS – osa 1 Teppo Räisänen

Esitys aiheesta: "CSS – osa 1 Teppo Räisänen"— Esityksen transkriptio:

1 CSS – osa 1 Teppo Räisänen http://www.oamk.fi/~teraisan/ Teppo.raisanen@oamk.fi

2 Yleistä CSS = Cascading Style SheetsCascading Style Sheets Taustalla HTML:n ongelmat HTML tarkoitettiin kuvaamaan sisältöä Käytännössä kielellä kuvataan myös elementtien esitystapa Selainvalmistajat ovat laajentaneet HTML:ää omilla tageillaan

3 Yleistä W3C lisäsi HTML 4.0:aan STYLES-avainsanan Modernit web-selaimet tukevat kaikki CSS:ää Tyylit tallennetaan normaalisti ulkoisiksi.css- tiedostoiksi Tyylien avulla voidaan esim. pienillä muutoksilla uudistaa koko sivuston ulkoasua Sivustolle voidaan esim. tehdä omat tyylit selainkatselua, mobiililaitetta ja tulostamista varten

4 Tyylien käyttäminen Tyylit voidaan ilmoittaa Ulkoisessa tiedostossa/tiedostoissa head-elementin sisällä HTML-sivulla HTML-elementin sisällä Kaikkien edellisten yhdistelmänä

5 Tyylien lomittuminen Lopullinen ulkoasu määräytyy seuraavan prioriteettijärjestyksen mukaan: 1) HTML-elementin sisäinen (inline) tyyli 2) head-tagin sisällä ilmoitettu tyyli 3) Ulkoinen tyylitiedosto 4) selaimen oletusmuotoilu

6 Tyyliryhmät Tyylit voidaan jakaa viiteen kokonaisuuteen: Fonttiominaisuudet (font) Väri- ja taustaominaisuudet (color, background) Tekstiominaisuudet (text) Suorakaideominaisuudet (box) Luokkaominaisuudet (classification)

7 Ominaisuustyypit Ominaisuudet voivat saada seuraavia arvoja: pituusarvot (length) prosenttiarvot (percentage) väriarvot (color) lokaattorit (url) avainsanat (keyword)

8 Ominaisuustyypit p{ font-size: 12px; line-height: 120%; color rgb(0,255,0); background url(tausta.jpg); font-weight: bold; }

9 Syntaksi Ulkoasu osoitetaan CSS-sääntöjen avulla Säännössä esitetään muotoiltava elementti muotoiltava elementin ominaisuus ominaisuudelle annettava arvo

10 Syntaksi Säännöt esitetään muodossa elementti {ominaisuus: arvo} Esim. dokumentin rungon värin asetus: body {color: black} Useasta sanasta koostuvat ominaisuudet sijoitetaan lainausmerkkeihin: p {font-family: "sans serif"}

11 Syntaksi Useamman ominaisuuden asetukseen käytetään puolipistettä erottimena: p {text-align:center;color:red} Usea elementti voidaan ryhmitellä käyttämällä pilkkuerotinta: h1,h2,h3,h4,h5,h6 { color: green }

12 Syntaksi Elementeille voidaan määritellä luokat joihin viitataan piste-erottimella, esim. p {color: blue} p.pun {color: red} Punaista tekstiä

13 Syntaksi Luokkavalitsin voidaan määritellä myös elementistä riippumattomaksi Tällöin kaikki ko. luokan toteuttavat elementit käyttävät CSS-arvoa:.pun{color: red} Punainen otsikko punaista tekstiä

14 Syntaksi Pseudoluokat ovat elementtien tilaan perustuvia tyylimäärittelyjä a:link{color: blue} /*valitsematon*/ a:visited{color: red} /*vierailtu*/ Pseudoelementtien muotoilujen kohteet määräytyvät vasta konkreettisten sisältöjen perusteella p:first-letter{font-size: bigger}

15 Syntaksi Kommentointiin käytetään /* ja */ merkkejä p { text-align: center color: black /*Musta teksti */ margin-left: 20px /*Huom. 20px YHTEEN!*/ }

16 Ulkoiset tyylitiedostot Ulkoisia tiedostoja kannattaa käyttää, kun samaa tyyliä sovelletaan useassa dokumentissa Tyylitiedosto liitetään sivuun link-tagin avulla:

17 Ulkoiset tyylitiedostot Tyylitiedoston voi kirjoittaa millä tahansa teksturilla Tiedosto tallennetaan.css-päätteiseksi Tiedosto ei saa sisältää HTML-tageja Web-editorit kuten Dreamweaver osaavat esittää syntaksin korostukset ym.

18 Sivun sisäiset tyylit Sisäisiä tyylitiedostoja käytetään, kun yksittäiselle sivulle toteutetaan oma ulkoasu Tyylit määritellään head-osiossa Huom. Selain, joka ei tue tyylejä näyttää style-tagin sisällön normaalina tekstinä

19 Sivun sisäiset tyylit hr {color: sienna} p {margin-left: 20px} body {background-image: url(“kuvat\tausta.gif")}

20 Inline-tyylit Inline-tyylin haittana on sisällön ja esitystavan sekoittuminen Normaalisti inline-tyylejä kannattaa välttää Inline-tyyli määritellään style-attribuutin arvoina Tekstiä