Css - tyylisivut
Css on tapa määritellä webbisivun ulkoasu. Html-tägit ja css-säännöt määäräävät yhdessä millainen sivusta lopulta tulee. Css-sääntöjä voi liittää mihin tahansa html-tägiin. Esimerkiksi seuraava esimerkki tekee isosta otsikosta 25 pikseliä korkean ja vaihtaa värin punaiseksi.
h1 {
font-size:25px;
color:red;
}
Css:n syntaksi eli kielioppi on yksinkertainen: ensin tulee haluttu html-tägi (eli valitsin), säännöt (eli ominaisuudet) ovat kaarisulkeiden sisällä. Jokainen sääntö päättyy puolipisteeseen.
Sääntöjä on mahdollista myös yhdistellä, esim:
- border on elementin reunus, kaikki kaksoispisteen jälkeen tulevat arvot vaikuttavat koko elementin reunukseen, näitä ovat mm. väri, tyyli ja paksuus. (esim. border:solid black thin;).
- border-color on reunuksen väri, kaksoispsteen jälkeen tulee jokin väri, (esim. border-color:black;)
- border-right vaikuttaa vain oikeanpuoleiseen reunukseen
- border-color-right vaikuttaa luonnollisesti oikeanpuoleisen reunuksen väriin
Seuraavassa on listattu oleellisimmat css-säännöt.
Tausta
Background-ominaisuuden avulla voi muokata minkä tahansa elementin taustaa, esimerkiksi seuraava asettaa taulukon taustaksi kuvan:
table {
background:url(kuva.jpg);
}
| Ominaisuus | Mitä tekee? | Vaihtoehdot |
|---|---|---|
| background | Määrittelee kaikki taustan ominaisuudet. | Kaikki alla olevat |
| background-attachment | Määrittää, onko tausta kiinteä, vai liikkuuko se sivua vieritettäessä. | scroll fixed |
| background-color | Asettaa taustavärin. | värin nimi värin hex-arvo värin rgb-arvo transparent (läpinäkyvä) |
| background-image | Asettaa bittikarttakuvan taustaksi. | url(URL) none |
| background-position | Määrittelee taustan paikan. | top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos |
| background-repeat | Määrittää, toistetaanko taustakuvaa. | repeat repeat-x repeat-y no-repeat |
Tekstin ominaisuudet
Nämä ovat tekstin yleisiä ominaisuuksia, myös fontin määritteet vaikuttavat miltä teksti näyttää.
| Ominaisuus | Mitä tekee? | Vaihtoehdot |
|---|---|---|
| color | Asettaa tekstin värin. | color |
| direction | Muuttaa tekstin suunnan. | ltr rtl |
| line-height | Määrittää rivivälin. | normal number length % |
| letter-spacing | Määrittää kirjasimien välin. | normal length |
| text-align | Kappaleen tasaus. | left right center justify |
| text-decoration | Alleviivaus, yliviivaus | none underline overline |
| text-indent | Sisentää ensimmäisen rivin. | length % |
| text-transform | Muuttaa tekstin KAPITAALIKSI. | none capitalize uppercase lowercase |