Valitsimet ja asemointia CSS:llä - Demo 3
Mallivideot
- valitsimet.wmv 10.5M
- galleria.wmv 70.3M
Ongelmia videon katselussa?
Näissä demoissa tutustutaan valitsimiin sekä WWW-sivun ulkoasun asemointiin CSS:n avulla.
Jos et vielä ehtinyt tehdä loppuun demo 2:n tehtäviä, niin viimeistele ne ennen näihin tehtäviin siirtymistä.
Valitsimet
Seuraavaksi harjoitellaan erilaisten CSS-valitsimien käyttöä. Tee seuraavat aloitustoimenpiteet:
- Kopioi itsellesi W:-asemalle mallitiedosto johonkin hakemistoon (klikkaa oikealla ja Save Link As...). Et saa tässä tehtävässä tehdä mitään muutoksia edellä tallentamaasi malli.html-tiedostoon.
- Aloita uusi tyhjä tekstitiedosto (esim. HTML-Kitillä) ja tallenna se valitsimet.css-nimellä samaan hakemistoon malli.html-tiedoston kanssa W:-asemalle.
- Avaa malli.html Firefox-selaimeen.
- Avaa Firebug-laajennuksesta dokumentin puunäkymä (Tools | Firebug | Open Firebug). Dokumentin rakenne ratkaisee, mitä valitsimia on käytettävä.
- Avaa Web Developer -työkalupalkista CSS | Edit CSS. Saat tässä tehtävässä tehdä muutoksia ainoastaan näihin CSS-tyyleihin ja tallentaa ne valitsimet.css-tiedostoon.
Toteuta seuraavat ulkoasumuutokset CSS-valitsimien ja -ominaisuuksien avulla. Valitsimista löytyy esimerkkejä luento 4:n sivulta.
- Muuta jokaisen tekstikappaleen ensimmäinen kirjain kaksi kertaa oletuskokoaan suuremmaksi.
- HUOM! Web Developer ei osaa näyttää heti oikein tässä kohdassa tarvittavaa valitsinta, joten kirjoitettuasi mielestäsi oikean valitsimen, tallenna tyylitiedosto ja lataa sivu uudelleen huomataksesi toimiiko valitsin oikein.
- Muuta "Aliquam venenatis ipsum" -alkuisen kappaleen taustaväriksi hopea. Vinkki: tutki
dokumentin rakennetta
body
-elementin sisältä Firebugin avulla. - Muuta tekstikappaleiden sisällä olevien
strong
-elementtien väri punaiseksi ja kaikkialla muualla olevienstrong
-elementtien väriksi vihreä. - Muuta navigointidivin sisällä oleva sed neque -teksti keltaiseksi.
- Muuta taulukon joka toisen sarakkeen taustaväriksi #000000 ja joka toisen taustaväriksi #555555.
Vinkki: tutki Firebugilla mitä elementtejä taulukkorivien sisältä löytyy.
- Millä tavalla tämä olisi ollut helpompi tehdä, jos olisit saanut tehdä muutoksia myös XHTML-tiedostoon?
- Muuta taulukon otsikkorivin tekstin väri mustaksi, ensimmäisen sisältörivin tekstin väri keltaiseksi ja loppujen rivien tekstin väri valkoiseksi.
- Aseta dokumentin ensimmäisen tekstikappaleen (listaa edeltävä tekstikappale) ympärille musta raja.
- Muuta kaikkien niiden linkkien väri vihreäksi, joissa on
title
-attribuutin arvona sana orci.
Galleria
Tehdään Nanonanon sivustoon galleria-sivu, johon tulee modernia tietokonetaidetta esittäviä pikkukuvia myyntiin:
- Lataa galleriakuvat.zip ja pura paketti W:\www\galleria\-hakemistoon.
- Luo uusi XHTML-dokumentti ja tallenna se index.html-nimellä galleria-hakemistoon.
- Lisää
link
-elementillä viite sivuston juurihakemistossa olevaan demo2.css-tiedostoon. Lisää myös galleriasivulle pääotsikko ja jokin lyhyt johdantotekstikappale. - Kopioi esim. linkit-hakemistossa olevasta index.html-tiedostosta lohkot
<div class="navbartop">...</div>
ja<div class="navbar">...</div>
juuri luomasi dokumentinbody
-osaan. Muuta murupolku oikeaksi Galleria-sivulle sekä täydennä navigointilohkon sisältämät navigointilinkit kuntoon. Lisää linkki Galleria-sivulle myös muiden hakemistojen index.html-tiedostojen navigointipalkkeihin. - Lisää Galleria-sivun body-osaan seuraavalla tavalla viisi lohkoa, joissa on galleriahakemiston kuvat ja näiden kuvatekstit:
<div class="galleriakuva"> <img alt="Viitatorni ja järvimaisema" src="viitatorni.jpg" /> <p>Viitatorni</p> </div>
- Tutki miltä sivu näyttää nyt selaimessa.
Liu'utus
Muotoillaan gallerian kuvalohkot tasavälisiksi ja selaimen koon mukaan vierekkäin rivittyviksi.
- Muokkaa demo2.css-tiedostoa. Liu'uta .galleriakuva-lohkot vasempaan laitaan.
- Käy Nanonanon kotisivujen galleria-sivulla. Tutki mikä on suurimman kuvan leveys ja korkeus. Lisää .galleriakuva-lohkolle ominaisuudet width ja height, joihin sijoitat arvot, jotka ovat hieman yli suurimman kuvan koon. Voit käyttää tässä tapauksessa px-arvoja (miksi?). Huomioi lohkon korkeudessa myös kuvatekstin tarvitsema tila.
- Keskitä kuva lohkon sisällä vaakasuunnassa. Koska kuva on tekstitason elementti, niin sen voi keskittää text-align-ominaisuudella.
- Testaa miltä galleria näyttää nyt. Muokataan vielä kuvatekstejä. Lisää demo2.css-tiedostoon
lohko, joka vaikuttaa vain galleriakuva-lohkon sisällä olevaan tekstilohkoon. Tee lohkolle seuraavat määritykset:
- Määrää tekstilohkolle korkeus. Korkeus kannattaa määrittää suhteessa fontin kokoon, sillä se saattaa vaihdella.
- Keskitä teksti.
- Määrää tekstin ylivuotava osuus piiloon.
- Poista marginaalit (margin) ja täytteet (padding).
- Pienennä fonttikokoa hieman.
- Rivitetään kuvat vielä oikealla olevan navigointilohkon alapuolelle. Tämä onnistuu clear-ominaisuudella. Voit laittaa lohkoille myös pienen ylämarginaalin, jotteivät ne mene ihan kiinni navigointilohkoon.
- Tarkista miten clear-ominaisuus toimii Internet Explorerilla. Jos kuvat menevät selaimen oikeasta reunasta yli,
niin tällöin kuvat täytyy laittaa vielä oman lohkon sisälle, esim.
<div class="galleriakuvat">...</div>
, ja siirtää clear-ominaisuus tälle lohkolle. Uusimmilla IE-selaimilla ongelmaa ei enää ole.
Ponnahdusteksti
- Lisää pariin kuvaan kuvatekstin alle kappale, joka kertoo, että kuva on myyty:
<p class="huomio">! Myyty</p>
- Siirrä absoluuttisella asemoinnilla huomio-teksti galleriakuvan keskelle. Laita taustan väriksi keltainen.
- Siirtyikö teksti keskelle kuvaa vai keskelle jotain muuta? Huomaa, että positiointi
tapahtuu suhteessa lähimpään position-ominaisuudella asemoituun
esivanhempielementtiin. Tällöin .galleriakuva-lohkolle
on annettava ilman paikkamääreitä seuraava ominaisuus:
position: relative;
- Muuta ensimmäisen merkin väriksi punainen ja kasvata sen kokoa kaksinkertaiseksi. Firefoxilla et saa tätä välttämättä toimimaan, koska uusin Firefox ei näytä huomioivan huutomerkkiä merkiksi, eli first-letter-pseudoluokka valitsee Firefoxissa vain kirjaimet. IE:ssä tämä sen sijaan toiminee.
- Piilota
display
-ominaisuudella huomio-lohkot. - Tee uusi valitsin, joka viittaa huomio-lohkoon vain
siinä tapauksessa, että käyttäjä osoittaa galleriakuva-lohkoa. Tarvitset
:hover
-pseudoluokkaa. Tee lohkosta näkyvä display-ominaisuudella. Lisää lohkolle lisäksi hieman korkeutta (esimerkiksi height: 2.5em;), jotta kaksinkertaiseksi kasvatettu huutomerkki mahtuu siihen. - Testaa viemällä hiiren osoitinta kuvien päälle ja pois päältä. :hover ei toimi vanhoissa Internet Explorereissa (IE 7-9:ssa toimii) muille elementeille kuin linkeille.
- Poista XHTML-dokumentista huutomerkit Myyty-sanan edeltä ja kokeile lisätä huutomerkki automaattisesti CSS:n avulla jokaisen huomio-lohkon alkuun. Tämä ei välttämättä toimi vanhemmissa Internet Explorereissa. Internet Explorerin versioissa 8-9 before-pseudoluokka kuitenkin toimii, joten huutomerkin värin muuttaminen punaiseksi ja koon kasvattaminen voisi olla järkevää siirtää tähän luokkaan (jotta se toimisi myös Firefoxissa).
Käyttäjien kommentit