CSS - tyylit 13.11.2000 Seppo Räsänen
Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot (style sheets), tasot (layers) ja dynaamiset kirjasimet. Hyvän näköisen web-sivun tekeminen pelkällä HTML-kielellä voi olla joissakin tilanteissa hankalaa tai ainakin tyylillinen päivitettävyys on työlästä. Toinen HTML:n ongelma on hyvän ulkoasun omaavan web-sivuston tekeminen eri selaimilla toimivaksi. World Wide Web Consortion (W3C) standardoimisen yhteydessä syntyi tyylitiedosto (Cascading Style Sheets (CSS)) määrittely. Tyylitiedostot laajantavat HTML-standardeja. Lisäksi tyylitiedostojen avulla ei tarvitse muuttaa HTML-dokumentin rakennetta vaikka tyylillisesti muutettaisiinkin sivustoa. CSS-tyylien avulla voidaan vaikkapa koko sivustossa oleva H1-tagi muuttaa näyttämään kerralla joltakin muulta kuin mitä se on oletuksena. Oletuksena H1-tagin teksti on isolla kirjoittettua mustaa tekstiä. Tyylien avulla voidaan muuttaa mm. tekstin väriä, kokoa, fonttia ja fontin tehosteita. Tyylit perustuvat sääntöihin, syntaksi on element {attribute: value[; attribute: value.]}, missä element määrittelee suunnitteluelementin, johon tyyli kytketään. Elementti on sama kuin HTML-tagi attribute on elementin määrittelyn osa ominaisuus jolle halutaan kohdistaa tyyli. value on asetus, joka on määritetty attribuutille eli se on attribuutin arvo attribute: value on säännön selitysosa. Selitysosia voi olla useita, ne erotelaan toisistaan puolipisteellä (;). Tyylien käyttäminen voidaan tehdä usealla tavalla. Ulkoisessa tyylien määrittelyssä on erillinen tyylitiedosto, johon viitataan HTML-dokumentista. Tämä mahdollistaa saman tyylitiedoston käytön koko sivustolle, jolloin ulkoasullinen päivittäminen voidaan tehdä helposti eli ko. tyylitiedostoa muuttamalla. Upotetussa tyylien määrittelyssä ko. tyylimääritys tehdään ko. sivun HEAD-osaan. Tämä määritys on voimassa vain siinä sivussa, jossa määritys on tehty. Rivinsisäinen tyyli määritetään sivulla olevan tagin sisälle eli sen vaikutus on vain ko. tagin vaikutus alueella. Tasojen avulla määritetään sivulla olevia alueita jonkin tyylimäärityksen mukaisesti. Tyyliluokkien avulla voidaan tyylissä olevasta tagista tehdä useita erilaisia
Sivu 3 muunnelmia. Seuraavissa kappaleissa tutustutaan eri tyylien määritys mahdollisuuksiin tarkemmin. Esimerkkinä Internet Explorer 4:n tukemat css-attribuutit liitteessä 1. 1.1. Ulkoinen tyyli (external) Ulkoisessa tyylissä rakennetaan erillinen tyylitiedosto (*.css). Tiedosto on normaali ascii-tiedosto, jossa tyylisääntöjen avulla on tehty määritykset. Alla olevassa kuvassa on esimerkki ulkoisesta tyylitiedostosta, joka sijaitsee www-palvelimella samassa hakemistossa, missä on tyylin käyttävät sivutkin. Tyylitiedosto voi olla toki muussakin hakemistossa, mutta sen käyttöönottamisessa viitataan vain oikeaan polkuun. Kuva 1. Esimerkki ulkoisesta tyylitiedostosta. Kuvan 1. esimerkissä on määritelty H1, H2 ja P -tagien ominaisuudet tyylisääntöjen avulla. H1- tagille on määritelty fontiksi Arial, fonttikoko on 36, fontti on lihavoitu ja tekstin väri on sininen. Vastaavalla tavalla H2-tagin fontti on Arial, fonttikoko 24, lihavoitu ja väri on vihreä. P-tagin fontti on Courier, pistekoko on 12, vasen marginaali on 0.5 tuumaa ja ylämarginaali on 20 pixeliä pienempi oletusarvoon verrattuna.
Sivu 4 Kun tyylitiedosto on tehty se otetaan käyttöön jokaiselle sivulle erikseen. Sivun HEAD-osaan tulee määritys käytettävästä tyylistä. Alla esimerkki ulkoisen tyylin käyttämisestä, huomioi tyylin käyttämiseen liittyvä LINK-tagi - <link rel="stylesheet" href="ulkoinen.css" type="text/css">. Kuva 2. Esimerkki ulkoisen tyylin käyttämisestä. 1.2. Upotettu tyyli (embedded) Upotetussa tyylissä tyylimääritykset tulevat ko. sivulle HEAD-osaan. Tämä tyylimääritys vaikuttaa vain ko. sivulle. Alla olevassa kuvassa on esimerkki upotetusta tyylistä.
Sivu 5 Kuva 3. Esimerkki upotetusta tyylistä. Kuva 3 esimerkissä oleva tyyli on määritelty HAED-osaan TITLE-tagin jälkeen. P-tagilla tausta väri on valkea, fontti on Comic Sans MS, pistekoko on 14, vasen ja oikea marginaali on 1 tuumaa ja ylämarginaalia on pienennetty 18 pixelillä. H1- tagille on määritelty taustaväriksi valkea, fontti on Arial Black, tekstin väri on punainen, fonttikoko on 24 sekä vasen ja oikea marginaali on 1 tuumaa. H2-tagille vastaavat määritykset, poikkeuksena tekstin väri on sininen ja pistekoko on 18. 1.3. Rivinsisäinen tyyli (inline)
Sivu 6 Rivinsisäisessä tyylissä tyylimääritykset ovat sivulla olevassa tagissa. Tämä tyylimääritys on voimassa vain tagin määrityksen ajan. Alla esimerkki. Kuva 4. Esimerkki rivinsisäisestä tyylistä. Kuvan 4 esimerkissä on määritetty B-tagille tyylimääritykset style-attribuuttien avulla. Esimerkissä lihavointi toteutetaan vihreällä värillä, kursivoituna ja fonttikoko on 14. Tyylien määrittelyssä voi tulla päällekkäisiä määrityksiä. Esimerkiksi määritetään ulkoinen tyyli B-tagille. Jonkin sivun jossakin kohdassa halutaan käyttää B-tagille rivinsisäistä tyyliä, tällöin tulee ristiriitainen tilanne, kumpi tyylimääritys todella vaikuttaa. Ristiriitaisissa tilanteissa viimeisimmän määrityksen mukaan näytetään ko. tekstiosa. 1.4. Tyyliluokat (class) Tyyliluokan avulla voidaan yhdelle tagille määrittää eri muunnelmia. Esimerkiksi P-tagille voi määrittää luokan, joka tasaa tekstin vasemmalle, toinen luokka tasaa oikealle ja kolmas luokka keskittää tekstin. Samassa tyylimäärityksissä voi olla vaikkapa tekstin tehosteisiin vaikuttavia määrityksiä.
Sivu 7 Kuva 5. Esimerkki tyyliluokkien käytöstä, jossa P-tagilla luokkamääritykset. Kuvan 5 esimerkissä H1 ja H2 tagit ovat normaalisti määriteltyjä. Esimerkki käyttää ulkoista tyyliluokkamääritystä. P-tagille on määritetty luokat keski, oikea ja normaali. P.keski määrittää tekstin keskittämisen. P.oikea tasaa tekstin oikeaan reunaan. P.normaali määrittää tekstin kursivoiduksi, 14 pistekokoiseksi ja fonttina on Courier sekä vasen ja oikea marginaali on 1 tuumaa. Edellisen esimerkin ulkoista tyyliä käytetään normaalisti eli www-sivulle määritetään HEADosaan tyylin käyttö. P-tagin käytöstä on esimerkki alla olevassa kuvassa. Huomaa tyyliluokan käytön syntaksi <p class="keski">.
Sivu 8 Kuva 6. Esimerkki tyyliluokan käytöstä, jossa käytetään ulkoista tyyliä. 1.5. Tasot (layer) Tyylitiedostot sisältävät tavan luoda erillisiä lohkoja, joita voi sijoitella www-sivulle halutulle paikalle. Lohkot muistuttavat kehyksiä, mutta tasot voivat sijaita missä vaan näyttöä ja niitä voi esim. liikuttaa/päivittää/piilottaa/näyttää scriptien avulla. Tasojen määrittäminen voitiin tehdä <LAYER>-tagin avulla, mutta nykyisin käytetään <DIV STYLE.> -tagimääritystä. Tasot toimivat niin Netscapen kuin Microsoftin selaimilla. <DIV>-tagin STYLE attribuutilla on useita määritysvaihtoehtoja. static määrittää normaalin HTML-määrityksen mukaiset osat, joita ei voi siirtää, oletusarvo absolute määrittää osan, joka sijoitetaan käytettyjen koordinaattien mukaan relative määrittää yksikön, jota siirretään tietyn määrän verran statin sijainnista lukien left ja top määrittävät osan siirron sen normaalista sijainnista width ja height määrittävät tason leveyden ja korkeuden clip määrittää leikkaavan suorakulmion osalle
Sivu 9 overflow määrittää, milloin suorakulmio leikkaa osan ja rullaus antaa mahdollisuuden nähdä loput osasta. Arvot ovat none, clip, scroll z-index määrittää päällekkäisyyden visibility määrittää osan näkyvyyden. Arvot ovat visible, hidden, inherit background-color määrittää taustavärin tasolla olevalle tekstille layer-background-color määrittää taustavärin koko tasolle Kuva 7. Esimerkki tasojen käytöstä. 1.6. Div ja span tagit Dhtml:ssä <DIV>-tagin avulla viitataan isompaan alueeseen. Tagille voidaan antaa nimi ID-attribuutin avulla. Edellisessä esimerkissä (kuva 7) käytettiin <DIV>-tagia. <SPAN>-tagilla viitataan vain pieneen tekstialueeseen. Tyypillisesti alue on merkin kokoinen.
Sivu 10 Kuva 8. <SPAN>-tagi esimerkki, jossa luettelossa olevan tekstin ensimmäinen merkki on ulkoisen tyylinluokan mukainen. 1.7. Tyylit tiiviimmässä muodossa Jos tyyli olisi... H1 {font-style: italic; font-weight: bold; font-size: 18 pt; font-family: "Times New Roman"}... niin sen voi lyhentää muotoon H1 {font: italic bold 18pt "Times New Roman"} Tai jos tyyli olisi... H1 {font-family: "Arial"; font-weight: bold} H2 {font-family: "Arial"; font-weight: bold} H3 {font-family: "Arial"; font-weight: bold}... niin sen voi lyhentää muotoon H1, H2, H3 {font-family: "Arial" bold} Tyylit voidaan kirjoittaa tiiviimmässä muodossa silloin, kun attribuutti on samaa sukua tai jos useilla tageilla on samat attribuutit.
Sivu 11 Lähteet http://www.saunalahti.fi/~vlaitila/css.html Simpson Alan; Microsoft Internet Explorer Web-ohjelmointi Aitken Peter; Internet-ohjelmointi Visual Basic Moncur Michael; JavaScript Niemi Juha, Kiuttu Petri; Java script ohjelmointi lisää interaktiivisuutta www-sivuillesi Peltomäki, Inkinen, Rantala; CGI- ja ASP-ohjelmointi Reynolds Matthew; e-kauppa http://www.microsoft.com (vbscript ja jscript) Microsoft Access2000 ohjeisto