CSS
Tämän osion tarkoitus kertoa tyylisäännöstöistä keskittyen CSS-tyylikieleen.
Sisältö:
Saman sisällön esittäminen erilaisilla alustoilla esim. (näyttö, paperituloste, mobiililaite)
on johtanut tyylisäännöstön kehittämiseen. Html-tiedosto tulee näin myös selkeämmäksi,
kun se ei sisällä monenlaista informaatiota. Ajatuksena on erottaa www-sivun sisältö ja ulkoasu toisistaan.
Tyylisäännöstöt ovat ohjeita siitä, miten html-tiedoston elementit esitetään. Tyylisäännöstö koostuu
säännöistä (rule). Yksi sääntö asettaa joidenkin elementtien joillekkin ominaisuuksille
(properties) joitakin arvoja. Ominaisuus voi olla esim. kirjasinlaji, koko, väri tai elementtiä kehystävän
viivan paksuus. Säännössä ns. selektori (selector) valitsee, mitä elementtejä sääntö koskee.
W3Schools esittää kolme tapaa, milllä tyylimäärityksiä saadaan annettua dokumenttiin:
- elementin sisäisesti
- html-tiedoston sisäisesti
- html-tiedoston ulkopuolelta
Elementin sisäiset tyylimääritykset annetaan liittämällä elementtiin style-atribuutti,
esim.<h3 style="color=blue">Tyylisäännöstöt</h3>. Etuna tässä on, että tyylimääritykset ovat
siellä, missä niitä käytetään. Mutta samanlaiset määritykset joudutaan tekemään erikseen joka kerta uudestaan.
Määritysten vaihtaminen on hankalaa. Sisältö ja määritykset ovat sekaisin dokumentin sisällä.
Tiedoston sisäiset tyylimääritykset puolestaan koskevat kaikkia samankaltaisia elementtejä ja
annetaan <head>-elementin sisällä. Esim.
<style
type="text/css">
<!-
blockquote{color:blue; font-style:italic}
-->
</style>
Html-tiedoston ulkoiset tyylimääritykset sijoitetaan omaan tiedostoon ja
liitetään tiedostoon link-elementillä (head-elementin sisällä):
<link rel="stylesheet" type="text/css" href=../css/external.css">
Tiedoston ulkoasua saadaan muutettua vaivattomasti, mikäli käytössä on valmiita erilaisia tyylitiedostoja.
Mikäli olet määritellyt tyylimääritykset itse html-dokumenttiin, on määritysten muuttaminen työläämpää.
CSS on kieliperhe, johon kuuluvat nykyisin CSS1 ja laajempi CSS2.
Tässä osiossa keskitytäänCSS1:een. Alan yleistä kehitystä voi seurata Web-konsortion
Web Style Sheets -sivuilta.
Seuraavassa käydään joitakin tyylisäännöstön perusasioita läpi.
Otsikoiden kokoh1 { font-size: 140%; }
h2 { font-size: 110%; }
Kirjasinlaji
Alla oleva esimerkki muuttaa kaiken tekstin kirjasinlajiksi ensisijaisesti Verdanan, toissijaisesti
(jos käyttäjän koneessa ei ole Verdanaa) Arialin. body { font-family: Verdana, Arial, sans-serif; }
Useimmat selaimet esittävät otsikot oletusarvoisesti lihavoituna.
Tämä voidaan estää:
h1, h2, h3, h4, h5, h6 {font-weight: normal; }
Kappaleen muotoilu
Useimmat selaimet esittävät kappaleet (p-elementit) niin, että niiden välissä on
pystysuunnassa kohtuullisen paljon väliä. Mikäli haluat ns. kirjallisen tyylin,
voit käyttää seuraavaa säännöstöä:
p { margin-top: 0; margin-bottom: 0; }
p { text-indent: 1,5em; }
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p { text-indent: 0; }
Edellisellä säännöstöllä kappaleiden välissä ei ole tyhjää tilaa,
vaan kunkin kappaleen ensimmäinenrivi on sisennetty, paitsi, jos kappale seuraa välittömästi otsikkoelementtiä.
Sisennyksen määrä on puolitoista em-yksikköä (n. iso M-kirjaimen verran).
Värit
Värit piristävät ja antavat tyylikkyyttä, mutta ole niiden käytössä maltillinen.
Värit ovatkin ne tyyliin liittyvä asia, johon monet haluavat ensimmäisenä vaikuttaa.
Mikäli haluat asettaa taustavärin, on syytä monesti asettaa myös tekstin väri.
Koska jossain selaimessa tekstin väri saattaa olla lähes taustan värin kaltainen.
Myöskin taustakuvan kanssa on syytä olla varovainen, tekstin luettavuuden takia.
Huomioi myös linkkien värit, asettaessasi tekstin värejä.
h3 {color: #400000; background: #ffffcc none; }
Yllä oleva esimerkki asettaa 3.tason otsikon väriksi tummanruskean ja
taustalle keltaisen, taustakuvaa ei ole. Vihje: käytä hillittyjä värejä, huomioiden mm. näköesteiset.
Turvallisen WWW-sivun väritaulukon näät täältä.
Lisätietoa webbiväreistä löydät täältä.
Lähtökohtana on, että meillä on WWW-sivu, joka on tehty käyttäen html-merkkausta
(esim. otsikot määritelty h-elementeillä ja kappaleet p-elementeillä).
On olemassa monta tapaa, jolla CSS-tyylitiedosto saadaan liitettyä WWW-sivulle, mutta tässä osiossa esitetään yksi
ja hyväksi havaittu tapa:
- Kirjoita tyylisäännöstö erilliseen tiedostoon ja talleta tiedosto .css nimiseksi (esim. eevan_tyyli.css).
Huom! Älä kirjoita tyylitiedostoon muuta kuin tyylisäännöstö ja helpointa on tallettaa tiedosto
samaan hakemistoon WWW-tiedoston kanssa.
- Kirjoita WWW-tiedoston head-elementin sisälle title-elementin jälkeen link-elementti,
joka on muotoa:
<link rel="stylesheet" type="text/css" href="eevan_tyyli.css">
Edellsessä osiossa oleva "Piirakkamaakarin" sivu näyttäisi siis
tältä .
Lisämateriaalia
|
