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 tyylimäärittelyt referenssi

Huom! Referenssi kattaa suurimman osan CSS 1 ja CSS 2 määrittelyjen ominaisuuksista, se ei ole täydellinen. Aural-tyylimäärittelyt on eriytetty omaksi kokonaisuudekseen.

NN: Netscape Navigator 6 / Mozilla/Firefox 1.x ja uudemmat
IE: Microsoft Internet Explorer
W3C: W3C:n määrittely, jossa ominaisuus esiintyy ensimmäisen kerran

Taustaan liittyvät ominaisuudet

CSS-ominaisuus	Kuvaus	Mahdolliset arvot	NN	IE	W3C
background	Pikakomento kaikkien taustaan liittyvien ominaisuuksien asettamiseksi yhdellä komennolla	background-color background-image background-repeat background-attachment background-position	6.0	4.0	CSS1
background-attachment	Määrää onko taustakuva kiinteä (fixed) vai vierittyykö se sisällön mukana (scroll)	scroll fixed	6.0	4.0	CSS1
background-color	Määrittää elementin taustavärin	RGB-arvo HEX-arvo Nimetty väri transparent	4.0	4.0	CSS1
background-image	Määrittää elementin taustana käytettävän kuvatiedoston	url none	4.0	4.0	CSS1
background-position	Määrittää kuvan sijainnin (vasen ylänurkka) elementin sisältöön suhteutettuna	top left top center top right center left center center center right bottom left bottom center bottom right x,y (prosentit tai muu arvo kuten pikselit)	6.0	4.0	CSS1
background-repeat	Määrittää kuinka taustakuvaa tulisi toistaa	repeat repeat-x repeat-y no-repeat	4.0	4.0	CSS1

Tekstin esittämiseen liittyvät ominaisuudet

CSS-ominaisuus	Kuvaus	Mahdolliset arvot	NN	IE	W3C
color	Määrittää tekstin värin	RGB-arvo HEX-arvo Nimetty väri transparent	4.0	3.0	CSS1
direction	Määritää kirjoitetun tekstin suunnan	ltr rtl	-	-	CSS2
letter-spacing	Määrittää merkkivälin	normal Pituus-arvo	6.0	4.0	CSS1
text-align	Määrittää tekstin tasauksen suhteessa elementtiin	left right center justify	4.0	4.0	CSS1
text-decoration	Määrää korostuksen tekstiin	blink none line-through overline underline	4.0	4.0	CSS1
text-indent	Määrittää ensimmäisellä rivillä käytettävän sisennyksen (suhteessa elementtiin)	Pituus-arvo %	4.0	4.0	CSS1
text-shadow	Määrittää tekstin heittämän varjon	none RGB-arvo HEX-arvo Nimetty väri transparent Pituus-arvo	-	-	-
text-transform	Määrittää kirjaisinten esitystavan	none capitalize uppercase lowercase	4.0	4.0	CSS1
unicode-bidi	-	normal embed bidi-override	-	5.0	CSS2
white-space	Määrittelee kuinka tyhjiä välilyöntejä kohdellaan	normal pre nowrap	4.0	5.5	CSS1
word-spacing	Määrittelee sanavälin	normal Pituus-arvo	6.0	6.0	CSS1

Kirjaisimiin liittyvät ominaisuudet

