Viikko 5

2016-02-08T21:41:58+02:00

CSS-tyylien määrittäminen

Perusperiaate on muuttaa olemassa olevien XHTML-elementtien ominaisuuksia. Oletuksena tyylin nimi on siis sama kuin sen XHTML elementin nimi, jonka ulkoasuominaisuuksia halutaan muokata. Jokaisella muutettavalla ominaisuudella on tietty nimi.

Esim. määritellään body-elementin tekstin väriksi musta ja taustaväriksi valkoinen, kirjoittamalla kyseinen teksti tyylit.css tiedostoon:

body {
color: black;
background-color: white;
}

Esim2. Määritellään kaikille otsikkotasoille sama fontti ja väri:

h1, h2, h3, h4, h5, h6 {
font-family: Verdana, sans-serif;
color: blue;
}

Mittayksiköt

Pituudet ja korkeudet kannattaa aina ilmaista suhteellisesti prosentteina tai em-yksikköinä. em suhteutetaan aina oletusfontin kokoon. Tämä kirjoitetaan jälleen tyylit.css tiedostoon, esimerkiksi:

p {
font-size: 120%;
}

h1 {
margin-top: 1em;
}

Sivuilla käytettävät värit

Värien määrittämisessä on käytössä useita tapoja. Perusvärit voidaan kirjoittaa suoraan nimillä tai värit voi määrittää RGB-arvoilla. Esimerkiksi:

p {
background-color: blue;
}

p {
background-color: #FF0000;
}

RGB-arvoja voi katsoa esimerkiksi sivulta http://colorschemedesigner.com/

Harjoitus

2017-09-13T17:14:33+03:00

1. Jatketaan samaa harjoitusta kuin viime tunnilla. Avaa XHTML-kansio.

2. Luo XHTML-kansioosi tyylit.css tiedosto.

3. Muuta css-tiedoston bodyn taustaväriksi RGB arvo #AA7D39 ja tekstin väriksi musta.

4. Kirjoita body-elementtiin (css-koodiin) font-family-ominaisuudeksi (tekstin fontti) verdana

5. Määritetään sivun marginaalit body-elementtiin seuraavasti:

margin-left: 5%;
margin-right: 5%;
margin-top: 1%;
margin-bottom: 1%;

6. Lisää body-elementtiin myös rivivälimääritys: line-height: 150%

7. Määritä otsikon (h1) marginaaleiksi seuraavat (tyylit.css tiedostoon)

margin-left: 1em;
margin-right: 1em;
margin-top: 1.5em;
margin-bottom: 1.5em;

8. Tallenna tekstitiedosto ja tarkastele sitä Internet-selaimessa.

Harjoitus 5

Viikko 5

Harjoitus