CSS-tyylit 2008-01-01 02:33

CSS-tyyleillä voidaan helposti hallita koko sivuston tyylimuotoiluja. Tyylimuotoilut kohdistetaan sivujen rakenteen muokkaamiseksi käytetyn html-kielen elementteihin, ja sivut ohjelmoidaan etsimään kullekin html-elementille haluttu tyyli erillisestä css-tiedostosta. Esimerkiksi:

• body: Pelkkää body-elementtiä muuttamalla voit vaikuttaa paljon sivuston kokonaisulkoasuun. Elementissä voit määrittää mm. oletusfontin, fonttikoon, taustavärin, taustakuvan, reunukset, jne...
• p: Normaalit leipätekstikappaleeet.
• h1-h6: Otsikot.
• ul ja ol: Luettelomerkkilista ja numeroitu luettelo.

Koska kurssilla käyttämämme FrontPage 2000:n tuki CSS-tyyleille on varsin puutteellinen, perehdymme CSS-tyyleihin varsin yleisellä tasolla. CSS-tyyleistä enemmän XHTML/CSS-oppaassa.

Erillisen tyylitiedoston tekeminen

1. Valitse Tiedosto | Uusi | Sivu , ja avautuvan ikkunan Tyylisivut-välilehdeltä Normaali tyylisivu.
2. Tyylit määritellään tyhjään tyylitiedostoon Tyyli-työkaluriviltä. (Vastaa toimintoa Muotoile | Tyyli.)
3. Tee haluamasi tyylimuotoilut. Esimerkkejä alla.
4. Tallenna tiedosto nimellä tyyli.css.

Tehty tyylitiedosto on vielä linkitettävä sivustolla käytettyihin sivuihin, jotta muutokset astuvat voimaan. 

1. Avaa index.htm -tiedosto.
2. Valitse Muotoile | Tyylisivun linkit. 
3. Valitse Kaikki sivut, saadaksesi tyylit käyttöön koko sivustolle. Napsauta Lisää. 
4. Valitse juuri luomasi tyyli.css -tiedosto, ja paina kaksi kertaa OK.
5. Kaikkien sivustojesi sivujen ulkoasua voit jatkossa muokata tyyli.css -tiedostoa muokkaamalla!

Fontin muuttaminen CSS-tyyliä käyttäen

Koko sivuston oletusfontin vaihtaminen

1. Avaa sivustolla käytetty css-tyylitiedosto.
2. Valitse Muotoile | Tyyli.
3. Valitse Luettelo-valikossa "Kaikki HTML-tunnisteet", jos se ei ole valittuna.
4. Etsi listasta Body-tyyli, valitse se, ja paina Muokkaa....
5. Valitse Muotoile-painikkeen alta kohta Fontti. Tee haluamasi fonttiasetukset.
6. Valitse OK hyväksyäksesi tyylin asetukset, ja uudelleen OK sulkeaksesi Tyyli-ikkunan.
7. Tallenna tyylitiedosto.

Uuden fontin määrittäminen osalle sivua

1. Avaa sivustolla käytetty css-tyylitiedosto.
2. Aloita uuden tyylin tekeminen valitsemalla Muotoile | Tyyli.
3. Valitse avautuvassa Tyyli-ikkunassa Uusi..., ja anna uudelle tyylille nimi. (Huom! FrontPage 2000 mahdollistaa vain kappaletyylien tekemisen.) 
4. Valitse Muotoile-painikkeen alta kohta Fontti. Tee haluamasi fonttiasetukset.
5. Valitse OK hyväksyäksesi tyylin asetukset, ja uudelleen OK sulkeaksesi Tyyli-ikkunan.
6. Tallenna tyylitiedosto.
7. Siirry sivulle, jolle haluat muutokset kohdistaa.
8. Maalaa haluamasi tekstikohta.
9. Valitse tekstille Muotoilu-työkalurivin Tyyli-valikosta tekemäsi uusi tyyli. Löytyy listan lopusta.

Taustavärin määrittäminen

1. Avaa sivustolla käytetty css-tyylitiedosto.
2. Valitse Muotoile | Tyyli.
3. Etsi Body-tyyli, ja valitse Muokkaa.
4. Valitse Muotoile-painikkeen alta Reuna.
5. Siirry Varjostaminen-välilehdelle.
6. Valitse haluamasi taustaväri, ja hyväksy muutokset.
7. Tallenna tyylitiedosto.

Edustavärin määrittäminen (fontti, reunukset...)

1. Ks. taustavärin määrittäminen kohdat 1-5.
2. Valitse haluamasi edustan väri, ja hyväksy muutokset.
3. Tallenna tyylitiedosto

Taustakuvan lisääminen

1. Avaa sivustolla käytetty css-tyylitiedosto.
2. Valitse Muotoile | Tyyli.
3. Etsi Body-tyyli, ja valitse Muokkaa.
4. Valitse Muotoile-painikkeen alta Reuna.
5. Siirry Varjostaminen-välilehdelle.
6. Valitse kohdassa Taustakuva, Selaa...
7. Etsi haluamasi kuva.
8. Valitse kohtaan Toisto, valinta "molemmissa suunnissa", jolloin taustakuva näkyy koko näytön alueella.
9. Hyväksy painamalla OK.
10. Tallenna tyylitiedosto.