Lataa esitys
Esittely latautuu. Ole hyvä ja odota
1
Teppo Räisänen http://www.oamk.fi/~teraisan/ Teppo.raisanen@oamk.fi
CSS – osa 1 Teppo Räisänen
2
Yleistä CSS = Cascading 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
Selaintuotteista IE 4.0 ja Netscape uud. tukevat CSS:ää Tyylit tallennetaan normaalisti ulkoisiksi .css-tiedostoiksi Tyylien avulla voidaan esim. pienillä muutoksilla uudistaa koko sivuston ulkoasua Sivustolle voidaan esim. tehdä omat tyylit selainkatselua 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: HTML-elementin sisäinen (inline) tyyli head-tagin sisällä ilmoitettu tyyli Ulkoinen tyylitiedosto 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} <p class=”pun”>Punaista tekstiä</p>
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} <h1 class=”pun”>Punainen otsikko</h1> <p class=”pun”>punaista tekstiä</p>
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: <link rel="stylesheet" type="text/css" href=“tyylit.css" />
17
Ulkoiset tyylitiedostot
Tyylitiedoston voi kirjoittaa millä tahansa tekstitiedostolla 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 <head> <style type="text/css">
hr {color: sienna} p {margin-left: 20px} body {background-image: url(“kuvat\tausta.gif")} </style> </head>
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 <p style=”color: black”>Tekstiä</p>
Samankaltaiset esitykset
