CSS

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.

CSS:n laatikkomalli määrää elementin koon ja tilankäytön

CSS:n laatikkomalli

CSS-tyylimäärittelyjen keskeinen käsite on laatikkomalli (engl. box model). Laatikkomalli kuvaa miten HTML-elementin ulkoasu muodostuu ja miten sitä voidaan hallita. Laatikkomallin mukaan jokaisen "esittävä elementti" koostuu seuraavista osista:

Sisältö (content)
Elementin varsinainen sisältö. Tekstielementeillä tämä on teksti, objekteilla (esim. kuvat) muu resurssi
Täyte (padding)
Elementin sisältöä ympäröi täyte (padding), jonka oletusarvo vaihtelee selain- ja elementtikohtaisesti. Täytteen määrää hallitaan CSS-ominaisuudella padding ja padding-alkuisilla ominaisuuksilla.
Reunus (border)
Elementin täytettä ympäröi reunus (border), jonka oletusarvo vaihtelee selain- ja elementtikohtaisesti. Reunuksen tyyliä ja kokoa hallitaan CSS-ominaisuudella border sekä border-alkuisilla ominaisuuksilla, kuten border-width, border-style ja border-color.
Reunusalue (margin)
Elementin etäisyyden muihin ympäröiviin elementteihin määrittää reunusalue (margin). Reunusalueen määrää hallitaan CSS-ominaisuudella margin ja margin-alkuisilla ominaisuuksilla.

Visuaalisesti HTML-elementtien rakenteen voi esittää siis seuraavalla tavalla:

CSS:n laatikkomalli

Oletusarvoisesti kaikilla visuaalisesti esitettävillä elementeillä on täyte, reunus ja reunusalue. Oletusarvot vaihtelevat selainkohtaisesti.

Esimerkki. Tavallisesta luettelo-elementistä saadaan hyvin yksinkertaisella CSS-tyylimäärittelyllä esim. painikerivistö. 

li.laitamenu { 
  color: black;                 
  width:200px;
  background: gray;            
  margin: 2px; 
  padding: 12px 0px 12px 12px; 
  list-style: none;           
  border: 1px solid black;    
}

Yleisesti asemoinnista

Elementin sijoittumiseen dokumentissa vaikuttavat seuraavat tekijät:

Laatikon tyyppi: ominaisuus display

CSS1-määrittelyssä on kolme laatikkotyyppiä, jotka määrittävät elementin asettelun näytöllä. Laatikkotyyppi määritellään ominaisuudella display, jonka mahdolliset arvot 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. Esimerkiksi luettelolistaus (<ul>) on oletusarvoisesti nk. luettelo-elementti.
none
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 useita uusia laatikkotyyppejä, kuten table ja inherit.

HTML-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.

Seuraavassa esimerkissä div-elementti, jonka ID on "alatunniste", näkyy tulostettaessa, mutta ei näytöllä:



@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. 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).

Seuraavassa esimerkissä div-elementille on asetettu kiinteä leveys. Sisäkkäisille elementeille on määritelty suhteellinen leveys, 80 % divin leveydestä. Ominaisuus margin: auto keskittää sisältöä sisältävän elementin vaakasuunnassa:



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

Jos elementin sisältö ylittää sille annetun koon, ylimenevän osion näkyvyys ja vieritys määritellään overflow-ominaisuudella. Tällöin elementtiin lisätään vierityspalkit vaaka- ja pystysuoraa vieritystä varten (palkkien lukumäärää tai sijaintia ei voi määritellä).

Elementin sijainnin hallinta: ominaisuudet position ja float

Elementin asemointia dokumentissa ohjataan ominaisuuksien position ja float avulla.

Ominaisuuden position avulla määritellään miten elementti sijoitetaan suhteessa muihin elementteihin. Mahdolliset arvot ominaisuudelle position ovat:

