Tyylitiedostot - CSS


Index

Yleistä

Esimerkit:
Määrittelyt komentojen sisällä
Määrittelyt sivun runkoon
Määrittelyt absoluuttisesti
Muutamia komentoja


Yleistä

Perinteinen tapa vaikkapa tekstikappaleiden muotoiluun HTML:ssä on kirjoittaa määrittelyt, (atribuutit ja arvot) komennon, (tagin) sisään, koskemaan vain kyseistä komentoa. Muitakin tapoja on.
Yksi näistä on CSS (Cascading Style Sheets). Sen avulla voidaan muotoilut määrittää "keskitetysti" koskemaan yhtä kappaletta, sivua tai sivustoa.
Suurimman hyödyn tyylitiedostojen käytöstä saa tilanteissa, joissa usein on tarve muuttaa kokonaisen sivuston ulkoasua. Tällaisissa tapauksissa on hyvä kuitenkin huomioida CSS:n käyttö jo sivuston suunnittelussa.

Ainoa rajoite CSS:n käytölle tulee (kuten aina) selaipuolelta. CSS ei ole valmis standardi, ainakaan vielä. Tosin selaimet, mm. IE ja NeNa versioista 4. ylöspäin tukevat sitä hyvin.
Ehkä paras paikka seurata CSS:n kehitystä, on World Wide Web Consortiumin aiheeseen liittyvät sivut.

Tyylipohjat, Style Sheets antavat sivun suunnittelijalle HTML:ää monipuolisemmat mahdollisuudet julkaisun ulkoasun muokkaukseen.
Tyylimäärityksillä, Style Definition voidaan vaikuttaa minkä tahansa tekstin muotoilumäärityksiin. Esimerkiksi, jos haluat käyttää kaikissa sivun tekstikappaleissa (<P>) tiettyä kokoa, väriä tai kursivointia, voidaan se tehdä koskemaan kaikkia sivun kappaleita ilman että määritykset ja arvot kirjoitetaan erikseen jokaisen komennon sisään.

Tyylimääritykset voivat sijaita sivun sisällä tai erikseen omassa tiedostossa, joka ladataan HEAD-elementissä ilmoitetusta silaintipaikasta käyttäjän avatessa sivusi. Sivun sisällä voivat määritykset sijaita omana tyylipohjanaan html -sivun HEAD-
elementissä tai html -komentojen sisällä. Jos sivuillasi on yleiset tyylimääritykset ja haluat tehdä uusia määrityksiä sivujen sisällä, on otettava huomioon eri määritysten arvojärjestys eli mistä tietyn komennon määritykset haetaan. Tyylimäärityksiä voidaan "pinota" päällekkäin, jolloin niiden arvojärjestys on seuraava:

  • HTML-komentojen sisällä sijaitsevat määritykset korvaavat kaikki muut
  • Sivun sisään (HEAD-elementtiin) sijoitettuna korvataan yleiset, useampia sivuja koskevat määritykset
  • Yleiset sivuston määritykset vaikuttavat viimeisenä

Määrittelyt komentojen sisällä

Tyylimäärittelyjen käyttö komentojen sisällä ei, asemointia lukuunottamatta, ole kovin mielekästä. Tekstin väri, koko ym. ominaisuudet yksittäisissä sivuissa kannattaa edelleenkin tehdä HTML-komennoilla. Tyylimäärittelyt kuitenkin toimivat silläkin tavalla. Muokkaaminen tosin on monimutkaisempaa, koska editorit eivät näitä ominaisuuksia tue, ja muutokset joudutaan tekemään "käsityönä".

Malli:

<head>
<title>Tyylimääritykset | HTML-komentojen sisällä</title>
</head>
<body>
<h1 STYLE="font-family: Comic Sans MS, Verdana; text-align: center">Tyylimääritykset komentojen sisällä</h1>
<h2 STYLE="color: blue; font-style: italic">H2 -otsikko</h2>
<p>Leipätekstiä</p> <div STYLE="margin-left: 35pt; color: '#6633ff'">
<h3 STYLE>H3 -otsikko</h3>
<p>Tässä leipätekstiä, joka katkaistaan  komennolla, <span STYLE="font-family: Arial, Verdana; font-size: 22pt; color: #ff3366">jonka jälkeen komennon sisään jäävän tekstin ominaisuuksiin voidaan vaikuttaa</span>.</p> </div> </body>
</html>

