Kaikki sisällöt

CSS2:en ominaisuuksia

Mediatyypit
Asemointi

CSS2 on uusin CSS-spesifikaatio. Ikävä kyllä selaimet eivät tue täydellisesti edes vanhempaa CSS1-standardia joten CSS2:en tuki on tätäkin kehnompaa. Tuki CSS2:lle on kuitenkin nopeasti paranemassa erityisesti elementtien sijoitteluun vaikuttavien ominaisuuksien osalta. Tässä luvussa käsitellään tärkeimmät CSS2:en uusista ominaisuuksista.

CSS2 tuo mukanaan seuraavia uusia ominaisuuksia:

Mediatyypit kuten print
ääniominaisuuksien määrittely
Fonttien hakeminen suoraan palvelimelta
Suhteellinen, absoluuttinen ja kiinnitetty asemointi
Minimileveyden, -korkeuden, maksimileveyden ja -korkeuden määrittely
Laskurit ja automaattinen numerointi
Tekstin varjostus
Käyttäjän asetuksien huomiointi

CSS2 spesifikaation voi lukea osoitteessa: <URL: http://www.w3.org/TR/REC-CSS2/>.

Mediatyypit

CSS2 mahdollistaa tyylien määrittelyn käytettävästä mediasta riippuen. Omat asetukset voi määritellä tavalliselle näytölle, paperille, puhesyntetisaattorille jne. Joillekin medioille löytyy aivan omia ominaisuuksia, kun taas jotkin ominaisuudet voivat olla yhteisiä eri medioiden välillä. Jokainen media kuitenkin vaatii omat arvonsa kullekin ominaisuudelle. Esimerkiksi näytölle määritellään käytettäväksi erilaista kirjasintyyppiä kuin paperille.

Mediariippuvaisia tyylejä voidaan määritellä usealla eri tavalla. Mediatyyppi voidaan määrätä suoraan xhtml-dokumentissa link-elementin media-ominaisuudella. Voidaan käyttää @import-määrittelyä:

@import url("paperi.css") print;

@media-määrittelyllä voidaan suoraan rajata ominaisuusmäärittelyt koskemaan tiettyä mediaa:

@media aural {

/* puheeseen liittyvät tyylimääritykset */


}

CSS2 tunnistaa seuraavat mediatyypit:

all

Sopii kaikille medioille

aural

Tarkoitettu puhesyntetisaattoreille.

braille

Tarkoitettu braille-näytöille eli pistekirjoitusnäytöille.

embossed

Tarkoitettu sivuttaville braille-tulostimille.

handheld

Tarkoitettu pienille kädessäpidettäville laitteille joissa on yleensä pieni mustavalkoinen näyttö ja pieni tiedonsiirtokapasiteetti.

Tarkoitettu paperitulosteisiin ja esitulostuskatseluun.

projection

Tarkoitettu videoprojektoreille ja kalvotulostuksiin.

screen

Tarkoitettu tavallisille tietokoneissa käytettäville värinäytöille.

tty

Tarkoitettu tasalevyistä kirjasinta käyttäville laitteille, pääteohjelmille tai kannettaville laitteille.

Tarkoitettu televisioille ja vastaaville näyttölaitteille joiden näyttötarkkuus on pieni mutta pystyvät esittämään värejä ja ääntä

Esimerkki puhesyntetisaattorille osoitetuista tyylimäärityksistä:

