Tyylitiedostot - CSS
Index
Yleistä
Esimerkit:
Määrittelyt komentojen sisällä
Määrittelyt sivun runkoon
Määrittelyt absoluuttisesti
Muutamia komentoja
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ä
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
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
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 (<P>) 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ä
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 |
|