Skip to content. | Skip to navigation

Jyväskylän yliopiston Koppa

HUOM! Kopan käyttö päättyy 31.7.2024! Lue lisää.


Navigation

CSS-tyylejä asemoinnin avuksi

by Tanja Tuulikki Välisalo last modified Nov 27, 2014 07:58 AM

 

OminaisuusToimintoArvotHuomioitavaa
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
right

none

inherit

Esim.
p {float: right}

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
hidden
scroll
auto

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
[luku]
inherit

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)
auto
crosshair
default
pointer
help
jne.

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.