CSS-ominaisuus	Kuvaus	Mahdolliset arvot	NN	IE	W3C
font	Pikakomento kaikkien kirjaisimiin liittyvien ominaisuuksien asettamiseksi yhdellä komennolla	font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar	4.0	4.0	CSS1
font-family	Pilkulla eroteltu, priorisoitu luettelo kirjaisimista ja/tai yleisistä kirjaisintyypeistä, joita elementissä tulisi käyttää.	Kirjaisin Kirjaisintyyppi	4.0	3.0	CSS1
font-size	Määrittää elementillä käytettävän kirjaisimen koon	xx-small x-small small medium large x-large xx-large smaller larger Pituus-arvo %	4.0	3.0	CSS1
font-size-adjust	Määrittää missä suhteessa korvaavan fontin x-korkeuden tulisi olla sisältöelementiin	none Numeerinen arvo	-	-	CSS2
font-stretch	Supistaa tai laajentaa nykyistä kirjaisintyyppiä	normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded	-	-	CSS2
font-style	Määrittää kirjaisimen korostustyylin	normal italic oblique	4.0	4.0	CSS1
font-variant	Määrittää kirjaisimeksi joko pienet kapitaalit tai normaalikirjaisimet	normal small-caps	6.0	4.0	CSS1
font-weight	Määrittää kirjaisimen visuaalisen painavuuden	normal bold bolder lighter 100 200 300 400 500 600 700 800 900	4.0	4.0	CSS1

Reunuksiin liittyvät ominaisuudet

CSS-ominaisuus	Kuvaus	Mahdolliset arvot	NN	IE	W3C
border	Pikakomento kaikkien reunuksiin liittyvien ominaisuuksien asettamiseksi yhdellä komennolla	border-width border-style border-color	4.0	4.0	CSS 1
border-bottom	Pikakomento kaikkien alareunuksiin liittyvien ominaisuuksien asettamiseksi yhdellä komennolla	border-bottom-width border-style border-color	6.0	4.0	CSS1
border-bottom-color	Määrittää alasivun reunuksen värin	border-color	6.0	4.0	CSS 2
border-bottom-style	Määrittää alasivun reunuksen tyylin	border-style	6.0	4.0	CSS 2
border-bottom-width	Määrittää alasivun reunuksen leveyden	thin medium thick length	4.0	4.0	CSS 1
border-color	Määrittää kaikkien reunuksien värin (voidaan määrätä myös sivu kerrallaan välilyönnillä eroteltuna)	color	6.0	4.0	CSS 1
border-left	Pikakomento kaikkien vasemmanpuoleisiin reunuksiin liittyvien ominaisuuksien asettamiseksi yhdellä komennolla	border-left-width border-style border-color	6.0	4.0	CSS 1
border-left-color	Määrittää vasemmanpuoleisen reunuksen värin	border-color	6.0	4.0	CSS 2
border-left-style	Määrittää vasemmanpuoleisen reunuksen tyylin	border-style	6.0	4.0	CSS 2
border-left-width	Määrittää vasemmanpuoleisen reunuksen leveyden	thin medium thick length	4.0	4.0	CSS1
border-right	Pikakomento kaikkien oikeanpuoleisiin reunuksiin liittyvien ominaisuuksien asettamiseksi yhdellä komennolla	border-right-width border-style border-color	6.0	4.0	CSS 1
border-right-color	Määrittää oikeanpuoleisen reunuksen värin	border-color	6.0	4.0	CSS 2
border-right-style	Määrittää oikeanpuoleisen reunuksen tyylin	border-style	6.0	4.0	CSS 2
border-right-width	Määrittää oikeanpuoleisen reunuksen leveyden	thin medium thick length	4.0	4.0	CSS1
border-style	Määrittää kaikkien reunusten tyylin, voidaan määrittää myös erikseen joka sivulle (välilyönnillä eroteltuna)	none hidden dotted dashed solid double groove ridge inset outset	6.0	4.0	CSS1
border-top	Pikakomento kaikkien yläsivun reunuksiin liittyvien ominaisuuksien asettamiseksi yhdellä komennolla	border-top-width border-style border-color	6.0	4.0	CSS 1
border-top-color	Määrittää yläsivun reunuksen värin	border-color	6.0	4.0	CSS2
border-top-style	Määrittää yläsivun reunuksen tyylin	border-style	6.0	4.0	CSS2
border-top-width	Määrittää yläsivun reunuksen leveyden	thin medium thick length	4.0	4.0	CSS1
border-width	Määrittää kaikkien reunusten leveyden, voidaan määrittää myös reunuskohtaisesti (välilyönnillä eroteltuna)	thin medium thick length	4.0	4.0	CSS1

