Datanomi Leevi Ikonen

Css Parametrit

1.Background color

Määrittää html-elementin taustavärin:

2.Font Family

Määrittää html-elementissä käytettävän fontin:

<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>

3.Font Size

Määrittää html-elementissä käytettävän fontin koon:

<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>

4.Font Color

Määrittää html-elementissä käytettävän fontin värin:

<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>

5.Text Alignment

Määrittää vaakasuoran tekstin linjauksen elementissä:

<h1 style="text-align:center">Center-aligned heading</h1>
<p>This is a paragraph.</p>

6.Font Variant

Voit esimerkiksi muuttaa tekstin jokaisen sanan isoksi kirjaimeksi:

<p style="font-variant:small-caps;">This Text Is Using Small Caps.</p>

7.Background Image

Määrittää kuvan elementin taustalle:

body {
background-image: url('paper.gif');
background-color: #cccccc;

}

8.Background Position

Määrittää kuvan paikan:

body {
    background-image: url('smiley.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

9.Display

Määrittää miten tietyt html-elementit on esitetty:

p.inline {
display: inline;
}

10.Clip

Liittää täysin asemoidun elementin:

img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}

11.Width

Asettaa elementille leveyden:

p.ex {
height: 100px;
width: 100px;
}

12.Clear

Määrittää mille elementin puolelle muut kelluvat elementit eivät ole sallittuja:

img {
float: left;
}

p.clear {
clear: both;
}

13.Height

Määrittää elementin korkeuden:

p.ex {
height: 100px;
width: 100px;
}

14.Float

Määrittää onko elementti kelluva vai ei:

img {
float: right;
}

15.Visibility

Määrittää onko elementti näkyvillä:

h2 {
visibility: hidden;
}

16.Position

Määrittää elementissä käytettävän asettamis menetelmän:

h2 {
    position: absolute;
    left: 100px;
    top: 150px;
}

17.Bottom

Määrittää elementin pohjan aseman:

img {
position: absolute;
bottom: 5px;
}

18.Overflow

Määrittää mitä tapahtuu jos sisältö tulvii elementin laatikon:

div {
    width: 150px;
    height: 150px;
    overflow: scroll;
}

19.Cursor

Määrittää millaista cursoria käytetään:
span.crosshair {
    cursor: crosshair;
}

span.help {
    cursor: help;
}

span.wait {
    cursor: wait;}

20.Resize

Määrittää onko elementti skaalautuva käyttäjälle:

div {
resize: both;
overflow: auto;
}