[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]

Kuvaukset

tyylisivut ovat ikään kuin dokumentin esitysasua koskevia attribuuttikokoelmia. Tässä mielessä CSS toimii aina attribuuttitasolla riippumatta tavasta, millä tavoin elementtien ulko- eli esitysasu määritellään.

Tyylisivuen sisällä olevia dokumentin ulkoasua koskevia määrittelyjä ei kuitenkaan kutsuta englanninkielisissä teksteissä attribuuteiksi vaan niistä käytetään ilmaisua properties eli suomeksi ominaisuudet.

Yksi CSS-ominaisuus voi toisinaan korvata monta HTML-attribuuttia. On myös tilanteita, joissa yhden HTML-attribuutin korvaamiseksi tarvitaan useiden CSS-ominaisuuksien määrittelemistä vieläpä niin, että ominaisuudet täytyy antaa eri elementeille. Jos HTML-attribuutti ja CSS-ominaisuudet käsittelevät samaa dokumentin esityasua koskevaa piirrettä, tällä seikalla ei ole periaatetasolla mitään merkitystä. CSS:n perustehtävähän on poistaa or muuttaa minkä tahansa dokumentin esitysasua koskevan HTML-elementin tai -attribuutin vaikutus. Olennaista on vain se, että pystyykö CSS:ää ylipäätänsä soveltamaan johonkin tilanteeseen.

Ominaisuuksista luodaan aina kuvauksia (declaration), jolla tarkoitetaan yhtä ominaisuutta ja sille annettua arvoa tai arvojoukkoa. Kuvauksen sisällä yksittäinen omainaisuus määritellään siten, että ensin annetaan ominaisuuden nimi ja kaksoispisteen (:) jälkeen sen arvo tai useita samalla kertaa annettuja arvoja. CSS-ominaisuuksia voi antaa yhtä aikaa kuinka paljon tahansa kunhan yksittäiset ominaisuudet ja niiden arvot erotetaan toisistaan puolipisteellä (;), esim.:

color:#660033; background-color:yellow;

Ominaisuudet ovat yleensä kuvauslohkon (declaration-block) sisällä. Kuvauslohkon rajoittimina toimivat kaarisulut ({}). Alla on kuvauslohkon käsitekaavio (kaarisulkujen, kaksois- ja puolipisteiden väliin saa jättää tyhjää tilaa niin paljon kuin halutaan):

Kuvauslohko (declaration-block)
kuvaus (declaration)
ominaisuus (property) arvo (value)
{ color : #660033 }

Sivujen tekijä voi useissa tapauksissa valita sen, esittääkö hän ominaisuudet ja niiden arvot yksitellen vai kokoaako hän jotkut ominaisuudet ns. pikakirjoitteeksi (shorthand properties). Yleensä taustan ominaisuudet esitetään pikakirjoitteina, esim. seuraavaan tapaan ([M][S][Pw]):

body {background: white url(./Taulut/kierrevihko.gif) repeat-y 2px 0px;}

Edellisessä esimerkissä kuvauslohkon sisällä oli vain yksi kuvaus. Seuraavassa esimerkissä kuvauslohko sisältää useita kuvauksia. Laitan seuraavassa esimerkissä selvyyden vuoksi yksittäiset kuvaukset allekkain. Yksitellen esitettynä edellisen esimerkin ominaisuuksien kuvauslohko näyttäisi tältä (en tässä yhteydessä käy lävitse, mitä yksittäiset ominaisuudet tarkoittavat):

body
{background-color: white;
background-image: url(./Taulut/kierrevihko.gif);
background-repeat: repeat-y;
background-position: 2px 0px;}

Kaikkia ominaisuuksia ei voi esittää pikakirjoitteena, mutta jos voi, periaate on sangen yksinkertainen:
Pikakirjoitteessa ominaisuuden arvot laitetaan peräkkäin, väliin jätetään tyhjää (space) ja arvojen antaminen päätetään puolipisteellä (;). Myös aliominaisuudet voidaan toteuttaa pikakirjoitteena, esim.:

body {border-top: 1px #660033 solid;}

/* vertaa sitä seuraavaan kuvauslohkoon */

body {border: 1px #660033 solid;}
[Alku]