Marginaaleihin liittyvät ominaisuudet

CSS-ominaisuus	Kuvaus	Mahdolliset arvot	NN	IE	W3C
margin	Määrittää elementin kaikkien sivujen marginaalin, voidaan määrittää myös erikseen joka sivulle (välilyönnillä eroteltuna)	margin-top margin-right margin-bottom margin-left	4.0	4.0	CSS1
margin-bottom	Määrittää elementin alalaidan marginaalin	auto Pituus-arvo %	4.0	4.0	CSS1
margin-left	Määrittää elementin vasemman laidan marginaalin	auto Pituus-arvo %	4.0	3.0	CSS1
margin-right	Määrittää elementin oikean laidan marginaalin	auto Pituus-arvo %	4.0	3.0	CSS1
margin-top	Määrittää elementin ylälaidan marginaalin	auto Pituus-arvo %	4.0	3.0	CSS1

Täytteisiin liittyvät ominaisuudet

CSS-ominaisuus	Kuvaus	Mahdolliset arvot	NN	IE	W3C
padding	Määrittää elementin kaikkien sivujen täytteen, voidaan määrittää myös erikseen joka sivulle (välilyönnillä eroteltuna)	padding-top padding-right padding-bottom padding-left	4.0	4.0	CSS1
padding-bottom	Määrittää elementin alalaidan täytteen	Pituus-arvo %	4.0	4.0	CSS1
padding-left	Määrittää elementin vasemman laidan täytteen	Pituus-arvo %	4.0	4.0	CSS1
padding-right	Määrittää elementin oikean laidan täytteen	Pituus-arvo %	4.0	4.0	CSS1
padding-top	Määrittää elementin ylälaidan täytteen	Pituus-arvo %	4.0	4.0	CSS1

Luetteloelementteihin liittyvät ominaisuudet

CSS-ominaisuus	Kuvaus	Mahdolliset arvot	NN	IE	W3C
list-style	Pikakomento kaikkien listaelementteihin liittyvien ominaisuuksien asettamiseksi yhdellä komennolla	list-style-type list-style-position list-style-image	6.0	4.0	CSS1
list-style-image	Määrittää listaelementissä käytettävän kuvan	none url	6.0	4.0	CSS1
list-style-position	Määrittää listaelementin sijainnin	inside outside	6.0	4.0	CSS1
list-style-type	Määrittää listaelementin kuvaketyypin	none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha	4.0	4.0	CSS1
marker-offset	Määrittää listaelementin siirtymän suhteessa elementtiin	auto Pituus-arvo			CSS2

Taulukko elementtiin liittyvät ominaisuudet

CSS-ominaisuus	Kuvaus	Mahdolliset arvot	NN	IE	W3C
border-collapse	Määrittää taulukon reunusmalin	collapse separate	-	6.0	CSS2
border-spacing	Määrittää taulukon solujen välisen etäisyyden (vain border-collapse:separate-mallissa)	length length	-	-	CSS2
caption-side	Määrittää mille sivulle taulukon kuvausteksti sijoitetaan	top bottom left right	-	-	CSS2
empty-cells	Määrittää kuinka tyhjien taulukoiden reunat esitetään (vain border-collapse: separete-mallissa)	show hide	6.0	-	CSS2
table-layout	Määrittää kuinka taulukko asemoidaan	auto fixed	-	5.0	CSS2

Esityksen mukauttamisessa tarvittavat ominaisuudet