...eli ei kovin mielekkään näköistä. Mieluumminkin monimutkaista.
Selaimessa ylläoleva riimi näyttää tällaiselta


Määrittelyt sivun runkoon

Tyylimääritykset voidaan antaa myös erikseen yhdelle sivulle HTML-sivun sisällä. Koko sivun määritykset tulee laittaa <head> -osion sisään, jolloin verrattuna komennoissa annetaviin määrityksiin säästytään turhalta kirjoittamiselta. Kun tyylitiedosto ladataan <LINK> komennon sisällä määritellään html -sivun sisällä oleva tyylitiedosto <STYLE> ja </STYLE> -tagien sisään. Myöskin tässä pitää <STYLE> -tagin sisällä lymyävien komentojen tyyppi esitellä arvolla type="text/css"

Koska vanhemmat selaimet eivät tue tyylipohjia eivätkä tunnista <STYLE> -tagia, kannattaa tyylimääritykset piilottaa  HTML-kommenttien, <!--tämä on HTML- kommentti --> sisään. Tällöin vanhat selainversiot automaattisesti sivuuttavat ne, eikä ole mahdollista, että ne tulostuvat sellaisinaan selainikkunaan.

Malli:

<html>
<head>
<title>Tyylitiedosto</title>
<style TYPE="text/css">
<!--
BODY { font-family:Arial, Times New Roman;
font-size: 13pt; color: #666666}
/* Leipäteksti Arial, 13 pistettä, tummanharmaa */
H1 { font-style: bold; font-size: 15pt; color: blue}
/* H1-otsikko = leipäteksti lihavoituna 15 pistettä, sininen */
H2 { font-style: italic; font-size: 13pt}
/* H2-otsikko = leipäteksti kursivoituna 13 pistettä */
H3 { font-family: Arial; font-size: 11pt}
/* H3-otsikko = Arial, 11 pistettä *
/-->
</style>
</head>
<body>
<h1>Tyylitiedosto</h1>
<h2>H2 -otsikko</h2>
<h3>H3 -otsikko</h3>
<p>Tyylipohjat, Style Sheets antavat sivun suunnittelijalle HTML:ää monipuolisemmat
mahdollisuudet julkaisun ulkoasun muokkaukseen. Tyylimäärityksillä, Style Definition
voidaan vaikuttaa minkä tahansa tekstin muotoilumäärityksiin. Esimerkiksi, jos haluat
käyttää kaikissa sivun tekstikappaleissa (<P>) tiettyä kokoa, väriä tai
kursivointia, voidaan se tehdä koskemaan kaikkia sivun </p>
</body>
</html>

...näyttää järkevämmältä, kuin edellinen. Tällä konstilla jo säästää näppäimistöä
Selaimessa ylläoleva näyttää tällaiselta


Määrittelyt absoluuttisesti

Tehokkain tapa käyttää tyylipohjia useita sivuja käsittävässä kokonaisuudessa on tallentaa tyylimääritykset omaksi tiedostokseen, jolloin tyyli on "varastossa" ja se voidaan ottaa käyttöön halutuille sivuille tai sivustoihin.
Tyylitiedosto voidaan kirjoittaa millä tahansa tekstieditorilla, ja sen tiedostotarkennin on *.css. Tyylitiedosto ladataan sivulle html -sivun <head> -osassa <link> -komennon sisällä. Ladattaessa tyylitiedostoa pitää määritellä <link> -komennon sisällä sen tyyppi attribuutilla type="text/css", sijainti attribuutilla href="url" ja vielä attribuutilla rel=stylesheet kerrotaan, että kyseessä on  tyylipohja. Href-atribuutin arvo voi olla suhteellinen tai absoluuttinen.

Malli:

<html>
<head>
<title>Tyylitiedosto | Suhteellinen viittaus</title>
<link HREF="../tyylit/malli_3.css" TYPE="text/css" REL="stylesheet">
</head>
<body>
<h1>Tyylitiedosto</h1>
<h2>H2 -otsikko</h2>
<h3>H3 -otsikko</h3>
<p>Tyylipohjat, Style Sheets antavat sivun suunnittelijalle HTML:ää monipuolisemmat
mahdollisuudet julkaisun ulkoasun muokkaukseen. Tyylimäärityksillä, Style Definition
voidaan vaikuttaa minkä tahansa tekstin muotoilumäärityksiin. Esimerkiksi, jos haluat
käyttää kaikissa sivun tekstikappaleissa (&lt;P&gt;) tiettyä kokoa, väriä tai
kursivointia, voidaan se tehdä koskemaan kaikkia sivun</p>
</body>
</html>

...sijoittamalla mallin mukainen rivi HEAD-osaan, ladataan määritykset sisältävä malli_3.css tiedosto käyttöön. Ladattava tyylitiedosto on seuraavanlainen:

/* Kommentit tyylitiedostoissa kirjoitetaan näiden merkkien väliin */
/* Mallissa leipätekstinä verdana, mutta jos käyttäjän koneesta
ei löydy sitä käytetään fonttia Times New Roman. Fontin koko 12 pistettä ja väri punainen */
BODY {font-family: Verdana, Times New Roman; font-size: 12pt; color: red}
/* HI-otsikko on oletusfontti lihavoituna, koko 15 pistettä, väri sininen */
H1 {font-style: bold; font-size: 15pt; color: blue}
/* H2-otsikko on oletusfontti kursivoituna ja koko 13 pistettä */
H2 {font-style: italic; font-size: 13pt}
/* H3-otsikko on Arial ja koko 11 pistettä */
H3 {font-family: Arial; font-size: 11pt}

Valmiina malli on täällä


Muutamia komentoja

Tekstin muokkaukseen

 

color Muuttaa fontin värin. Arvoina voidaan antaa joitakin html:n valmiita värejä (red, blue, green, jne.) tai antaa arvo heksadesimaalimuodossa.
font-family Muuttaa käytettävän fontin tyypin. Voidaan antaa useampi fontti pilkulla eroteltuna. Jos käyttäjän koneeseen ei ole asennettu ko. fonttia, valitaan listalta seuraava.
font-size Muuttaa fontin kokoa. Arvoina voidaan antaa pisteinä(pt), senttimetreinä(cm), pikseleinä(px), prosenteina(%) tai tuumina(in).
font-style Muuttaa fontin tyylin. Arvoina voi saada lihavoitu(bold), kursivoitu(italic) tai normaali(normal).
font-weight Määrää fontin paksuuden. Kyseenalainen ominaisuus sillä useimmat selaimet tukevat vain arvoa medium (normaali) ja bold (lihavoitu). Muita arvoja ovat extra-light, light, demi-light, demi-bold ja extra-bold.
line-height Määrittää rivivälin suuruuden. Rivivälin määritykseen voidaan käyttää samoja arvoja font-size ominaisuuden kohdalla.
text-decoration Määrittää tekstin alleviivauksen. Selaimissa yleisemmin toimivat arvot ovat alleviivaus (underline) ja yliviivaus (line through). Muita arvoja ovat päälleviivaus(overline) ja vilkkuminen (blink).

 

Muita määrityksiä

 

background Määrittää taustavärin. Voidaan antaa samanlailla arvot kuin color määritteen kohdalla. Tämän lisäksi, jos käytät värin sijasta taustakuvaa, voit määrittää taustakuvalle seuraavia ominaisuuksia:
  • repeat toistaa kuvaa koko sivun alueelle.
  • norepeat näyttää vain yhden kuvan.
  • repeat-x toistaa kuvaa vaakasuunnassa.
  • repeat-y toistaa kuvaa pystysuunnassa.
  • scroll taustakuva vierii tekstin mukana vieritettäessä sivua.
  • fixed taustakuva pysyy paikallaan kuvaa vieritettäessä.
  • Taustakuvan paikan pystyy määrittämään mittayksiköillä(katso font-size) tai arvoilla(top, middle, bottom, left, center, right).
margin-left Määrittää vasemman puoleisen marginaalin. Mittayksiköt samat kuin font-size:n kohdalla. Arvo voidaan antaa myös negatiivisena. Sivun ulkonäkö riippuvainen käytettävästä selaimesta.
margin-right Määrittää oikean puoleisen marginaalin.
margin-top Määrittää ylhäällä olevan marginaalin.
text-align Tesktin keskitys. Arvot (left, center, right).
text-indent Tekstin sisennys. Arvot voidaan antaa samoin kuin marginaaleissa.

| 16.3.2003 |