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

Laatikkomalli

CSS-tyylimäärittelyjen ytimeen kuuluu käsite laatikkomalli (eng. box model). Laatikkomallin avulla voidaan kuvata yksinkertaisesti minkä tahansa esitettävän elementin ja dokumentin ulkoasun perustekijät, sekä hallita sen keskeisiä piirteitä. Laatikkomallin mukaisesti jokaisen elementin rakenne on:

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 aina nk. täyte (padding), jonka oletusarvoinen määrä vaihtelee selain- ja elementtikohtaisesti. Täytteen määrää hallitaan CSS-ominaisuudella padding ja padding-alkuisilla ominaisuuksilla.
Reunus (border): Elementin täytettä ympäröi aina reunus (border), jonka oletusarvoinen määrä vaihtelee selain- ja elementtikohtaisesti . Reunuksen määrää hallitaan CSS-ominaisuudella border ja border-alkuisilla ominaisuuksilla
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.

Kuvana tarkasteltuna yksittäisen elementin rakenne on siis seuraava:

Oletusarvoisesti kaikilla elementeillä on olemassa jokin täyte, jokin reunus ja jokin reunusalue. Oletusarvot määrää UA-laite (esim. web-selain).

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 double;    
}

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

Laatikkomalli

Tallenna tämä sivu kirjanmerkkeihin!