CSS-ominaisuus	Kuvaus	Mahdolliset arvot	NN	IE	W3C
clear	Määrittää elementin sivut, joilla ei sallita muita kelluvia elementtejä	left right both none	4.0	4.0	CSS1
cursor	Määrittää näytettävän kursorin	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help	6.0	4.0	CSS2
display	Määrittää kuinka / jos elementti esitetään (arvolla none elementin varaamaa tilaa ei näytetä)	none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption	4.0	4.0	CSS1
float	Määrittää sijainnin, jossa kuva tai teksti ilmestyy elementin viereen (käytetään yleensä yhdessä clear-ominaisuuden kanssa)	left right none	4.0	4.0	CSS1
position	Sijoittaa elementin staattiseen, suhteellisen, absoluuttiseen tai kiinteään sijaintiin näyttöalueella	static relative absolute fixed	4.0	4.0	CSS2
visibility	Määrittää elementin näkyvyyden (elementti vie yhä sille varatun tilan)	visible hidden collapse	6.0	4.0	CSS2

Asemointiin liittyvät ominaisuudet

CSS-ominaisuus	Kuvaus	Mahdolliset arvot	NN	IE	W3C
bottom	Määrittä kuinka kaukana elementin alareuna on isäntäelementin alareunasta (myös negatiiviset arvot)	auto % Pituus-arvo	6.0	5.0	CSS2
clip	Määrittää elementin muodon. Elementti "leikataan" kyseiseen esitysmuotoon	shape auto	6.0	4.0	CSS2
left	Määrittää kuinka kaukana elementin vasen reuna on isäntäelementin vasemmasta reunasta (myös negatiiviset arvot)	auto % Pituus-arvo	4.0	4.0	CSS2
overflow	Määrittää kuinka elementin sisältöä tulisi kohdella, jos se ei mahdu sille varattuun tilaan	visible hidden scroll auto	6.0	4.0	CSS2
right	Määrittää kuinka kaukana elementin oikea reuna on isäntäelementin oikeasta reunasta (myös negatiiviset arvot)	auto % Pituus-arvo	-	5.0	CSS2
top	Määrittää kuinka kaukana elementin yläreuna on isäntäelementin yläreunasta (myös negatiiviset arvot)	auto % Pituus-arvo	4.0	4.0	CSS2
vertical-align	Määritää elementin vertikaalisen tasauksen	baseline sub super top text-top middle bottom text-bottom length %	4.0	4.0	CSS1
z-index	Määrittää elementin sijainnin tasona	auto Numero-arvo	6.0	4.0	CSS2

Mittasuhteiden määrittämiseen liittyvät ominaisuudet

CSS-ominaisuus	Kuvaus	Mahdolliset arvot	NN	IE	W3C
height	Määrittää elementin korkeuden	auto length %	6.0	4.0	CSS1
line-height	Määrittää rivikorkeuden	normal Numero-arvo Pituus-arvo %	4.0	4.0	CSS1
max-height	Määrittää elementin maksimikorkeuden	none length %	-	-	CSS2
max-width	Määrittää elementin maksimileveyden	none Pituus-arvo %	-	-	CSS2
min-height	Määrittää elementin minimikorkeuden	Pituus-arvo %	-	-	CSS2
min-width	Määrittää elementin minimileveyden	Pituus-arvo %	-	-	CSS2
width	Määrittää elementin leveyden	auto % Pituus-arvo	4.0	4.0	CSS1

Ääriviivoihin liittyvät ominaisuudet

CSS-ominaisuus	Kuvaus	Mahdolliset arvot	NN	IE	W3C
outline	Pikakomento elementin kaikkien sivujen ääriviivojen asettamiseksi yhdellä komennolla	outline-color outline-style outline-width	-	-	CSS2
outline-color	Määrittää elementin ääriviivan värin	color invert	-	-	CSS2
outline-style	Määrittää elementin ääriviivan visuaalisen tyylin	none dotted dashed solid double groove ridge inset outset	-	-	CSS2
outline-width	Määrittää elementin ääriviivan leveyden	thin medium thick length	-	-	CSS2