Päivitetty: 10.03.2003.

Ominaisuudet

Ominaisuudet muodostavat koko CSS:n perustan. Eri (x)HTML -elementeille voidaan määritellä eri ominaisuuksia, jotka kuvaavat elementin ulkoasua (koko, väri, tausta, tasaus yms.). CSS2 on alaspäin yhteensopiva, eli se sisältää kaikki samat ominaisuudet kuin CSS1, sekä tietysti paljon uudistuksia. CSS2:n ominaisuuksien yhteydessä kerron seuraavat asiat:

Yhteensopivuus: CSS versiot sekä selaimet joista lähtien ominaisuutta tuetaan.
Sallitut arvot: Ne arvot joita elementti voi saada. Ks. alla sallittujen arvojen merkintä
Oletusarvo: Elementillä oletuksena oleva arvo. Jos muuta ei määritetä, elementillä on tämä arvo
Käyttö: Ne elementit, jotka voivat saada tämän arvon ks. alla käyttö eri elementeissä
Periytyvä: Onko elementin arvo periytyvä (Kyllä / Ei).
Prosenttiarvo: Voidaanko käyttää %-arvoja (Kyllä / Ei)
Media: Ne mediaryhmät johon ominaisuus kuuluu

Ominaisuudet

Sallittujenarvojen merkintä:

CSS2 käyttää arvojen yhteydessä samoja merkitsemistapoja kuin CSS1. Merkittävin uudistus on, että jokainen attribuutti voi saada arvon 'inherit'.

<arvo>
Jos arvo on <> -merkkien välissä, tulee siihen kirjoittaa oikeanlainen arvotyyppi. Esim. jos arvotyyppi on <%>, pitää siihen kirjoittaa jokin prosenttiarvo, esim. 50%. Vastaavasti merkintä <pituus> tarkoittaa, että arvoksi tulee antaa pituusmitta esim. 25px.
arvo
Jos arvo on ilman <> merkkejä, voidaan arvo kirjoittaa sellaisenaan. Esim. bold.
inherit
CSS2:ssa jokainen ominaisuus voi saada arvon 'inherit'. Tämä tarkoittaa, että elementti perii (tai pikemminkin "pakko perii") ylemmän tason elementillä olevat arvot.
arvo1 | arvo2
Jos arvojen välissä on pystyviiva ( | ), kyseiset arvot ovat toistensa vaihtoehtoja, eli voit käyttää vain toista mutta et molempia.
arvo1 || arvo2
Mikäli arvojen välissä on kaksi pystyviivaa ( || ), kyseiset arvot ovat vaihtoehtoja, mutta voit myös käyttää molempia arvoja yhtäaikaa
[arvo1 || arvo2 ] | arvo3
Kun arvot ovat hakasulkujen sisällä [ ] tarkoittaa tämä, että arvot ovat ryhmitelty. Elin ne muodostavat tavallaan oman arvo kokonaisuuden.
arvo {A,B}
Aaltosulut kertovat, kuinka monta eri arvoa voidaan kyseiselle ominaisuudella antaa. A on minimi ja B maksimi. Esim. margin {1,4} tarkoittaa, että margin voi saada 1-4 eri arvoa. Tällöin kyseessä on yleensä ns. pikakirjoite.
[arvo]*
Jokeri eli tähtimerkki ( * ) tarkoittaa, että edeltävä arvo/arvoryhmä voidaan toistaa monta kertaa tai ei ollenkaan.
[arvo]+
Plusmerkki ( + ) tarkoittaa, että edeltävä arvo/arvoryhmä voidaan toistaa monta kertaa, mutta vähintään kerran.
[arvo]?
Kysymysmerkki ( ? ) tarkoittaa, että edeltävä arvo/arvoryhmä on valinnainen.
arvo1/arvo2
Kauttaviiva ( / ) tarkoittaa, että ominaisuus saa kaksi arvoa, jotka erotetaan toisistaan kauttaviivalla.

<< Alkuun


Käyttö eri elementeissä

