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

Huom! Referenssi kattaa suurimman osan CSS 1 ja CSS 2 määrittelyjen ominaisuuksista, se ei ole täydellinen.

W3C: W3C:n määrittely, jossa ominaisuus esiintyy ensimmäisen kerran

Taustaan liittyvät ominaisuudet

CSS-ominaisuus Kuvaus Mahdolliset arvot W3C
background Pikakomento kaikkien taustaan liittyvien ominaisuuksien asettamiseksi yhdellä komennolla background-color
background-image
background-repeat
background-attachment
background-position 		CSS1
background-attachment Määrää onko taustakuva kiinteä (fixed) vai vierittyykö se sisällön mukana (scroll) scroll
fixed		 CSS1
background-color Määrittää elementin taustavärin RGB-arvo
HEX-arvo
Nimetty väri
transparent 		CSS1
background-image Määrittää elementin taustana käytettävän kuvatiedoston url
none		 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)		 CSS1
background-repeat Määrittää kuinka taustakuvaa tulisi toistaa repeat
repeat-x
repeat-y
no-repeat		 CSS1

Tekstin esittämiseen liittyvät ominaisuudet

CSS-ominaisuus Kuvaus Mahdolliset arvot W3C
color Määrittää tekstin värin RGB-arvo
HEX-arvo
Nimetty väri
transparent		 CSS1
direction Määritää kirjoitetun tekstin suunnan ltr
rtl		 CSS2
letter-spacing Määrittää merkkivälin normal
Pituus-arvo		 CSS1
text-align Määrittää tekstin tasauksen suhteessa elementtiin left
right
center
justify		 CSS1
text-decoration Määrää korostuksen tekstiin blink
none
line-through
overline
underline 		CSS1
text-indent Määrittää ensimmäisellä rivillä käytettävän sisennyksen (suhteessa elementtiin) Pituus-arvo
% 		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		 CSS1
unicode-bidi - normal
embed
bidi-override		 CSS2
white-space Määrittelee kuinka tyhjiä välilyöntejä kohdellaan normal
pre
nowrap		 CSS1
word-spacing Määrittelee sanavälin normal
Pituus-arvo 		CSS1

Kirjaisimiin liittyvät ominaisuudet

CSS-ominaisuus Kuvaus Mahdolliset arvot 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		 CSS1
font-family Pilkulla eroteltu, priorisoitu luettelo kirjaisimista ja/tai yleisistä kirjaisintyypeistä, joita elementissä tulisi käyttää. Kirjaisin
Kirjaisintyyppi 		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
% 		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 		CSS1
font-variant Määrittää kirjaisimeksi joko pienet kapitaalit tai normaalikirjaisimet normal
small-caps		 CSS1
font-weight Määrittää kirjaisimen visuaalisen painavuuden normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900 		CSS1

Reunuksiin liittyvät ominaisuudet

CSS-ominaisuus Kuvaus Mahdolliset arvot W3C
border Pikakomento kaikkien reunuksiin liittyvien ominaisuuksien asettamiseksi yhdellä komennolla border-width
border-style
border-color		 CSS 1
border-bottom Pikakomento kaikkien alareunuksiin liittyvien ominaisuuksien asettamiseksi yhdellä komennolla border-bottom-width
border-style
border-color		 CSS1
border-bottom-color Määrittää alasivun reunuksen värin border-color CSS 2
border-bottom-style Määrittää alasivun reunuksen tyylin border-style CSS 2
border-bottom-width Määrittää alasivun reunuksen leveyden thin
medium
thick
length		 CSS 1
border-color Määrittää kaikkien reunuksien värin (voidaan määrätä myös sivu kerrallaan välilyönnillä eroteltuna) color CSS 1
border-left Pikakomento kaikkien vasemmanpuoleisiin reunuksiin liittyvien ominaisuuksien asettamiseksi yhdellä komennolla border-left-width
border-style
border-color		 CSS 1
border-left-color Määrittää vasemmanpuoleisen reunuksen värin border-color CSS 2
border-left-style Määrittää vasemmanpuoleisen reunuksen tyylin border-style CSS 2
border-left-width Määrittää vasemmanpuoleisen reunuksen leveyden thin
medium
thick
length		 CSS1
border-right Pikakomento kaikkien oikeanpuoleisiin reunuksiin liittyvien ominaisuuksien asettamiseksi yhdellä komennolla border-right-width
border-style
border-color		 CSS 1
border-right-color Määrittää oikeanpuoleisen reunuksen värin border-color CSS 2
border-right-style Määrittää oikeanpuoleisen reunuksen tyylin border-style CSS 2
border-right-width Määrittää oikeanpuoleisen reunuksen leveyden thin
medium
thick
length		 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		 CSS1
border-top Pikakomento kaikkien yläsivun reunuksiin liittyvien ominaisuuksien asettamiseksi yhdellä komennolla border-top-width
border-style
border-color		 CSS 1
border-top-color Määrittää yläsivun reunuksen värin border-color CSS2
border-top-style Määrittää yläsivun reunuksen tyylin border-style CSS2
border-top-width Määrittää yläsivun reunuksen leveyden thin
medium
thick
length		 CSS1
border-width Määrittää kaikkien reunusten leveyden, voidaan määrittää myös reunuskohtaisesti (välilyönnillä eroteltuna) thin
medium
thick
length		 CSS1

Marginaaleihin liittyvät ominaisuudet

CSS-ominaisuus Kuvaus Mahdolliset arvot 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		 CSS1
margin-bottom Määrittää elementin alalaidan marginaalin auto
Pituus-arvo
% 		CSS1
margin-left Määrittää elementin vasemman laidan marginaalin auto
Pituus-arvo
% 		CSS1
margin-right Määrittää elementin oikean laidan marginaalin auto
Pituus-arvo
% 		CSS1
margin-top Määrittää elementin ylälaidan marginaalin auto
Pituus-arvo
% 		CSS1

Täytteisiin liittyvät ominaisuudet

CSS-ominaisuus Kuvaus Mahdolliset arvot 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		 CSS1
padding-bottom Määrittää elementin alalaidan täytteen Pituus-arvo
% 		CSS1
padding-left Määrittää elementin vasemman laidan täytteen Pituus-arvo
%		 CSS1
padding-right Määrittää elementin oikean laidan täytteen Pituus-arvo
%		 CSS1
padding-top Määrittää elementin ylälaidan täytteen Pituus-arvo
%		 CSS1

Luetteloelementteihin liittyvät ominaisuudet

CSS-ominaisuus Kuvaus Mahdolliset arvot W3C
list-style Pikakomento kaikkien listaelementteihin liittyvien ominaisuuksien asettamiseksi yhdellä komennolla list-style-type
list-style-position
list-style-image		 CSS1
list-style-image Määrittää listaelementissä käytettävän kuvan none
url		 CSS1
list-style-position Määrittää listaelementin sijainnin inside
outside		 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 		 CSS1
marker-offset Määrittää listaelementin siirtymän suhteessa elementtiin auto
Pituus-arvo		 CSS2

Taulukko elementtiin liittyvät ominaisuudet

CSS-ominaisuus Kuvaus Mahdolliset arvot W3C
border-collapse Määrittää taulukon reunusmalin collapse
separate		 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		 CSS2
table-layout Määrittää kuinka taulukko asemoidaan auto
fixed		 CSS2

Esityksen mukauttamisessa tarvittavat ominaisuudet

CSS-ominaisuus Kuvaus Mahdolliset arvot W3C
clear Määrittää elementin sivut, joilla ei sallita muita kelluvia elementtejä left
right
both
none		 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		 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		 CSS1
float Määrittää sijainnin, jossa kuva tai teksti ilmestyy elementin viereen (käytetään yleensä yhdessä clear-ominaisuuden kanssa) left
right
none		 CSS1
position Sijoittaa elementin staattiseen, suhteellisen, absoluuttiseen tai kiinteään sijaintiin näyttöalueella static
relative
absolute
fixed		 CSS2
visibility Määrittää elementin näkyvyyden (elementti vie yhä sille varatun tilan) visible
hidden
collapse		 CSS2

Asemointiin liittyvät ominaisuudet

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

Mittasuhteiden määrittämiseen liittyvät ominaisuudet

CSS-ominaisuus Kuvaus Mahdolliset arvot W3C
height Määrittää elementin korkeuden auto
length
%		 CSS1
line-height Määrittää rivikorkeuden normal
Numero-arvo
Pituus-arvo %		 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 		CSS1

Ääriviivoihin liittyvät ominaisuudet

CSS-ominaisuus Kuvaus Mahdolliset arvot 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

 

Artikkelin tiedot

Otsikko: CSS-tyylimäärittelyjen referenssi

Kuvaus: CSS-referenssi listaa yleisimmät CSS 1 ja CSS 2 -ominaisuudet. Hyödynnä sitä koodauksen tukena ja nopeuta työtäsi.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: