Kotisivut helposti - osa 3

Transkriptio

1 Kotisivut helposti - osa 3 Tämän artikkelisarjan kahdessa ensimmäisessä osassa esiteltiin Internet-sivujen perusteita, kotisivujen suunnittelulähtökohtia sekä HTML/XHTML-ohjelmoinnin perusteita ja yleisimmin käytettyjä komentoja. Tässä artikkelissa tullaan esittelemään, miten edellisessä osassa opittuja asioita voidaan hyödyntää tehokkaasti muokkaamalla niiden ulkoasua tyylimääritelmien avulla. Mitä tyylit ja tyylitiedostot sitten ovat? Tyylit ovat HTML/XHTML-elementtien määritelmiä, joilla eri elementtien ulkoasua voidaan muokata. Tyylit ohjelmoidaan CSS-ohjelmointikielellä (Cascacing Style Sheets = porrastetut tyyliarkit), joka on pääosin melko yksinkertainen ohjelmointikieli. Vaikka tyylit ovat eri ohjelmointikieltä, kuin itse HTML/XHTML-dokumentti, ne voidaan silti sisällyttää samaan tiedostoon. Tyylejä voidaan käyttää kolmella eri tavalla: 1. Kirjoittaa tyylimääritelmät HTML/XHTML-dokumentin alkuun omaan osioonsa. 2. Kirjoittaa tyylimääritelmät erikseen HTML/XHTML-dokumentin kuhunkin elementiin. 3. Kirjoittaa kaikki sivuston tyylimääritelmät yhteen, erilliseen tiedostoon. Näistä vaihtoehdoista ainakin keskimmäistä tulisi välttää epäkäytännöllisyytensä vuoksi, koska tällä tekniikalla koodia pitää kirjoittaa erittäin paljon. Ylimmäinen menetelmä soveltuu hyvin silloin, kun työskentelee yksittäisen sivun parissa. Kolmas vaihtoehto on suositeltavin, koska tällä menetelmällä välttyy saman koodin kirjoittamiselta moneen kertaan ja myöskin sivuston muokkaus on huomattavasti helpompaa. Jos kotisivusi koostuu useammasta kuin yhdestä sivusta, suosittelen, että käytät kolmatta vaihtoehtoa. Menetelmää numero 1 käytetään seuraavasti: Edellä olevassa koodissa ei siis ole -komentoja, vaan ne ovat korvattu -määritteellä, joka ilmaisee, että CSS-muotoa oleva tyylitiedosto löytyy nimellä "styles.css" samasta kansiosta, kuin kyseinen XHTML-dokumentti. Yleisenä huomiona voidaan sanoa, että CSS-tiedostot kannattaa tallentaa XHTML-tiedostojen kanssa samaan kansioon. Muistio on tälläkin kertaa hyvä apuväline, koska sillä voi tallentaa millä tahansa tiedostopäätteellä, jolloin styles.css -tiedoston luonti onnistuu helposti. Itse styles.css (tai mikä tahansa.css -tiedosto) sisältää ainoastaan seuraavaksi esiteltäviä komentoja. CSS:n ja XHTML:n yhteys CSS-koodi koostuu kohde-elementeistä (elementeistä, joihin halutaan vaikuttaa) sekä niiden määrittelyistä. Koodissa on siis aina ensin viitattava siihen elementtiin, mitä halutaan muuttaa, ja sitten kerrottava, miten elementtiin halutaan vaikuttaa. Esimerkiksi ylläolevassa tapauksessa eli sivun sisältöalue ei toistaiseksi sisällä vielä mitään näkyviä elementtejä. Body itsessään on kuitenkin näkyvä elementti, tyhjä sivu. Bodya voidaan muokata eri tavoin, esimerkiksi 1 / 12