@media aural {

h1, h2, h3, h4, h5, h6 {

voice-family: paul, male;

stress: 20; richness: 90;

}

h1 {

pitch: x-low;

pitch-range: 95;

}

h2 {

pitch: x-low;

pitch-range: 85;

}

h3 {

pitch: low;

pitch-range: 75;

}

h4 {

pitch: medium;

pitch-range: 65;

}

li, dt, dd {

pitch: medium;

richness: 65;

}

pre, code {

pitch: medium;

pitch-range: 0;

stress: 0;

richness: 85;

}

em {

pitch: medium;

pitch-range: 65;

stress: 65;

richness: 55;

}

strong {

pitch: medium;

pitch-range: 65;

stress: 95;

richness: 95;

}

a:link {

voice-family: harry, male;

}

a:visited {

voice-family: betty, female;

}

a:active {

voice-family: betty, female;

pitch-range: 85;

pitch: x-high;

}

Asemointi

CSS2 ratkaisee vihdoinkin WWW-sivujen tekijöiden suurimman ongelman eli elementtien sijoittelun graafisissa selaimissa. Enää ei tarvitse temppuilla taulukoiden kanssa tai muulla tavoin väärinkäyttää HTML-elementtejä saadakseen sijoitettua esimerkiksi kuvan haluamaansa kohtaan näytöllä.

position

position: static | relative | absolute | fixed | inherit

position-ominaisuudella voidaan määritellä millä tavalla elementin sijoittuminen näytöllä päätetään. Tarkempaan sijoitteluun käytetään top-, bottom-, left- ja right-ominaisuuksia.

Static on oletusarvo ja tarkoittaa, että elementti sijoitetaan aivan normaalisti..

Relative ottaa käyttöön suhteellisen sijoittelun. Elementin sijoittuminen lasketaan top-, bottom-, left- ja right-ominaisuuksien perusteella suhteessa siihen paikkaan johon elementti normaalitilanteessa (static) sijoittuisi. Tätä elementtiä seuraavat elementit sijoitellaan aivan kuin suhteellisesti sijoitettu elementti olisi normaalissa paikassaan. Suhteellisesti sijoiteltu elementti ei siis vaikuta sitä seuraavien elementtien sijoitteluun.

Absolute arvo aiheuttaa elementin sijainnin ja koon määrittelyn top-, bottom-, left- ja right-, width- ja height-ominaisuuksilla suhteessa elementin sisältävään blokkiin. Absoluuttisesti sijoitettu elementti ei vaikuta sen jälkeen tulevien elementtien sijoitteluun.

Fixed toimii muuten tismalleen samoin kuin absolute, mutta elementin sijainti kiinnitetään näkyvään osaan näyttöä eikä sitä siis vieritetä pois näytöltä. Kiinnitetyllä (fixed) sijoittelulla voidaan helposti korvata kehysten käyttäminen ilman kehysten ongelmia.

Inherit aiheuttaa sijoittelutavan perimisen vanhempi-elementiltä.

top

top: <pituus> | <prosentti> | auto | inherit

top-ominaisuus määrittää kuinka kaukana sijoiteltavan elementin yläreuna sijaitsee käytettävissä olevan alueen yläreunasta. Etäisyys voidaan ilmoittaa prosentteina alueen koosta tai haluttuina mittayksiköinä. Auto on oletusarvo. Inherit perii käytettävän etäisyyden vanhempi-elementiltä jos, perintä on mahdollista.

top: 1em;

bottom

bottom: <pituus> | <prosentti> | auto | inherit

bottom-ominaisuus määrittää kuinka kaukana sijoiteltavan elementin alareuna sijaitsee käytettävissä olevan alueen alareunasta. Etäisyys voidaan ilmoittaa prosentteina alueen koosta tai haluttuina mittayksiköinä. Auto on oletusarvo. Inherit perii käytettävän etäisyyden vanhempi-elementiltä, jos perintä on mahdollista.

bottom: 5%;

left

left: <pituus> | <prosentti> | auto | inherit

left-ominaisuus määrittää kuinka kaukana sijoiteltavan elementin vasen laita sijaitsee käytettävissä olevan alueen vasemmasta laidasta. Etäisyys voidaan ilmoittaa prosentteina alueen koosta tai haluttuina mittayksiköinä. Auto on oletusarvo. Inherit perii käytettävän etäisyyden vanhempi-elementiltä, jos perintä on mahdollista.

left: 2%;

right

right: <pituus> | <prosentti> | auto | inherit

right-ominaisuus määrittää kuinka kaukana sijoiteltavan elementin oikea laita sijaitsee käytettävissä olevan alueen oikeasta laidasta. Etäisyys voidaan ilmoittaa prosentteina alueen koosta tai haluttuina mittayksiköinä. Auto on oletusarvo. Inherit perii käytettävän etäisyyden vanhempi-elementiltä, jos perintä on mahdollista.

right: 2em;

z-index

z-index: auto | <kokonaisluku> | inherit

CSS2:ssa voidaan elementtien sijoittuminen määritellä kolmessa ulottuvuudessa. Sen lisäksi, että kappale voidaaan sijoittaa x- ja y-akselien mukaan, niin myös z-suunta on mahdollista. Elementtejä voi siis sijoitella päällekkäin niin, että jokin näyttää olevan lähimpänä käyttäjää ja peittää tällöin alleen jääviä elementtejä. z-index-ominaisuudella voidaan määrittää elementin sijoittuminen z-suunnassa. Mitä korkeampi elementin z-index-ominaisuuden arvo on, sitä lähempänä käyttäjää se sijaitsee ja jättää taakseen kaikki ne elementit, joiden z-index-arvo on pienempi.

z-index: 3;

Suhteellinen asemointi

Määritellään span-elementille muutama aliluokka, joilla voidaan merkittyä tekstiä liikutella normaalista ylös, alas, oikealle tai vasemmalle.

body {

background: white none;


margin: 0em; padding: 0em;


}


span.up {

position: relative;

top: -1em;

font-weight: bolder;

background: yellow none;


}


span.down {

position: relative;

top: 1em;

font-weight: bolder;


background: yellow none;


}


span.left {

position: relative;

left: -1em;

font-weight: bolder;

background: yellow none;


}


span.right {

position: relative;

left: 1em;

font-weight: bolder;

background: yellow none;


}

Esimerkki xhtml-dokumentista, jossa joitakin tekstejä on asemoitu uudelleen yllämainituilla tyylimäärityksillä.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">


<head>


<link rel="StyleSheet" href="relative.css"


type="text/css" media="screen" />


<title>Suhteellinen sijoittelu</title>


</head>


<body>


<h1>Suhteellinen sijoittelu</h1>


<blockquote


cite="http://www.w3.org/TR/REC-CSS2/visuren.html#relative-positioning">


<p>


Once a box has been laid out according to the <span class="up">normal


flow</span>, it may be shifted <span class="down">relative</span> to this


position. This is called relative positioning. Offsetting a box <span


class="left">(B1)</span> in this way has no effect on the box <span


class="right">(B2)</span> that follows: B2 is given a position as if B1


were not offset and B2 is not re-positioned after B1's offset is applied.


<span class="right down">This implies that relative positioning may cause


boxes to overlap.</span>


</p>


<p>

Relatively positioned boxes keep their normal flow size, including line

breaks and the space originally reserved for them. A relatively positioned


box establishes a new a new containing block for normal flow children and


positioned descendants.

</span>

</p>

</blockquote>


</body>


</html>

Kuva 17: Suhteellinen asemointi.

Absoluuttinen ja kiinnitetty asemointi

Kokeillaan miten sijoittelu eri kohtiin näyttöä onnistuu. Sijoitetaan laatikko näytön jokaiseen kulmaan sekä keskelle.

body {

background: white none; color: black;


margin: 0em; padding: 0em;


}


.topleft {


background: yellow none; color: black;

width: 25%; height: 25%;

margin: 0%;

position: fixed;

top: 0%; left: 0%;

}

.topright {


background: blue none; color: black;

width: 25%; height: 25%;

margin: 0%;

position: fixed;

right: 0%; top: 0%;

}

.bottomleft {


background: silver none; color: black;

width: 25%; height: 25%;

margin: 0%;

bottom: 0%; left: 0%;

position: fixed;

}

.bottomright {


background: green none; color: black;

width: 25%; height: 25%;

margin: 0%;

bottom: 0%; right: 0%;

position: fixed;

}

.center {


background: red none; color: black;

width: 25%; height: 25%;

margin: 0%;

top: 37.5%; left: 37.5%;

position: fixed;

Testaamiseen voidaan käyttää seuraavaa xhtml-dokumenttia.

<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">


<head>


<link rel="StyleSheet" href="fixed.css" type="text/css" media="screen" />


<title>Asemointia</title>


</head>


<body>

Vasen ylänurkka (fixed)

</div>

Oikea ylänurkka (fixed)

</div>

Vasen alanurkka (fixed)

</div>

Oikea alanurkka (fixed)

</div>

Keskellä näyttöä (fixed)

</div>

</body>

</html>

Kuva 18: Kiinnitetty asemointi.

Seuraavassa luodaan tyylimääritykset joilla saadaan aikaiseksi tyypillisiä kehyksiä matkiva sivun ulkomuotoilu. Määritellään kolme tyyliluokkaa. .navbar sijoittaa kiinnitettynä aivan näytön ylälaitaan sopivan alueen navigointilinkkejä varten. .leftbar sijoittaa kiinnitettynä sivun vasempaan laitaan alueen linkkejä varten. .logo sijoittaa kiinnitettynä aivan näytön vasempaan ylänurkkaan paikan esimerkiksi pientä logoa varten. Jokainen alue pysyy paikallaan kehysten tapaan vaikka näytöllä olevaa tekstiä vieritettäisiin. Jokaisen alueen koko ja sijoittelu täytyy laskea tarkkaan marginaalit ja täytteet huomioiden, jotta alueet eivät menisi toistensa päälle. Koska elementtien koko ei nyt kasva niiden sisältämän tekstin tai muiden elementtien vaatiman tilan mukaan, täytyy olla erityisen varovainen, ettei sijoita liikaa tavaraa näiden sisälle. Hyvin pienellä näytöllä osa sisällöstä saattaa jäädä pois näkyvistä. Kaikki position: fixed; määrittelyt voi muuttaa muotoon position: absolute; jolloin alueet vierittyvät normaalisti.

body {

background: white none; color: black;


/* jätetään ylämarginaalia navigointipalkin tilan verran */


margin-top: 3em;


/* jätetään vasempaan laitaan marginaalia saman verran kuin


laitaan tuleva linkkialue vie */


margin-left: 15%;


padding: 0.5em;


}


.navbar {


border: 1px solid;


background: yellow none; color: black;


text-align: center;


font-weight: bold;


/* Viedään näytöltä tilaa pystysuunnassa yhteensä 3em (2em + 0.5em + 0.5em) */


width: 85%; height: 2em;

padding-top: 0.5em; padding-bottom: 0.5em;

padding-left: 0em; padding-right: 0em;

margin: 0em;

position: fixed;

top: 0%; right: 0%;

}

.leftbar {


border: 1px solid;


background: silver none; color: black;


text-align: center;


font-weight: bold;

width: 15%; height: 100%;

padding-top: 0.5em; padding-bottom: 0.5em;

padding-left: 0em; padding-right: 0em;


margin: 0em;

position: fixed;

top: 3em; left: 0%;

}

.logo {


border: 1px solid;


background: red none; color: black;


text-align: center;


font-weight: bold;

width: 15%; height: 3em;

padding: 0em; margin: 0em;

position: fixed;

top: 0%; left: 0%;

Kuva 19: Kiinnitetyllä asemoinnilla voidaan korvata kehykset.

Tehdään seuraavaksi hieman monimutkaisempi esimerkki. Kaksi vierekkäistä laatikkoa joista vasemmanpuoleisen sisään sijoitetaan muutama sarake tekstiä aikaisemmin opitun float-ominaisuuden avulla. Asemoitu laatikko toimii aivan normaalina sijoituspaikkana mille tahansa muille elementeille tai sijoitteluille. Oikeanpuoleisen laatikon sisään sijoitetaan edelleen kaksi pienempää laatikkoa. Kannattaa huomata, että samalla tyylillä, jolla nämä pienet laatikot sijoitetaan isomman kulmiin, voitaisiin sijoitella elementtejä edelleen näiden sisällä kulmiin tai vaikka koko näkyvän sivun kulmiin. Sijoittelu riippuu täysin siitä minkä sisällä asemoitava elementti sijaitsee. Vasen laatikko asemoidaan absoluuttisesti eli se vierii normaalisti. Oikea laatikko asemoidaan kiinteästi, joten se ei vieri vaan pysyy paikallaan.

body {

background: white none; color: black;


margin: 0; padding: 0;


}


.topleft {


border: 1px solid;


background: yellow none; color: black;

width: 40%; height: 85%;

padding: 1%; margin: 0%;

position: absolute;

top: 3%; left: 3%;

text-align: center;

}


.topright {


border: 1px solid;


background: silver none; color: black;

width: 40%; height: 85%;

padding: 1%; margin: 0%;

position: fixed;

right: 3%; top: 3%;

text-align: center;

}


.bottomleft {


border: 1px solid;


background: green none; color: black;

width: 25%; height: 25%;

padding: 1%; margin: 0%;

bottom: 0%; left: 0%;

position: absolute;

text-align: center;

}


.bottomright {


border: 1px solid;


background: blue none; color: black;

width: 25%; height: 25%;

padding: 1%; margin: 0%;

bottom: 0%; right: 0%;

position: absolute;

text-align: center;

}


.sarakkeet {


margin-top: 1em; margin-bottom: 1em;


border: none;


width: 100%;


}


.oikea {


text-align : justify;


margin : 0;


padding-left : 1%; padding-right : 1%;


border-right: 1px solid; border-left: 1px solid;


width : 30%; height: 90%;


float : left;


}


.keski {


text-align : justify;


margin : 0;


padding-left : 1%; padding-right : 1%;


width : 30%; height: 90%;


float : left;


}


.vasen {


text-align : justify;


margin : 0;


padding-left : 1%; padding-right : 1%;


border-right: 1px solid; border-left: 1px solid;


width : 30%; height: 90%;


float : left;


}

Testaukseen tarvittava xhtml-dokumentti.

<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">


<head>


<link rel="StyleSheet" href="mixed.css" type="text/css" media="screen" />


<title>Absoluuttista ja kiinnitettyä asemointia</title>


</head>


<body>

Vasen laatikko (absolute)

<div class="sarakkeet">

<p>Tämä kappale kuuluu vasempaan sarakkeeseen</p>

<p>Tämä kappale kuuluu vasempaan sarakkeeseen</p>


<p>Tämä kappale kuuluu vasempaan sarakkeeseen</p>


</div>


<div class="keski">


<p>Tämä kappale kuuluu keskimmäiseen sarakkeeseen</p>


<p>Tämä kappale kuuluu keskimmäiseen sarakkeeseen</p>


<p>Tämä kappale kuuluu keskimmäiseen sarakkeeseen</p>


</div>


<div class="oikea">


<p>Tämä kappale kuuluu oikeaan sarakkeeseen</p>


<p>Tämä kappale kuuluu oikeaan sarakkeeseen</p>


<p>Tämä kappale kuuluu oikeaan sarakkeeseen</p>


</div>


</div>

</div>

Oikea laatikko (fixed)

<div class="bottomleft">


Vasen alanurkka


</div>


<div class="bottomright">


Oikea alanurkka


</div>

</div>

</body>

</html>

Kuva 20: Erilaisia asemointitapoja yhdistettyinä.

Elementtien ryhmittely syvyyssuunnassa

Määritellään kolme uutta aliluokkaa joilla voidaan sijoittaa elementtejä eri tasoille syvyyssuunnassa.

body {

background: white none; color: black;


}


.l1 {


position: absolute;


z-index: 1;


top: 5%; left: 5%;


height: 2.5em;


background: transparent none; color: yellow;


font-size: 800%; font-weight: bolder;


font-family: Impact, Verdana, sans-serif;


}


.l3 {


position: absolute;

z-index: 3;

top: 12%; left: 15%;

height: 2.5em;


background: transparent none; color: silver;


font-size: 800%; font-weight: bolder;


font-family: Impact, Verdana, sans-serif;


}


.l5 {


position: absolute;

z-index: 5;

top: 19%; left: 25%;

height: 2.5em;


background: transparent none; color: blue;


font-size: 800%; font-weight: bolder;


font-family: Impact, Verdana, sans-serif;


}

Kokeillaan seuraavalla xhtml-dokumentilla kuinka tekstit sijoittuvat siististi päällekkäin syvyyssuunnassa.

<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">


<head>


<link rel="StyleSheet" href="z.css" type="text/css" media="screen" />


<title>Z-index</title>


</head>


<body>


<div class="l1">z-index: 1 </div>


<div class="l3">z-index: 3 </div>


<div class="l5">z-index: 5 </div>


<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>


<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>


<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>


<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>


<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>


<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>


<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>


<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>


<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>


<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>


<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>


<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>


<p>Tämä on leipätekstiä, jonka pitäisi jäädä kaiken alle</p>


</body>


</html>

Kuva 21: Elementtien asemointi syvyys- eli z-suunnassa.