Datanomi koulutukseni T16DT: CSS parametrit

1* font

*font-style
*font-variant
*font-weight
*font-size
*line-height
*font-family

Määrittää fontin käyttötavat ovat
Suositeltavaa on laittaa eri alustojen saman tyyppinen fontti.

Esim: <body> {font: italic small-caps bold 20px/1.5 "Proxima Nova", (Fonttien nimet tähän);}

2* width/height

Tällä asetetaan HTML elementin ottaman tilan sivulta

* px - pikseli
* em - yksikkö ilmaisee 1 em= nykyinen fonttikoko
* rem - root(juuri/ydin)em. Sama kuin em mutta on ongelmattomampi
* % - Prosenttiosuus (joustava laitteen mukaan)
* auto - Säätää automaattisesti elementin kokoa suhteessa tilan määrään

Esim: img {
max-width: 100%;
height: auto;
}

3* margin ja padding

Määrittää tilan elementtien välissä
margin: määrittää tilan elementin ulkoreunoilla
padding: määrittää tilan elementin sisällä

Esim:
div{
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 10px;
    margin-left: 10px
}

4* border

Toinen tapa määrittää elementin koko ja tähän on lisäksi helppo määrittää tyyli ja väri

Esim:

div{
border: 1px solid black;
/* rajan leveys, tyyli ja väri*/
}

5* float

Tällä voidaan laittaa elementtejä päällekkäin tai kiinni toisiinsa

Tässä eniten käytetyt ominaisuudet: left, right ja none.

6* color

Määrittää tekstin tai rajan värin #hex tai rgb lukuna.

7* background

Tämä viittaa HTML elementin/sivun taustaan.
background-color: väri hex tai rgb.
background-image: kuvan url.
background-repeat: toistaa taustaa jos tarvitaan.
background-position: määrittää taustan tarkemman sijainnin säädön muodossa x-y x=vasemmalta ja y=ylhäältä.

8* block

sisältyy <div>,<ul> ja <p> ottaa niin paljon tilaa kuin se pystyy (ellei määritetty)
käytetään sivujen pohjissa

9* position

Määrittää sijainnin ja sen tyypin kohteelle

Tyypit: static|absolute|fixed|relative|initial|inherit;

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

10* direction

Määrittää tekstin kirjoitus-suunnan

Esim: div {
direction: rtl;
/* asettaa tekstin oikealta vasempaan */
}

11* @keyframes

Määrittää animaatiokoodin eli laittaa selainelementin liikkumaan määritetysti.

Esim: /* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    0%   {top: 0px;}
    25% {top: 200px;}
    50% {top: 100px;}
    75% {top: 200px;}
    100% {top: 0px;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {top: 0px;}
    25% {top: 200px;}
    50% {top: 100px;}
    75% {top: 200px;}
    100% {top: 0px;}
}

12* backface-visibility

Määrittää näkyykö pyörivän elementin takaosa

Esim: div {
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
Esimerkki käytännössä: http://www.w3schools.com/cssreF/trycss3_backface_inuse.htm

13* transform

Antaa mahdollisuuden pyörittää, skaalata, jne elementtejä 2D, 3D

Esim: div {
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
}
Esimerkki käytännössä: http://www.w3schools.com/cssreF/trycss3_transform_inuse.htm

14* box-sizing

Kertoo selaimelle, mitä koon määritys ominaisuuksia käyttää (sisältyen korkeuden ja leveyden sekä vaihtoehdon: border-box vaiko content-box)
Esim:
div {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;}

15* cursor

Määrittää osoittimen(cursor) ulkonäön kun osoitetaan jotain elementtiä.

Esim:
span.crosshair {
    cursor: crosshair;}

span.help {
    cursor: help;}

span.wait {
    cursor: wait;}

16* resize

Määrittää voiko käyttäjä säätää elementin kokoa

Esim: div {
resize: both;
overflow: auto;}

17* transition

Muuttaa elementin kokoa kun tietty ehto täyttyy.

Esim: div {
    width: 100px;
    -webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
    transition: width 2s;}

div:hover {
    width: 300px;}

18* overflow

Määrittää mitä tapahtuu jos sisältö tulee elementin yli.

Esim: div {

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

19* flex

Määrittää esineen pituuden verrannollisena muihin

Esim:

#main div {

    -webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */
    flex: 1;}

20* tab-size

Määrittää tab elementin koon