absolute
Absoluuttinen asettelumalli. Elementille määritetään kiinteä, absoluuttinen sijainti dokumentissa.
relative
Relatiivinen asettelumalli. Elementin asemointi määrittyy suhteessa elementin normaaliin sijaintiin.
fixed
Kiinteä asettelumalli. Elementille määritetään kiinteä, absoluuttinen sijainti suhteessa nk. viewport-tilaan (vastaa selaimen ikkunaa). Elementti siis pysyy paikallaan vierityksestä huolimatta.
static
Normaali asettelumalli. Elementin asemointi määrittyy muiden elementtien asemoinnin perusteella.

Normaalissa asettelumallissa top-, left-, right- ja bottom-ominaisuuksia ei käytetä, mutta muissa malleissa niillä määritetään elementin sijainti. Ominaisuuden z-index avulla määritellään nk. syvyystaso. Sen avulla elementtejä voidaan sijoittaa mm. limittäin ja/tai päällekkäin kuten läpinäkyviä lasilevyjä.

Seuraavassa esimerkissä dokumentin yläosassa on kiinteästi paikallaan oleva div-elementti (id: yla), jonka korkeus on 80 px. Sen alapuolella sijaitsee sisältö (id: sisalto), jonka sijainti on määritelty absoluuttisesti 80 px yläreunan alapuolelle, eli aivan kelluvan yläosan alapuolelle. Yläosan päällekkäisyyden estämiseksi diville on asetettu korkea z-index-arvo. Lisäksi hyperlinkit on sijoitettu 3 px normaalin rivikorkeuden yläpuolelle. 



...
<title>CSS esimerkki</title>
<style type="text/css" media="screen">
div#yla {
	background-color:#CCFF99; 
	position:fixed;
	height:80px;
	top:0px;
	z-index:9999;
	width:100%;
}
div#sisalto {
	background-color:#CCCCFF;
	position:absolute; 
	top:80px; 
	width:100%;
}
a {
	position:relative; 
	bottom:3px;
}

</style>
</head>

<body>
<div id="yla">...</div> 
<div id="sisalto"> 
  <p><a href="#">Lorem ipsum</a> dolor sit
  <p>Nullam dui. Fusce felis lorem....</p>
  <p>Donec porta. Proin non ....</p>
</div>
</body>
...

Ominaisuuden float-avulla voidaan asettaa elementti kelluvaksi, jolloin teksti virtaa sen ympärillä. Ominaisuuden arvo kertoo kummalle puolelle (oikea, vasen) sisältävää elementtiä valitsimen määrittämän elementin tulisi sijoittua. Kelluvan elementin ympärillä olevat elementit sijoittuvat sen viereen, ellei tätä estetä clear-ominaisuudella.

Float-prosessi

Float-ominaisuus toimii vain, jos valittu elementti noudattaa normaalia, staattista asettelumallia.

Seuraavassa esimerkissä kappaleteksti sijoittuu tiiviisti kuvan ympärille: 

...

<title>CSS esimerkki</title>
<style type="text/css" media="screen">
...
p.kuva {float:left;margin-right:20px;}
...
</style>
</head>

<body>
<div id="sisalto">
  <p>Lorem ipsum dolor sit amet....</p>
  <p class="kuva"><img src="kuva.gif" width="200" height="200" alt="lorem ipsum"/></p>
  <p>Nullam dui. Fusce felis lorem....</p>
  <p>Donec porta. Proin non ....</p>
</div>
</body>
...

Loppusanat

Syvennä osaamistasi nykyaikaisista CSS-käytännöistä, kuten Flexboxista ja CSS Gridistä ilmoittautumalla CSS-kursseillemme. Opit modernin verkkosivuasettelun, responsiivisuuden ja parhaat käytännöt ohjatusti.

Artikkelin tiedot

Otsikko: CSS:n laatikkomalli määrää elementin koon ja tilankäytön

Kuvaus: Opi CSS:n laatikkomallin (box model) perusteet. Ymmärrä, miten näiden laatikoiden ominaisuudet vaikuttavat elementin ulkoasuun ja sijoitteluun.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: