CSS-opas

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2008!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

CSS:n laatikkomalli ja asemointi

Yleisesti asemoinnista

Elementin sijoittumista dokumenttiin hallitsevat seuraavat tekijät:

Laatikon koko ja tyyppi
Asettelumalli (normaali, kelluva tai absoluuttinen)
Suhteet muihin dokumenttipuun elementteihin
Ulkoinen tieto (esimerkiksi katselualueen koko).

Laatikon tyyppi ja ominaisuus display

CSS1 määrittelee kolme laatikkotyyppiä, jotka määrittävät miten elementti asemoituu näytöllä. Laatikkotyyppi määritellään ominaisuudella display, jonka mahdollisia arvoja ovat:

block: Nk. lohkoelementti. Elementtiä edeltää ja seuraa aina rivinvaihto. Esim. kappale (<p>) on oletusarvoisesti nk. lohkoelementti
inline: Nk. rivinsisäinen elementti. Elementtiä ei edellä eikä seuraa rivinvaihto. Esim. linkki (<a>) on oletusarvoisesti nk. rivinsisäinen elementti.
list-item: Nk. luettelo-elementti. Elementti käyttäytyy kuten listaus. Esim. luettelolista (<ul>) on oletusarvoisesti nk. luettelo-elementti.
none: Elementillä ei ole tyyppiä. Elementtiä ei esitetä ollenkaan ja se ei vaikuta millään muotoa dokumentin asetteluun. Jos elementti halutaan ainoastaan piilottaa, tulisi käyttää ominaisuutta "visibility: hidden".

CSS2-määrittelyssä esitellään lukuisia uusia laatikkotyyppejä, kuten taulukko (table) ja periytyminen (inherit).

HTML / XHTML -kielessä useilla elementeillä on määrätyt oletusarvot, jotka selain tunnistaa ja ottaa käyttöön automaattisesti. Jos CSS-tyylimäärittelyjä käyttää XML-dokumentissa, täytyy laatikkotyyppi aina määritellä itse.

Esimerkki. Alla olevassa esimerkissä ID-arvolla "alatunniste" varustettu div-elementti esitetään tulosteessa, mutta sen sijaan näytöllä tapahtuvassa esityksessä sitä ei esitetä.

@media screen {
  div#alatunniste {
    display:none;
  }
}

@media print {
  div#alatunniste { 
    display:block;
  }
}

Laatikon koko - ominaisuudet width ja height

Laatikon leveys määritellään ominaisuudella width. Ominaisuus määrittää laatikkomallin sisällön leveyden. Jos ominaisuuden arvo on auto, käytetään sisältävän elementin (tai juurielementin tapauksessa selainikkunan) leveyttä.

Laatikon korkeus määritellään ominaisuudella height. Jos ominaisuuden arvo on auto, käytetään elementin varsinaista korkeutta.

Suhteellisia mittayksiköitä käytettäessä, elementin laatikon koko lasketaan aina suhteessa nk. sisältävään lohkoon (containing block).

CSS 2 antaa lisäksi mahdollisuuden määritellä minimi- ja maksimileveys (ominaisuudet: min-width,min-height,max-width,max-height). Nämä ominaisuudet toimivat kuitenkin vain osalla selaimista (IE7, Opera, Firefox ja Safari mutta ei IE 5.x ja IE 6.x).

Esimerkki. Div-elementille on määritelty kiinteä leveys. Elementeille on sen sijaan määritelty suhteellinen 80% leveys, eli jos ne ovat div-elementin sisällä, käyttävät ne 80% sen leveydestä. Ominaisuus margin:auto keskittää sisällön sisältävän elementin keskelle.

div#sisalto {
  width:500px;
}
h1,p {
  width:75%;
  margin:auto
}

Tarvittaessa laatikon sisältö voi laajeta ominaisuuden overflow avulla sille annetun koon ulkopuolelle. Tällöin siihen lisätään aina vierityspalkit vaaka- ja pystysuoraa vieritystä varten (palkkien lukumäärää tai sijaintia ei voi määritellä).

Tutustu artikkelin muihin osiin:
»»» CSS »»»CSS:n laatikkomalli
»»» CSS »»»Elementin asemointi CSS:n avulla - ominaisuudet display, width ja height
»»» CSS »»»Elementin asemointi CSS:n avulla - ominaisuudet position ja float

CSS-opas

CSS:n laatikkomalli ja asemointi

Yleisesti asemoinnista

Laatikon tyyppi ja ominaisuus display

Laatikon koko - ominaisuudet width ja height

Tallenna tämä sivu kirjanmerkkeihin!