Tyyliehdotukset (CSS, Cascading Style Sheets) on oiva tapa toteuttaa erilaisia muotoiluja webbisivuille. Näitä voi tavallaan pitää samanlaisena kuin vaikkapa tekstinkäsittelyohjelmankin tyylejä: näillä voidaan vaikuttaa koko dokumentin alueella kaikkiin samanlaisiin elementteihin. Esimerkiksi kaikkien otsikkotason 1 otsikoiden fontit voidaan määrittää hetkessä haluamakseen, samoin voidaan määritellä taustaväri yms. ominaisuuksia sille.
Tässä dokumentissa mennään läpi pieni esimerkki siitä, miten sivulle voi määrittää perustyylejä. Esimerkin teksti on lainattu Linux-aiheisesta Wikistä osoitteesta http://linux.fi/wiki/Komentorivin_perusteet
Lähtötilanteena meillä on yksinkertainen dokumentti, jonka ulkoasu on tällainen:
Aloitetaan tyylitiedoston laatiminen siten, että lisätään koodiin linkki tyylitiedostoa varten seuraavan mallin mukaan:
Tämä onnistuu suoraan valikon Actions | Style | Style | Stylesheet link. Tiedoston nimen (esimerkissä tyylit.css) voi päättää itse. Yleisen tavan mukaan tiedoston päätteeksi laitetaan kuitenkin .css.
Tämän jälkeen avataan uusi tyhjä tiedosto, talletetaan se annetulla nimellä samaan hakemistoon, missä sivutkin ovat. Nyt meillä on olemassa sekä linkki, että tiedosto.
Aloitetaan määrittelemällä sivulle uusi fontti oletuksena olevan Times New Romanin sijaan. HTMLKit:n Style-valikon kautta helpotetaan hieman omaa toimintaa. Kannattaa tutustua sen toimintaan. Se löytyy näin:
Kuvan valikko, jossa on kaksi pistettä päällekkäin, sisältää nämä tyylimääritykset.
Tehdään ensiksi <body>-tagille määritys. Jos haluaa vaihtaa koko dokumentin fontit, se kannattaa tehdä näin, koska (x)html-kieli on hierarkinen järjestelmä; bodyn määritelmät periytyvät muille:
body {font-family: verdana,arial,helvetica,sans-serif ;}
Huomaa useampi erilainen fontti. Tämä siitä syystä, että esitelty fontti tulee löytyä käyttäjän koneelta. Jos käyttäjällä ei ole Verdana-fonttia, käytetään Arialia. Lopuksi, jos mitään ei löydy, otetaan päätteetön fontti (sans-serif). Tässä on yksi syy, että näitä pitäisi oikeastaan kutsua tyyliehdotuksiksi: emme voi tietää, millaisilla määrityksillä käyttäjä näitä sivuja katselee.
Nyt tallennuksen jälkeen sivu näyttääkin tältä:
Seuraavaksi käsittelemme 1-tason otsikon ja teemme sille kahden pikselin levyisen sinisen reunuksen sekä keskitämme otsikon:
h1 { border-style: solid; border-width: 2;border-color: #0033cc; text-align: center;}
Tools-välilehdellä on kolmen väripallon takana värien valitsin. Nyt otsikko ja kaikki myöhemmin tähän dokumenttiin lisätyt otsikot ovat tällaisia:
Valitettavasti editori ei tässä tapauksessa tarjoa vaihtoehtoja tyylimäärityksille.
Seuraavaksi toteutetaan valikolle laatikko, jossa on yhden pikselin pistereunus ja keltainen tausta. Huomaa piste määrityksen edellä; nythän ei tehdä mitään valmista elementtiä, vaan oma (koodi on selvyyden vuoksi jaettu useammalle riville):
.vasen_laita { border: 1px dashed #0033cc;
background-color: #ffff99;
font-family: Arial,Helvetica,sans-serif;
float: left;
max-width: 250px;
min-width: 250px;
min-height: 100%;
position: static;
height: 100%;
padding-top: 3px;
padding-left: 3px;
padding-left: 3px;
padding-bottom: 3px;
}
Tämän lisäksi tämä tyyli on merkattava koodiin käytettäväksi. Se tapahtuu näin:
<div class="vasen_laita"> <h2>Linkkejä:</h2> <p><a href="miten.html">Miten komentoriville pääsee?</a> <a href="komentotulkki.html">Komentotulkki</a> <a href="hakemisto.html">Hakemistorakenteessa liikkuminen</a></p> </div>
Eli div-määrityksellä rajataan mukaan kuuluvat elementit. Huomaa, ettei luokan nimessä ole täällä pistettä.
Ja nyt olemmekin tässä tilanteessa:
HUOM! div:ssä voidaan käyttää myös id-määritystä:
<div id="vasen_laita">
Tällöin määritys tyylitiedostossa tulee risuaitamerkillä:
#vasen_laita { border: 1px dashed #0033cc;
Seuraavaksi pitääkin saada ko. valikko tekstin vasemmalle puolelle. Tähän tarvitaan toinen samanlainen laatikko:
.tekstiosa { border-style: solid;
border-width: 1px;
padding: 2px;
font-family: Arial,Helvetica,sans-serif;
margin-left: 255px;
position: relative;
}
Lopputulos, kun div-elementit on laitettu oikeaan kohtaan, näyttää tältä:
Eihän se. Kun koodia tulkitaan ylhäältä alas, tulee se koodin osa, joka tuottaa vasemman laidan valikon, siirtää ennen tekstiosan koodia. Sen jälkeen tämä näyttää tältä.
HUOM! Tämä tässä esitetty ei välttämättä edusta absoluuttista totuutta asiassa. Esitettyihin virityksiin voi hyvinkin olla jopa paljon fiksumpia tapoja niiden toteuttamiseen.
Responsiivisellä sivustolla tarkoitetaan sivustoa, joka kykenee reagoimaan siihen, millaisella laitteella (mobiili, tabletti, läppäri,...) sivustoa oikein katsellaan. Näin ei tarvitse rakentaa uutta sivustoa jokaiseen erilaiseen tilanteeseen. Responsiivisyys on toteutettavissa tyylimääritysten avulla. Tunnetuin tällainen valmis tyylimääritys on nimeltään Bootstrap.
Bootstrapiin on syytä tutustua tarkemmin kun tuottaa sivuja. Sillä on on helppo toteuttaa responsiivisiä sivustoja. Lisää aiheesta löydän muun muassa täältä: http://users.metropolia.fi/~kuivi/bfish/bootstrap.php
Alla muutama linkki suomenkielisiin css-ohjeisiin netissä:
http://verkko-opas.fi/web/, laaja verkkosivusto xhtml:n ja css:ien maailmaan.
http://www.nic.fi/~tapio1/Opetus/index1.php3, Tapani Markulan valtava ja laaja sivusto css:stä. Viimeinen päivitys tosin vuonna 2004, joten ei tunne aivan uusimpia selaimia vertailuissaan.
http://koti.mbnet.fi/~petepe/css1/, Petteri Perälän css-opas.
http://www.456bereastreet.com/lab/developing_with_web_standards/fi/, jo aiemmin esillä ollut sivusto aiheesta "Web-julkaiseminen ja standardit. Suosituksia ja hyviä toimintatapoja".
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/, tässä osoitteessa kädestä pitäen vielä tarkempi ohjeistus siitä, miten tehdään viimeisen päälle tuo yllä ollut esimerkki (englanniksi, toisin kuin otsikko antaa ymmärtää....)