2 vaihtamalla taustaväri oletuksena olevasta valkoisesta mustaksi. body { background-color: black; } Edellä oleva esimerkki kiteyttää koko CSS-ohjelmointikielen rakenteen, eli syntaksin. Ensiksi määritetään kohde, johon halutaan vaikuttaa (tässä tapauksessa body), jota seuraavat aaltosulkeet { ja }. Aaltosulkeiden väliin kirjoitetaan varsinaiset tyylimäärittelyt. Tässä tapauksessa haluttiin muuttaa taustaväriä, johon käytetään komentoa "background-color". Komennon jälkeen tulee aina kaksoispiste, jota seuraa haluttu arvo ja puolipiste. Yleisesti hyvänä käytäntönä voidaan pitää sitä, että kukin tyylimääritelmä kirjoitetaan omalle rivilleen ja mielellään vielä hieman sisennettynä, jolloin dokumentin luettavuus säilyy hyvänä. Miten sitten muihin elementteihin viitataan? Täsmälleen samalla tavalla kuin bodyynkin! Jos esimerkiksi lohkon ( ) taustaväriä halutaan vaihtaa, kirjoitetaan edellä mainittuun koodiin "body":n tilalle "div". Entäs, jos samalla sivulla on useita lohkoja? Tässä tapauksessa edellä esitetty menetelmä muuttaa jokaisen lohkon taustavärin mustaksi. Tämän vuoksi suurimmalle osalle sivulla esiintyvistä elementeistä määritetään tietty nimi (ID) tai luokka (class). Nimen ja luokan periaatteellinen ero on, että samalla sivulla ei saa esiintyä useaa saman nimistä elementtiä, kun taas samaan luokkaan kuuluvia elementtejä voi olla rajattomasti. Kaiken lisäksi samalla elementillä voi olla sekä nimi että luokka. Seuraava esimerkki osoittaa, miten elementeille määritetään nimet ja luokat HTML/XHTML-koodissa. Edellä määritettiin siis lohko, jonka nimi on "nimi" ja luokka on "luokka". Ja kuten esimerkistä voidaan havaita, lohko ei sisällä mitään. Tämä ei kuitenkaan haittaa, koska lohkojen tyyliä voidaan silti muokata ja lohkot saattaa näkyviin, vaikka ne olisivat tyhjiä. Nyt, kun meillä on tunnistettavissa oleva elementti, voimme tehdä sille tyylimääritelmiä. #nimi { backgroundcolor: black; }.luokka { border: 1px solid red; } Edellinen esimerkki osoittaa, että nimiin (ID) viitataan aina etuliitteellä #, kun taas luokkiin viitataan etuliitteellä. (piste). Edellisessä tapauksessa oltaisiin voitu myös kirjoittaa "div#nimi" tai "div.luokka", jolla tarkennetaan viittauksen kohteena olevaa elementtiä. Tämä on lähinnä koodin lukemista helpottava seikka. Itse en käytä koskaan "div" -etuliitettä, mutta muihin elementteihin (kuviin, listoihin, jne.) viitatessa käytän kyllä kyseisen elementin etuliitettä. Edellä olevassa 2 / 12

3 esimerkissä siis määritetään, että elementin nimeltä "nimi" taustaväri halutaan asettaa mustaksi ja kaikki "luokka" -luokkaan kuuluvat elementit halutaan kehystää yhden pikselin levyisellä, punaisella viivalla. Koska aiemmin määritetty lohko on nimeltään "nimi" ja kuuluu luokkaan "luokka", niin nämä molemmat tyylimääritelmät koskevat tätä yhtä lohkoa, jolloin sen tausta värjäytyy mustaksi ja reunat punaiseksi. Yksi elementti voi kuulua myös useaan eri luokkaan samanaikaisesti. Tällöin elementin määritelmä voi olla esimerkiksi: Nyt tietty lohko siis kuuluu luokkiin "reunukset" ja "musta_tausta", jolloin molempien luokkien määritelmät koskevat tätä lohkoa..reunukset { border: 1px solid white; }.musta_tausta { background-color: black; } Tämän määritelmän mukaan kaikki "reunukset" -luokkaan kuuluvat elementit saavat ympärilleen valkoisen reunuksen. Vastaavasti "musta_tausta" -luokkaan kuuluvat elementit saavat mustan tautavärin. Tällöin edellä määritetty lohko saa sekä mustan taustan että valkoiset reunukset. Useita luokkia yhdistellessä kannattaa varmistaa, ettei luokat sisällä ristiriitoja, kuten esimerkiksi, että toisessa luokassa määritetään taustaväriksi valkoinen ja toisessa musta. Ristiriidat voivat aiheuttaa hyvinkin mielenkiintoisia ja mahdollisesti vaikeasti paikannettavia ongelmia, joten luokkien yhdistelemisessä kannattaa olla tarkkana. Etusivu Tuotteet 3 / 12

4 Edellä on esitetty hieman monimutkaisempi rakenne, joka sisältää useita sisäkkäisiä elementtejä (ei tämä oikeasti vielä kovin monimutkaista ole). Koodissa näkyvät vihreät tekstit ovat kommentteja, jotka eivät koskaan näy sivulla. Elementtejä sulkiessa on hyvä laittaa tämän tyyppisiä kommentteja, jolloin tiedetään, mikä komento sulkee minkäkin elementin. Ylläolevan esimerkin tapauksessa eri elementteihin voitaisiin viitata CSS-koodissa samalla tavalla, kuin aiemmin esiteltiin, tai sitten vaihtoehtoisella tavalla. Vaihtoehtona on, että elementteihin viitataan mahdollisimman tarkasti, jolloin koodin lukijan on helppo nähdä, mistä tietty elementti löytyy. Jos esimerkiksi haluttaisiin muuttaa edellisen esimerkin listassa olevien linkkien värejä, voitaisiin kirjoittaa seuraavasti. #header #navigation ul.nav_links li a { font-color: red; } Tällaisella merkintätavalla määritetään järjestyksessä, mikä elementti sijaitsee minkäkin elementin sisällä, jolloin kohde on hyvinkin yksiselitteinen. Tällainen tarkkuus ei välttämättä ole useinkaan tarpeellista, mutta olen itse tottunut tekemään niin, koska sillä toisinaan välttyy myös erilaisilta ristiriidoilta ja koodia on huomattavasti helpompi tulkita jälkeenpäin, esimerkiksi kuukausien tai vuosien kuluttua. CSS-perusteet Sitten päästään CSS-ohjelmointikielen tärkeimpiin komentoihin. Aloitetaanpa vaikka ensimmäiseksi taustaan liittyvistä määritelmistä. body { background-image: url(images/taustakuva.jpg); bac kground-repeat: no-repeat; background-color: #000000; } Edellä on esitetty kolme taustaan liittyvää määrettä, jotka ovat: taustakuva, taustakuvan toisto ja taustaväri. Taustakuva tulee tässä tapauksessa olla tallennettu "images" -alikansioon nimellä "taustakuva.jpg". Taustaa ei haluta toistaa, eli kuva näytetään sellaisena, kuin se on. Jos taustakuvana halutaan käyttää esimerkiksi hyvin pientä kuvaa ja se halutaan monistaa sekä yläettä alasuunnassa, "background-repeat" -rivi voidaan jättää kokonaan pois. Jos taas kuva halutaan toistaa vain vaakasuunnassa, käytetään "no-repeat" -arvon tilalla arvoa "repeat-x" ja vastaavasti pystysuunnassa arvoa "repeat-y". Taustakuvan väri on tässä tapauksessa ilmoitettu heksadesimaaleina, eli kuuden numeron ja kirjaimen yhdistelmänä. Heksadesimaalit mahdollistavat tarkemmat värimäärittelyt kuin pelkät "black", "red" tai "white", jolloin sivusta saa juuri haluamansa värisen. Heksadesimaalien arvoja löytyy useilta eri nettisivuilta vaikkapa hakusanoilla "web colors" tai sitten suoraan kehittyneemmistä kuvankäsittelyohjelmista, kuten vaikkapa Adobe Photoshop. Tässä esimerkissä oleva # tarkoittaa mustaa. div { width: 500px; height: 350px; min-width: 35 0px; min-height: 20%; max-width: 100%; max- 4 / 12

5 height: 400px; } Edellä on ilmoitettu elementtien leveyttä (width) ja korkeutta (height) koskevat komennot. Mikäli elementissä käytetään width ja height -määritteitä, elementti on täsmälleen määritettyjen mittojen kokoinen. Mitat voidaan määrittää joko pikseleinä (px) tai prosentteina käytettävissä olevasta tilasta. Jos elementin halutaan olevan vaikka koko ruudun levyinen, sen leveydelle voidaan antaa arvo 100%, mikäli muut elementit eivät rajoita tätä leveyttä. Minimitta kertoo, että elementti ei voi olla minimimittaa pienempi (jolloin tyhjäkin elementti on vähintään minimimittojen mukainen) ja maksimimitta asettaa vastaavasti enimmäiskoon. Yleisenä huomiona mainittakoon, että edellä olevia määritteitä ei kannata yrittää yhdistellä esimerkiksi siten, että asettaa samalle elementille sekä minimi- että maksimimitan. Tällaista ominaisuutta ei nimittäin vielä ainakaan ole olemassa, joten on yleensä tyydyttävä vain yhteen leveyttä ja pituutta koskevaan määritteeseen. div { margin-left: 0; margin-right: 12px; margin-t op: 6px; margin-bottom: 20px; margin: 6px 12px 20px 0; padding-left: 3px; padding-right: 5px; padding-top: 7px; padding-bottom: 0; padding: 7px 5px 0 3px; } Edellä olevat komennot ovat marginaali (margin) ja täyte (padding), jotka ovat yhdet eniten käytettävistä komennoista CSS-ohjelmointikielessä. Marginaalilla määritetään, paljonko tietyn elementin ulkopuolelle halutaan jättää tyhjää tilaa. Täytteellä puolestaan määritetään, paljonko elementin sisäpuolelle jätetään tyhjää. Ylläolevassa esimerkissä on näytetty kaksi eri tapaa ilmaista sama asia, Padding tai margin voidaan ilmoittaa yhdellä rivillä, jolloin arvojen järjestys on "top right bottom left" eli "ylä oikea ala vasen", tai usealla eri rivillä. Marginaalin ja täytteen eroa havainnollistetaan seuraavalla esimerkillä. margin: 0 ja padding: 0 margin-left: 25px ja padding: 0 margin: 0 ja padding: 10px px margin-left: 15px ja padding-left: 15px Ylläolevista laatikoista voidaan havaita, että marginaali todellakin siirtää koko elementtiä ja padding puolestaan vain elementin sisältöä. Huomaa, että kolmas laatikko on korkeampi kuin muut, vaikka kaikki laatikot on määritetty yhtä korkeiksi (height: 50px;), ja kaksi alinta laatikkoa ovat hieman muita leveämpiä. Tämä johtuu siitä, että täyte (padding) lisätään elementin mittoihin, kun taas marginaalia ei lisätä. Jos esimerkiksi elementti on määritetty 100 pikseliä leveäksi (width: 100px;) ja sillä on 20 pikseliä täytettä sekä vasemmalla että oikealla (padding- 5 / 12

6 left: 20px; ja padding-right: 20px;) niin sen kokonaisleveys on tällöin 140 pikseliä. Tämä on hyvä pitää mielessä. div { border-left: 1px solid black; border-right: 1px da shed #cccccc; border-top: 2px solid #000000; borderbottom: 2px dashed #111111; border: 1px solid white; } Yllä esitetään kaksi vaihtoehtoista tapaa määrittää reunuksia. Reunukset voidaan määrittää yksi kerrallaan, kuten marginaali ja täytekin, tai sitten kaikki kerralla. Reunukselle määritetään tietty paksuus (esimerkiksi 1px eli yksi pikseli), reunuksen tyyli (jatkuva tai katkoviiva, solid tai dashed) sekä reunuksen väri, jälleen joko värin nimellä tai heksadesimaaleina. Reunuksia käyttäessä on hyvä huomata, että myös ne kasvattavat elementin kokonaismittoja, kuten täytekin (padding). p { font-family: Georgia, "Times New Roman", serif; font -size: 16px; font-weight: bold; font-style: italic; color: black; text-decoration: underline; text-transform : uppercase; line-height: 24px; letterspacing: -2px; text-align: center; } Yllä on esitetty tekstiä koskevat CSS-komennot. Font-familylla määritetään käytettävä fontti. Fontiksi on tässä tapauksessa määritetty ensisijaisesti "Georgia" ja toissijaisesti "Times New Roman", mikäli Georgia ei ole käytettävissä. Mikäli kumpikaan näistä ei ole käytettävissä, käytetään mitä tahansa vastaavaa fonttia "serif" -fonttiluokasta. Font-size määrittää fontin koon pikseleinä, font-weight puolestaan fontin lihavuuden (tässä tapauksessa fontti on lihavoitu, oletuksena käytetään arvoa "normal", jolloin fonttia ei ole lihavoitu, muita asetuksia ovat esimerkiksi 100, 200, 300,..., 800, 900), font-stylella teksti voidaan kursivoida. Color määrittää tekstin värin. Text-decorationilla tekstiä voidaan koristella alleviivauksella (underline), yliviivauksella (linethrough), yläpuolisella viivalla (overline) sekä vilkkuvalla tekstillä (blink), tai jättää teksti normaaliin tilaansa (none). Text-transform muuttaa tekstin kokonaan pieniksi tai isoiksi kirjaimiksi (lowercase tai uppercase), jokaisen sanan ensimmäisen kirjaimen isoksi kirjaimeksi (capitalize), tai jättää tekstin oletustilaansa (none). Line-heightilla määritetään yhden tekstirivin korkeus (eli periaatteessa riviväli), letter-spacingilla kirjaimia voidaan siirtää lähemmäs toisiaan (negatiivisella arvolla) tai kauemmas toisistaan (positiivisella arvolla). Text-alignilla teksti voidaan keskittää, siirtää vasemmalle (left) tai oikealle (right), tai tasata molempiin reunoihin (justify). Muutamia kehittyneempiä ominaisuuksia 6 / 12

7 Edellä läpikäydyt komennot ovat kaikkein yleisimpiä ja eniten käytettyjä CSS-komentoja, joita tarvitset käytännössä jatkuvasti. Seuraavaksi esitellään muutamia hieman edistyneempiä, mutta hyvinkin tarpeellisia komentoja, joiden oikeaoppinen käyttö voi vaatia hieman harjoittelua. div { float: left; } Float on erittäin tärkeä ominaisuus, jota ilman ei käytännössä voida toteuttaa kuin kaikkein yksinkertaisimpia sivuja. Float-komennolla voidaan "kelluttaa" elementtejä vasempaan (left) tai oikeaan (right) laitaan siten, että muut elementit voivat kiertää kellutetun elementin. Kuulostaa sekavalta? Asiaa voidaan havainnollistaa yksinkertaisella esimerkillä. float: none; Tämän tekstin pitäisi kiertää laatikko. Kuten voidaan huomata, kun float on oletuksena "none", eli ei-kelluva, niin teksti ei kierrä elementtiä halutulla tavalla. float: left; Tämän tekstin pitäisi kiertää laatikko. 7 / 12

8 float: right; Tämän tekstin pitäisi kiertää laatikko. Yllä oleva esimerkki osoittaa, miten float-komento käyttäytyy. Kun elementti kellutetaan vasemmalle, se siirtyy emo-elementtinsä vasempaan reunaan (tässä tapauksessa siis tämän artikkelipohjan vasempaan reunaan), jolloin sitä seuraavat elementit siirtyvät sen oikealle puolelle. Vastaavasti oikealle kellutetut elementit siirtyvät emo-elementtinsä oikeaan reunaan, jolloin seuraavat elementit pääsevät siirtymään kellutetun elementin vasemmalle puolelle. Esimerkistä nähdään, että koska punaista tekstiä ei kuitenkaan kelluteta minnekään, niin se siirtyy oletusarvoisesti niin vasemmalle, kuin mahdollista. Jos myös tekstille asetetaan arvo "float: right;" niin tällöin lopputulos on seuraava. float: right; Tämän tekstin pitäisi kiertää laatikko. 8 / 12

9 Elementti voidaan myös kelluttaa jompaan kumpaan reunaan ilman, että muut elementit voivat kiertää sitä. Tällöin tarvitaan lisämäärettä clear. div { clear: both; } Clear-komennolla voidaan määrittää, kummalta puolelta elementti voidaan kiertää, vai voidaanko elementtiä kiertää lainkaan. Arvolla "left" elementtiä ei voida kiertää vasemmalta ja arvolla "right" oikealta. Arvolla "both" elementtiä ei voida kiertää kummaltakaan puolelta ja sitä käytetäänkin usein float-komentojen "nollaamiseen", eli luodaan ylimääräinen lohko (div), jolle asetetaan ainoastaan määrite "clear: both;", jolloin edellä olevien elementtien floatit eivät enää päde. Tämä kuulostaa varmasti hyvin vaikeaselkoiselta, mutta asiaa pyritään valottamaan myöhemmin, kun alamme ohjelmoida kotisivuja. ul, ol { list-style-type: none; list-styleimage: url(images/kuva.jpg); list-style-position: inside; } Edellä olevat komennot ovat listoille tarkoitettuja määreitä. List-style-typellä voidaan määrittää, näytetäänkö listan nimikkeiden edessä merkkiä (kuten palloa, viivaa tai numeroa), sekä millainen merkki näytetään. "Epäjärjestyksessä" olevalle listalle (unordered list, ul) voidaan käyttää arvoja "none", "disc", "circle" tai "square", joilla listamerkit voidaan poistaa tai vaihtaa palloksi, ympyräksi tai neliöksi. Järjestetyille listoille (ordered list, ol) voidaan käyttää arvoja "armenian", "decimal", "decimal-leading-zero", "georgian", "lower-alpha", "lower-greek", "lowerlatin", "lower-roman", "upper-alpha", "upper-latin" tai "upper-roman", joilla numerot voidaan vaihtaa eri tyyppisiksi. List-style-imagella voidaan käyttää haluttua kuvaa listamerkkinä, mutta yleisesti ottaen tämä komento ei toimi kunnolla. Käytännössä tämä komento korvataan asettamalla listamerkinnälle (list-item, li) taustakuva ja siirtämällä merkintä taustakuvan päältä sivuun esimerkiksi täytteellä (padding). List-style-position määrittää, ovatko käytetyt listamerkit listan sisäpuolella (inside) vai ulkopuolella (outside). Tätä havainnollistetaan seuraavalla esimerkillä. Tässä listassa merkit ovat listan sisäpuolella. Tässä listassa merkit ovat listan sisäpuolella. Tässä listassa merkit ovat listan ulkopuolella. Tässä listassa merkit ovat listan ulkopuolella. Eräs tärkeä seikka HTML/XHTML ja CSS-ohjelmoinnissa on ymmärtää sisäkkäisten elementtien (nested elements) toimintaa. Sisäkkäisiin elementteihin liittyy termit emo-elementti (parent element) ja tytär-elementti (child element), jotka kuvaavat elementtien suhdetta toisiinsa. 9 / 12

10 Emo-elementti Tytär-elementti Jos emo-elementille asetetaan tietyt ulkomitat, niin tytär-elementti on tällöin sidoksissa näihin ulkomittoihin, eikä voi olla suurempi kuin emo-elementti. Vastaavasti tytär-elementin koko on suhteellinen emo-elementin kokoon, joka on hyvä huomioida esimerkiksi prosentuaalisia mittoja käytettäessä. Jos emo-elementti on leveydeltään vaikkapa 300 pikseliä ja tytär-elementille määritetään leveydeksi 50%, niin elementin leveydeksi muodostuu tällöin 150 pikseliä, joka on 50% käytettävissä olevasta leveydestä. Emo- ja tytär-elementteihin liittyy myös elementtien sijoittelu toistensa suhteen. Sijoitteluun käytetään seuraavia komentoja. div { position: absolute; top: 5px; bottom: 10px; left: 0; right: 20px; } Position-komennolla määritetään, onko elementin sijainti suhteellinen vai absoluuttinen. Elementit ovat oletusarvoisesti sijainniltaan suhteellisia toisiinsa nähden, joten yksittäisen elementin määrittäminen komennolla "position: relative;" ei vielä muuta mitään. Jos emoelementille määritetään suhteellinen sijainti komennolla "position: relative;", niin tällöin tytärelementti voidaan määrittää olevan absoluuttinen emo-elementin suhteen. Jos millekään elementille ei määritetä suhteellista sijaintia, niin tällöin absoluuttisesti määritetty sijainti on suhteessa koko näytettävään sivuun. Asia on varmasti melko vaikeaselkoinen, joten seuraavasta esimerkistä voi olla hyötyä asian hahmottamisessa. position: relative; position: absolute; bottom: 25px; right: 15px; Ylläolevassa esimerkissä emo-elementti on määritetty komennolla "position: relative;", jolloin sen sijainti on siis suhteellinen. Tytär-elementti on puolestaan absoluuttinen emo-elementtiin nähden, jolloin sen sijainti voidaan määrittää koordinaateilla "bottom" ja "right". Positionkomennolla siis toisin sanoen määritetään, minkä elementin suhteen tietty elementti voidaan sijoittaa. Jos asia ei ollut vielä riittävän hankala ymmärtää, niin soppaan voidaan lisätä vielä seuraava komento. div { position: relative; z-index: 3; } 10 / 12

11 Z-indexillä voidaan määrittää elementin sijainti syvyyssuunnassa. Tämän komennon avulla päällekäisten elementtien järjestystä voidaan muuttaa. Isompi arvo siirtää elementtiä eteenpäin ja pienempi arvo taaksepäin, jolloin elementti jää muiden taakse piiloon. Normaalisti tytärelementillä on aina emo-elementtiään suurempi z-index, jolloin tytär-elementti jää automaattisesti emo-elementtinsä etupuolelle näkyviin. Seuraavassa esimerkissä esitetään, miten position ja z-index -komentoja voidaan käyttää tehokkaasti yhdessä. Ylläolevissa esimerkeissä on käytetty täsmälleen samaa XHTML-rakennetta, mutta elementtien järjestys on muutettu z-indexillä. Valkoinen elementti on määritetty komennolla "position: relative;" ja värilliset elementit ovat absoluuttisia tämän suhteen. Elementtien rakenne on seuraava. 11 / 12

12 Powered by TCPDF ( Tee-se-itse.fi Tähän mennessä esiteltyjen komentojen avulla pääsee jo hyvin pitkälle kotisivujen ihmeellisessä maailmassa. Joskus voi tarvita muitakin komentoja, joita ei ole esitelty tässä artikkelissa, mutta Internet on onneksi pullollaan CSS:n ja XHTML:n liittyviä ohjesivuja, joten ongelmat on helppo ratkaista. Tämän artikkelisarjan seuraavassa osassa kerrotaan, miten aiemmin opetetut asiat voidaan nitoa yhteen ja luoda kotisivut helposti. 12 / 12