Päivitetty: 18.01.2003.

Color&Background

<< Ominaisuudet

color esimerkki

Avainsana 'Keyword' Tulos
p { Color: Red }

Red

p { Color: Green }

Green

p { Color: Blue }

Blue

Perinteinen Hex-muoto:  
p { Color: #FF6633 }

Vaaleanpunainen

p { Color: #00FF33 }

Kirkkaanvihreä

p { Color: #330099 }

Tummansininen

RGB-muoto:  
p { Color: rgb(102,51,0) }

Ruskea

p { Color: rgb(153,204,255) }

Vaaleansininen

RGB prosentteina:  
p {Color: rgb(100%,80%,60%) }

Oranssi

p {Color: rgb(60%,40%,20%) }

Vaaleanruskea

<< Alkuun

background-color esimerkki

CSS määrittely
body { background-color: Honeydew }
h4{ background-color: Beige }

p { background-color: transparent } /* Oletus */
em{ background-color: Lightsalmon }
Tulos:

Tässä P-kappale, jonka taustaväri on läpinäkyvä, joten se näyttää samalta kun body-elementin väri. Kun käytetään EM -elementtiä näkyy sillä oma taustaväri.

H4 otsikko EM-elementti H4 jatkuu

P jatkuu...

<<Alkuun

background-image esimerkki

CSS määrittely
body { background-image: url(pilvi1.jpg) }
p { background-image: none}
/* Oletus */
h4 { background-color: url(pilvi2.jpg)}
Tulos:

<BODY>
<P>......................</P>

H4 otsikko
jolla hieman
synkempi ilme.
.....

<P>jatkuu....</P>
.

<<Alkuun

background-repeat esimerkki

CSS määrittely
body { background-image: url(pilvi1.jpg)} +
background-repeat: repeat
 
background-repeat: repeat-x
 
background-repeat: repeat-y
 
background-repeat: no-repeat
 

<<Alkuun

background-attachment esimerkki

CSS määrittely
background-image: url(pilvi1.jpg);
background-repeat: repeat-x;
background-attachment:
fixed scroll
>> Katso esimerkki! >> Katso esimerkki!

(Jos esimerkit eivät näy selaimessasi, niin katso ne yllä olevista linkeistä. Huomaa, että NN 4.x selain ei osaa kiinnittää taustakuvaa)

<<Alkuun

background-position esimerkki

CSS määrittely
background-image: url(pilvi3.jpg);
background-repeat: no-repeat;
+

background-position: left top

background-position: right bottom

background-position: center center

<<Alkuun

background esimerkki

Esim1 CSS määrittely:
background-color: #CCCCCC;
background-image: url(pilvi3.gif);
background-repeat: repeat-x;
background-position: 50%
Esim1 pikakirjoitteena:
background:
#CCCCCC url(pilvi2.jpg) repeat-x 50%
Esim1 tulos:
 
Esim2 CSS määrittely:
background-color: #9CF;
background-image: url(pilvi3.gif);
background-repeat: no-repeat;
background-position: 50% bottom
Esim2 pikakirjoitteena:
background:
#99CCFF url(pilvi3.gif) no-repeat center bottom
Esim2 tulos:
 

<<Alkuun

© Petteri Perälä 2001-2003.
E-mail: [ petepe@mbnet.fi ]