CSS-tyylejä asemoinnin avuksi
Ominaisuus | Toiminto | Arvot | Huomioitavaa |
---|---|---|---|
MITAT | |||
height | Elementin korkeus | auto [%] [mitta] |
|
width | Elementin leveys | auto [%] [mitta] |
Esim. h1 {width: 50%} |
max-height | Elementin maksimikorkeus | auto [%] [mitta] |
Ei toimi Internet Explorerissa. |
min-height | Elementin minimikorkeus | auto [%] [mitta] |
Ei toimi Internet Explorerissa. |
max-width | Elementin maksimileveys | auto [%] [mitta] |
Ei toimi Internet Explorerissa. Esim. p {max-width: 400px} |
min-width | Elementin minimileveys | auto [%] [mitta] |
Ei toimi Internet Explorerissa. |
line-height | Tekstirivin korkeus | auto [%] [mitta] |
|
SIJOITTELU | |||
float | Määritellään kelluuko elementti niin, että toiset elementit kietoutuvat sen ympärille |
left none inherit |
Esim. |
clear | Määrittelee saako elementin sivuilla olla kelluvia (float) elementtejä |
left right both none inherit |
Käytetään yleensä silloin, kun dokumentissa on ainakin yhdellä elementillä ominaisuutena float. |
display | Määrittää elementin ulkoasun |
none block inline |
Block-arvolla muodostuu tyhjä rivin ennen ja jälkeen elementin. |
position | Elementin sijainti |
static relative absolute fixed |
Static on oletussijainti. Muiden arvojen kanssa käytetään tarkentavia ominaisuuksia top, right, bottom ja left (ks. alla). |
top | Elementin yläreunan etäisyys sen sisältävän elementin yläreunasta | auto [%] [mitta] |
Käytetään yhdessä position-ominaisuuden kanssa. |
right | Elementin oikean reunan etäisyys sen sisältävän elementin oikeasta reunasta | auto [%] [mitta] |
Käytetään yhdessä position-ominaisuuden kanssa. |
bottom | Elementin alareunan etäisyys sen sisältävän elementin alareunasta | auto [%] [mitta] |
Käytetään yhdessä position-ominaisuuden kanssa. |
left | Elementin vasemman reunan etäisyys sen sisältävän elementin vasemmasta reunasta | auto [%] [mitta] |
Käytetään yhdessä position-ominaisuuden kanssa. |
overflow | Määrittelee tapahtuman elementin ylittäessä sille varatun tilan |
visible |
Oletusarvona on arvo visible eli ylimenevän osan jääminen näkyviin. Tällä voidaan luoda esimerkiksi tekstilaatikko, jonka sisältöä voi vierittää esiin. |
z-index | Määrittelee position-ominaisuudella päällekkäin sijoiteltujen elementtien järjestyksen. |
auto |
Mitä suurempi luku, sitä lähempänä katsojaa elementti on. Käytetään aina yhdessä position-ominaisuuden kanssa. |
vertical-align | Elementin keskitys pystysuunnassa | baseline sub super top text-top middle bottom text-bottom [%] [mitta] |
|
cursor | Kohdistimen (kursorin) tyyppi |
url(URL) |
Mahdollistaa yleisen oletuskursorin (nuolen) korvaamisen jollain muulla, esim. ristillä (crosshair), kädellä (pointer) tai kysymysmerkillä (help). |
Mitat
Mitoilla voidaan määritellä elementtien korkeus ja leveys, jotka merkitään seuraavasti:
tyyli { width: arvo; height: arvo}
Aiemmin kurssilla käsiteltiin mittayksiköitä ja niiden kirjoitustapoja. Keskitytään nyt elementtien koon määrittelyn käytänteisiin.
Absoluuttinen
Kun elementille määritellään absoluuttinen koko, käytetään sellaisia mittayksiköitä kuin px, mm, cm jne. Tällöin elementti on aina samankokoinen näytön koosta riippumatta.
Esimerkki. Tekstikappaleen leveydeksi määritellään 400 px. Jos käytössä on perusnäyttö, jonka resoluutioksi on asetettu 1280 x 1024 pikseliä ja WWW-selainta käytetään koko näytön kokoisena, niin tekstikappale vie noin kolmanneksen näytön leveydestä. Tavallisen kännykän näytölle tekstikappale ei sen sijaan leveyssuunnassa mahdu. Merkintä olisi muotoa:
P { width: 400px }
Suhteellinen
Koska WWW-sivuja selaillaan useilla erikokoisilla näytöillä, on yleensä kätevintä, että sivun eri osat skaalautuvat näytön koon mukaan. Tämä onnistuu parhaiten määrittelemällä elementtien koot suhteellisina. Tällöin mittayksikkönä on % tai em.
Prosentteja käytettäessä elementin kooksi tulee kyseinen prosenttiosuus elementin oletuskoosta. Ilman asemointia elementit asettuvat WWW-selaimessa allekkain. Niiden leveys on yleensä lähes 100 % WWW-selaimen leveydestä. (Pienen osan vievät oletusmarginaalit.) Tällaisia elementtejä ovat muun muassa otsikkoelementit ja tekstikappale-elementti.
Esimerkki. Tekstikappaleen leveydeksi määritellään 75 %. Käytännössä tekstikappaleen leveys on noin ¾ näytön leveydestä millä tahansa näytöllä.
P { width: 75% }
Tehtävä
Tarkastellaan virusinfo-tiedostoa WWW-selaimessa. Tekstikappaleet ovat niin leveitä, että niiden luettavuus kärsii. Korjataan asia.
- Anna #sisalto-tyylin leveydeksi 60 %.
- Tarkastele muutosta esikatselussa tai WWW-selaimessa. Onko tekstiä nyt miellyttävämpi lukea?
Jos käytössä on pieni näyttö, ja selaimen vasemmassa reunassa on auki vielä kirjainmerkkipaneeli, voi div-elementti olla jo epämukavan kapea. Voit kokeilla tätä pienentämällä selainikkunaa reunoista raahaamalla. Ongelman välttämiseksi määritellään div-tyylille vähimmäisleveys.
- Lisää #sisalto-tyyliin vielä min-width-ominaisuus. Anna sen arvoksi 300px. Nyt div-elementin leveys on 60 % selainikkunan leveydestä, mutta aina vähintään 300 pikseliä. Koodi näyttää nyt tältä
- Kokeile, miten div-elementin sisältö nyt käyttäytyy, kun pienennät selainikkunaa.
- Muista tallentaa usein!
#sisalto-tyylillä on nyt neljä ominaisuutta: taustaväri, täyte, leveys ja vähimmäisleveys.
Sijoittelu
Sijoitteluominaisuuksien avulla voidaan määritellä elementtien sijainnit suhteessa toisiinsa ja/tai selainikkunaan.
Tehtävä
Ensimmäiseksi asetellaan virusinfo-sivulla sijaitseva kuva kauniimmin tekstin joukkoon sivun oikeaan laitaan.
- Koska kuvia tulee jatkossa olemaan sivustolla enemmänkin, annetaan kuvaelementille oma aliluokka oikea
- Luo tyylitiedostoon tyyli .oikea.
- Anna tyylille ominaisuus float ja sille arvo right. Elementti sijoittuu nyt oikealle suhteessa p-elementtiin, jossa se sijaitsee.
- Tarkastele html-dokumenttia selainnäkymässä.
- Anna kuvatyylille vielä pieni suhteellinen marginaali (esim. 2 %) vasemmalle puolelle, jotta kuva ei olisi aivan kiinni tekstissä.
- Anna kuvalle myös reunus, jonka väri poikkeaa taustan väristä, ja täytettä, esim. 1 %.
Sivun sisällön keskittäminen
Tehtävä
Asemoidaan kaikki sisältö pääotsikkoa myöten sivun keskelle. Luodaan siis div-elementti, jonka sisälle saadaan kaikki sivun sisältö, jotta saadaan keskitettyä kaikki kerralla.
- Sulje koko virusinfo.html-sivulla oleva html-elementin sisältö oman div-elementtinsä sisälle. Anna div-elementille arvoksi sivu. Voit tarkistaa oheisesta kaaviosta div-elementtien keskinäiset suhteet.
- Luo CSS-dokumenttiin uusi tyyli #sivu.
- Siirrä leveysmääritykset #sisalto-tyylistä #sivu-tyyliin.
- Määritä uudelle tyylille automaattisesti määräytyvät marginaalit vasemmalle ja oikealle. (Marginaalien arvona on siis auto.)
- Tallenna ja esikatsele.
Minkä tahansa elementin keskittäminen edellyttää siis elementin leveyden määrittämistä ja automaattisesti määräytyviä marginaaleja.
Marginaalit ja täytteet layoutissa
Kun ryhdytään muokkaamaan sivun asettelua hiemankin monimutkaisemmaksi div-elementtien avulla, on ensimmäisenä syytä huomata, että www-selaimet lisäävät useisiin lohkotason elementteihin oletusmarginaalia ja -täytettä. Toisaalta ne myös tulkitsevat marginaaleja ja täytteitä hieman eri tavoin: osa selaimista sisällyttää täytteen elementin leveyteen, osa taas lisää sen elementin ilmoitettuun leveyteen. Kun elementtien sijainteja ja kokoja ryhdytään tarkasti määrittelemään, on usein tarpeen poistaa oletusmarginaalit ja -täytteet.
Oletusmarginaalit ja/tai -täytteet voidaan poistaa kolmella tavalla:
1. poistamalla oletusarvot koko dokumentista merkinnällä
* { margin:0; padding:0 }
2. poistamalla oletusarvot tietystä elementistä yleensä, esim. div-elementeistä
div { margin:0; padding:0 }
3. poistamalla oletusarvot tietysti yksittäisestä elementistä tarpeen mukaan, esim. nimetystä divelementistä
div.sisalto { margin:0; padding:0 }
Materiaalin on laatinut Tanja Välisalo.