Käyttökohdassa lukee, minkä tyyppisten elementtien kanssa ominaisuus on käytettävissä. Eri vaihtoehdot ovat

Kaikki elementit
'All' - jolloin kyseistä ominaisuutta voidaan käyttää missä tahansa (x)HTML-elementissä.
Rivinsisäinen
'Inline' eli rivinsisäinen -elementti. Kun elementti on rivinsisäinen, sen täytyy sijaita aina jonkin lohkotason elementin sisällä. Esimerkiksi <b> -elementti on rivinsisäinen ja se voi sijaita ainoastaan lohkon sisällä, esim. <p> Kappale <b>inline-tekstiä </b> .. jatkuu</p>. Seuraavat elementit ovat inline tyylisiä:
Fyysiset kirjaintyylit: b, big, i, s, strike, tt, u
Loogiset kirjaintyylit: abbr, acronym, cite, code, dfn, em, kbd, samp, strong, var
Erikoistapaukset: a, applet, basefont, bdo, br, font, img, iframe, map, q, script, span, sub, sup ja object
Lomake: button, input, label, select, textarea
Lohko
'Block' eli lohko-elementti. Elementti, joka tekee rivinvaihdon ennen ja jälkeen elementin, on lohkoelementti. Lohko voidaan ajatella tekstikappaleena, yleisin lohkoelementti onkin <p>. Lohkoelementtejä ovat:
Kappaleet: h1, h2, h3, h4, h5, h6 ja p
Erikoistapaukset: address, blockquote, center, div, dl, form, fildset, hr, isindex, noframes, noscript, pre, table, lisäksi listatyylit ovat myös lohkoja mutta ne lasketaan omaksi ryhmäksi.
Lista
'List-item' eli lista. Listatyylit ovat siis kappaleita, koska ne tekevät rivinvaihdon ennen ja jälkeen elementin. Lisäksi listan ei tarvitse sijaita kappaleen sisällä. Listaelementtejä ovat: dd, dl, dt, il, ol, ul
Korvattu
'Replaced' eli korvattu-elementti' ovat HTML-elementtejä, jotka 'korvataan' jollakin muulla. Esim. <IMG> -elementti korvataan src-attribuutin määrittämällä kuvalla. Korvattuja elementtejä ovat: img, input, textarea, select, object

Huomaa, että jotkin elementit voidaan luokitella useampaan kategoriaan. Esim. <IMG> -elementti on rivinsisäinen eli se sijoitetaan tekstirivin tason mukaisesti. Mutta <IMG> on myös korvattu-elementti.

<< Alkuun


Pikakirjoite

CSS mahdollistaa useiden sääntöjen kirjoittamisen pikakirjoitteena. Esimerkiksi jos haluamme määritellä <H1> -elementille punaisen 2 pikselin levyisen reunaviivan voimme kirjoittaa:
H1 {
border-top: red 2px solid;
border-right: red 2px solid;
border-bottom: red 2px solid;
border-left: red 2px solid}

Samaan lopputulokseen pääsemme myös jos määritämme säännön pikakirjoitteena:
H1{ border: red 2px solid }
.

Vastaavasti esim border-width on pikakirjoite, se määrittä reunuksen paksuuden. Voimme antaa myös pikakirjoitteelle useita eri arvoa esim. näin:

H1 { border-width: 2px } - Reunuksen paksuus on 2px.
H1 { border-width: 2px 4px } - Ylä- ja alareunus ovat 2px ja vasen sekä oikea ovat 4px.
H1 { border-width: 2px 4px 8px } - Ylös 2px, vasen ja oikea 4px ja alas 8px.
H1 { border-width: 0 2px 4px 8px } - Ylös 0, oikea 2px, alas 4px ja vasen 8px.

Huomaa, että jos mitta on 0 (nolla) yksikkö ei tarvitse välttämättä ilmoittaa, eli 0px on sama 0.

<< Alkuun



© Petteri Perälä 2000 - 2003.
E-mail: [ petepe@mbnet.fi ].

Valid CSS! Valid HTML 4.01!