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

Esitys aiheesta: "Teppo Räisänen http://www.oamk.fi/~teraisan/ Teppo.raisanen@oamk.fi CSS – osa 2 Teppo Räisänen http://www.oamk.fi/~teraisan/ Teppo.raisanen@oamk.fi."— Esityksen transkriptio:

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

2 Johdanto Seuraavassa osuudessa esitetään yleiset CSS1:n avulla toteutettavat muokkaukset Osuus ei ole tarkoitettu kattavaksi vaan lähinnä esittelyksi Esim. Microsoft on julkaissut omia CSS-malleja, jotka toimivat lähinnä IE-selaimessa

3 Periytyminen CSS-ominaisuuksien käyttö perustuu HTML-dokumentin esittämiseen rakennepuuna Rakennepuun ylimmän tason elementti on HTML CSS:n keinoin määritellyt ominaisuudet periytyvät puuhierarkiassa alaspäin

4 Periytyminen Periytymisellä säästetään vaivaa, kun alatasojen yhteiset ominaisuudet voidaan määrittää ylätasolla Tavallinen tapa on antaa määrityksiä html- tai body-tasolla p-tagille voidaan antaa määritykset, jotka periytyvät kappaleiden sisäisille osioille

5 Periytyminen Kaikki CSS-ominaisuudet (kuten esim. taustaominaisuudet) eivät periydy Lapsielementtiin kohdistuvien ylätason elementtien ominaisuudet kumuloituvat Jos periytyvät ominaisuudet ovat ristiriidassa, käytetään lähimmän tason ominaisuuksia

6 Fonttiominaisuudet font-family font-style font-variant font-weight
font-size fontti normal|italic|oblique normal|small-caps vahvennus kirjasinkoko

7 Fonttiominaisuudet Esim. fontin vahvuuden voi ilmoittaa monella tavalla Font-familyn arvona voidaan käyttää geneerisiä nimiä serif, sans-serif, cursive, fantasy, monospace, joiden konkreettisen ulkoasun päättää selainohjelma

8 Väri- ja taustaominaisuudet
color background-color background-image background-repeat background-attachment background-position tekstin väri taustaväri taustakuva kuvan monistus scroll|fixed asemointi

9 Tekstiominaisuudet word-spacing letter-spacing text-decoration
vertical-align text-transform text-align text-indent line-height sanojen välistys kirjainten välistys tekstin somistus tekstin tasaus kirjasinkoon muokk. tekstin vaakatasaus sisennys rivikorkeus

10 Suorakaideominaisuudet
margin-top|right|bottom|left padding-top|right|bottom|left border-top|right|bottom|left border-color border-style width height marginaali etäisyys reunasta reunan paksuus reunan väri reunan tyyli elementin korkeus elementin leveys

11 Luokkaominaisuudet display white-space list-style-type
list-style-image elementin esitystapa tyhjämerkit elementin symboli elmentin kuva

12 CSS2 1-version laajennus Sisältää mm.
Puheen ja äänen tuottamiseen liittyviä ominaisuuksia Tulostamiseen liittyviä ominaisuuksia Lisätietoa CSS-versioiden yhteensopivuuksista CSS2täältä