css parametrit

Mielestäni 20 tärkeintä css parametria

color:

Asettaa tekstille jonkin tietyn värin

p { color: rgb(0,255,0);}

Text-align:

Linjaa tekstin haluttuun kohtaan

h1  { text-align: left; }

font-size:

Määrittää fontin koon

h1 { font-size: 100%; }

font-family:

Määrittää käytettävän fontin

p  { font-family: "Arial", "Times new roman"; }

width:

Määrittää elementin leveyden

height:

Määrittää elementin korkeuden

p.ex  { height: 125px;

            width: 100px; }

background-color:

Määrittää taustan värin

p  { background-color: rgb (255,0,0); }

background-image: 

Asettaa kuvan taustakuvaksi

body  { background-image: url("kuva.jpg"); }

position:

Kertoo elementin sijainnin

h2 { position: absolute;

        left: 150px;

        top: 50px; }

left:

Kertoo sijoitetun elementin sijainnin vasemmalta

div.absolute {position: absolute;
                      left: 50px;
                      width: 100px;
                      height: 10px;
                      border: 3px solid #8AC007; }

right:

Kertoo sijoitetun elementin sijainnin oikealta

div.absolute { position: absolute;
                       right: 250px;
                       width: 300px;
                       height: 10px;
                       border: 3px solid #8AC007 }

top:

Kertoo sijoitetun elementin sijainnin ylhäältä

div.absolute { position: absolute;

                       top: 10px;

                       width: 400px;
                       height: 50px;
                       border: 3px solid #8AC007; }  

bottom:

Kertoo sijoitetun elementin sijainnin alhaalta

div.absolute { position: absolute;
                       bottom: 20px;
                       width: 10px;
                       height: 50px;
                       border: 3px solid #8AC007; }

border:

Kertoo reunojen tyylin

p { border: 5px solid green; }

cursor:

Määrittää näytettävän kursorin

span.crosshair { cursor: crosshair; }

span.grab { cursor: grab; }

span.progress { cursor: progress; }

text-overflow:

Määrittää tavan, jolla teksti joka ei mahdu johonkin elementtiin näytetään

div { text-overflow: ellipsis; }

direction

Määrittää tekstin kirjoitus suunnan

div { direction: rtl; }

font-weight

Määrittää tekstin leveyden

p.normaali { font-weight: normal; }



column-count

Määrittää moneenko sarakkeeseen teksti pitää jakaa

div { -webkit-column-count: 2;  /* chrome}



column-gap

Määrittää sarakkeiden välin leveyden

div { -webkit-column-count: 2; /* chrome
         column-gap: 30px }