CSS-parametrit

MYÖHÄINEN TEHTÄVÄNPALAUTUS
"CSS-PARAMETRIT"

Luettele 20 CSS-parametriä ja luo esimerkki.

1. "background-color"
Muuttaa sivun taustan valittuun väriin

body {
background-color: #000000;
}

2. "font-family"
Valitsee valitulle kategorialle fonttityypin

p {
font-family: Arial,Helvetica,sans-serif;
}

3. "font-size"
Antaa fontille valitun koon

p {
font-size: 125%;
}

4. "font-style"
Määrittää fontin tyylin

p {
font-style: normal;
}

5. "background-image"
Asettaa kuvan sivun taustalle

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

6. "width"
Määrittää elementin leveyden

p {
width: 120px;
}

7. "height"
Määrittää elementin korkeuden

p {
height: 80px;
}

8. "visibility"
Määrittää elementin läpinäkyvyyden

h1 {
visibility: hidden;
}

9. "cursor"
Määrittää näkyvän kursorin

span.crosshair {
cursor: crosshair;
}

10. "resize"
Määrittää mahdollisuuden muuttaa elementin kokoa

div {
resize: both;
}

11. "background"
Määrittää sivun taustan ominaisuudet

body {
background: #00ff00 url("image.png") no-repeat fixed center;
}

12. "background-size"
Määrittää taustakuvan koon

body {
background-size: 120px 156px;
}

13. "background-position"
Määrittää taustakuvan sijainnin

body {
background-position: center;
}

14. "background-repeat"
Määrittää taustakuvan toistojen määrän

body {
background-repeat: repeat-x;
}

15. "display"
Määrittää tietyn HTML-elementin näkyvyyden

p {
display: inline;
}

16. "color"
Määrittää värin

body {
color: red;
}

17. "opacity"
Määrittää läpinäkymättömyyden

div {
opacity: 0.75;
}

18. "border"
Määrittää reunuksen paksuuden, viivatyylin ja värin

p {
border: 5px solid red;
}

19. "float"
Määrittää elementin kellumaan tai ei

img {
float: center;
}

20. "padding"
Määrittää esim. tekstin etäisyyden taulukon reunasta

p {
padding: 4px 5px 2 px 8px;
}

(Ylempi etäisyys on 4 pikseliä, oikea etäisyys 5 pikseliä, alempi etäisyys 2 pikseliä ja vasen etäisyys 8 pikseliä)