CSS (Cascading Style Sheets) - Luento 2

• Luentotaltiointi
• Demoryhmien toteutuminen
• Laatikkomalli (engl. box model)
• CSS-ominaisuuksia asemointia varten
  • Elementin raja, täyte ja marginaali
  • Elementin koko
  • Minimin ja maksimin määrittely elementin leveydelle ja korkeudelle
  • display-ominaisuus
  • Yleinen lohko - div
• Asemointi
  • Asemointi position-ominaisuudella
  • Asemoinnin suunnittelu
• Liu'utus
• Absoluuttinen asemointi (engl. absolute positioning)
• Kiinnitetty asemointi (engl. fixed positioning)
• Suhteellinen asemointi (engl. relative positioning)
• Asemointi z-suunnassa
• Asemointiesimerkkejä
• Lisätietoja ja esimerkkejä

Seuraavassa tarkastellaan CSS:n laatikkomallia, eräitä CSS:n ominaisuuksia sivun asemointia varten sekä erilaisia tapoja sivun asemointiin CSS:llä Cascading Style Sheets, level 2 (CSS2) -suosituksen mukaisesti.

Demoryhmien toteutuminen

Demoryhmät To Demo 12 (torstaisin 12-14) ja Pe Demo 10 (perjantaisin 10-12) toteutuvat. Muut demoryhmät on peruutettu. Jos olit ilmoittautunut peruutettuun demoryhmään, siirrä ilmoittautumisesi jompaan kumpaan toteutuvaan demoryhmään. Demot alkavat siis huomenna.

Laatikkomalli (engl. box model)

CSS:n laatikkomalli määrittää jokaisen elementin laatikoksi, jolla on marginaali, raja, täyte ja sisältö.

Sivulla olevien elementtien rajat saat näkyviin esimerkiksi asentamalla Firefoxiin Web Developer -pluginin. Laatikkomallin saa näkyviin Web Developerissa valinnalla Outline | Outline Block Level Elements.

CSS-ominaisuuksia asemointia varten

Elementin raja, täyte ja marginaali

• Elementin marginaalit
• Elementin täyte
• Elementin rajan ominaisuudet
  • border-width
  • border-color
  • border-style
  • border

Esimerkki CSS:n editoimisesta (raja, täyte ja marginaali) dynaamisesti Web Developerin avulla

Elementin koko

• width
• height

Peruskorkeuden määrittää aina sisällön viemä korkeus! Esim. olkoon div-elementille annettu height: 100%; ja div on suoraan bodyn sisällä. Tällöin div-elementin korkeus 100 % vanhempielementin eli bodyn koosta. Bodyn korkeus määräytyy sen sisältämän sisällön mukaan, eli jos tekstiä on vähän, niin div:in korkeus jää pieneksi, eikä esim. koko ruudun korkuiseksi.

Esimerkki CSS:n editoimisesta (elementin leveys ja korkeus) dynaamisesti Web Developerin avulla

Minimin ja maksimin määrittely elementin leveydelle ja korkeudelle

• Esimerkki minimin ja maksimin määrittelystä
  • minmax.html
  • minmax.css

display-ominaisuus

display-ominaisuudella voidaan muuttaa esimerkiksi tekstikappaleen näkymiseen liittyviä ominaisuuksia. Tekstikappaleesta voidaan tehdä visuaalisesti osa toista tekstikappaletta tai sen näkyminen voidaan estää kokonaan. display-ominaisuudelle voidaan asettaa mm. seuraavia arvoja:

• block-arvolla elementti käyttäytyy lohkotason (block) elementin tavoin.
• inline-arvolla elementti käyttäytyy tekstitason (inline) elementin tavoin.
• list-item-arvolla elementti käyttäytyy lista-alkion tavoin.
• none-arvolla elementin sisältöä ei näytetä ollenkaan ja elementti ei vaikuta mitenkään ympäröiviin elementteihin.

Esimerkki CSS:n editoimisesta (elementin näkyvyys) dynaamisesti Web Developerin avulla

Yleinen lohko - div

div-elementti on yleinen lohkotason elementti, jota käytetään merkitsemään erilaisia lohkoja. Esimerkiksi CSS-tyylejä käytettäessä div-elementtiä käytetään, jos ei löydetä vastaavaa kappaletason elementtiä. Yleisin käyttökohde div-elementille on sivun asemointiin tarvittavien lohkojen tekeminen. Seuraavassa esimerkissä on nähtävillä erään navigointipalkin lähdekoodi:

<div id="navbartop" class="navbartop">    
  <ul>
     <li><a accesskey="l" title="Luennot (ALT-l)" href="../../luennot/">Luennot</a></li>
     <li><a accesskey="d" title="Demot (ALT-d)" href="../../demot/">Demot</a></li>
     <li><a accesskey="h" title="Harjoitustyöohje (ALT-h)" href="../../harkka/">Harjoitustyö</a></li>
     <li><a accesskey="m" title="Kurssimoniste (ALT-m)" href="/doc/#www">Moniste</a></li>
     <li><a accesskey="c" title="Chat (ALT-c)" href="/chat.html">Chat</a></li>
     <li><a accesskey="f" title="FAQ-palsta (ALT-f)" href="/faq/www.html">FAQ</a></li>
     <li><a accesskey="a" title="Linkkisivu (ALT-i)" href="../../linkit/">Linkit</a></li>
     <li><a accesskey="o" title="Palautelomake (ALT-o)" href="/palaute.html">Palaute</a></li>
     <li><a accesskey="e" title="Ohje etäopiskelijoille (ALT-e)" href="/www/ohje.html">Etäopiskelu</a></li>
  </ul>
</div>

Asemointi

Normaalisti block-level-elementit järjestyvät allekkain äitilohkon vasempaan laitaan ja inline-elementit vierekkäin, kunnes äitilohkon leveys on täyttynyt. CSS-ominaisuuksilla voidaan kuitenkin irrottaa tietyt elementit perusjärjestyksestä ja asemoida ne sivulle uuteen paikkaan.

Asemointia voidaan tehdä taulukoilla (ei suositeltava), elementtien marginaaleilla, float-ominaisuudella ja CSS2:n position-ominaisuudella. Myös kehyksien (engl. frame) käyttöä voitaisiin ajatella asemointina, mutta niiden käyttö ei ole sallittua mm. esteettömyys- ja saavutettavuusongelmien vuoksi.

Asemointi position-ominaisuudella

position-ominaisuudella voidaan määritellä kuinka elementti sijoittuu näytölle. Erilaisia arvoja ovat seuraavat:

• static-määrittää sijoittumisen normaaliksi elementin normaaliin paikkaan nähden.
• relative-määrittää sijoittumisen suhteelliseksi elementin normaaliin paikkaan nähden.
• absolute-määrittää sijoittumisen absoluuttisesti sivulle. Sijoittuminen lasketaan sen asemoidun äiti-elementin paikan ja koon suhteen, jossa lohko sijaitsee.
• fixed-kiinnittää positioinnin siten, että elementtiä ei vieritetä näytöllä ja positiointi tapahtuu aina koko näytön suhteen eikä äiti-elementin suhteen.

Positioinnin yhteydessä määritellään usein myös seuraavat ominaisuudet:

• top-ominaisuudella voidaan määritellä elementin etäisyys yläreunasta.
• bottom-ominaisuudella voidaan määritellä elementin etäisyys alareunasta.
• left-ominaisuudella voidaan määritellä elementin etäisyys vasemmasta reunasta.
• right-ominaisuudella voidaan määritellä elementin etäisyys oikeasta reunasta.
• z-index-ominaisuudella voidaan määritellä elementin taso ruudulla. Mitä suurempi arvo, niin sitä lähempänä elementti on käyttäjää.

Asemoinnin suunnittelu

CSS2 antaa useita erilaisia mahdollisuuksia WWW-sivujen visuaaliseen muotoilemiseen. Käytetystä tavasta huolimatta sivu kannattaa suunnitella seuraavan ohjeistuksen mukaan:

• Mieti erilaisten sivun elementtien (navigointi, koristeet, sisältö) paikat tarkkaan.
• Jaa sivun rakenne loogisiin lohkoihin. Lohkorakenne voi olla esimerkiksi seuraava:
  • Yläreunassa on lohko perusnavigoinnille ja ylätunnistetiedoille.
  • Sivun alaosa muodostuu kahdesta lohkosta.
    • Vasemmassa reunassa on tarkempi linkkilista asiakirjan sisältöön.
    • Oikeassa reunassa on sivun varsinainen sisältö.
• Jokainen edellisistä lohkoista kannattaa merkitä div-elementillä.
• Jos jokin lohko halutaan asemoida absoluuttisesti/kiinteästi, niin myös kaikki muut lohkot on syytä asemoida.
• Jos aiot käyttää yhteen lohkoon float-ominaisuutta, niin tee koko sivun pääasemointi float-ominaisuudella.
• Asemoitujen/leijutettujen lohkojen sisällä voi edelleen käyttää asemointia tai float-ominaisuutta.

Liu'utus

Kuvien liu'utus (esimerkki)

• float
• clear

Absoluuttinen asemointi (engl. absolute positioning)

Absoluuttisessa (engl. absolute) asemoinnissa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla absoluuttisesti tai kiinteästi asemoidun isä-elementin sisällä välittämättä normaalista sijainnista.

Absoluuttisesti asemoitu elementti vierii dokumentin sisällön mukana.

.vasenylanurkka {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 30%;
  height: 10%;
}

Vierivä kehyksien korvike

• abs.htm - lähdekoodi
• abs.css - lähdekoodi

Kiinnitetty asemointi (engl. fixed positioning)

Kiinnitetyssä (engl. fixed) asemoinnissa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla absoluuttisesti näyttöalueen sisällä.

Asemoitu elementti EI vieri dokumentin sisällön mukana.

Kiinnitetty asemointi ei toimi Internet Explorerissa 6:ssa, mutta versiossa 7 toimii.

.vasenylanurkka {
  position: fixed;
  top: 10%;
  left: 10%;
  width: 30%;
  height: 10%;
}

Kiinnitetty asemointi -esimerkki

• navbar.htm - lähdekoodi
• navbar.css - lähdekoodi

Suhteellinen asemointi (engl. relative positioning)

Suhteellisessa (engl. relative) asemoinnissa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla suhteutettuna normaaliin sijaintiinsa.

.up {
  position: relative;
  top: -1em;
}

• relative.htm - lähdekoodi
• relative.css - lähdekoodi

Asemointi z-suunnassa

z-index-ominaisuudella voidaan määritellä elementin taso ruudulla. Mitä suurempi arvo, niin sitä lähempänä elementti on käyttäjää.

• z-index.html - lähdekoodi
• z-index.css - lähdekoodi

Asemointiesimerkkejä

• Erilaisia asemointeja
  • asemointi.html - lähdekoodi
  • asemointi.css - css
• Sarakejako
  • columns.htm
  • columns.css
• Liukuva sarakkeiden määrä esim. kuvagalleriassa
  • galleria.html
  • kuvagalleria.css
• Lomake
  • form.htm
  • form.css
    

Lisätietoja ja esimerkkejä

• Esimerkki taulukkotaitosta
• Esimerkki float-asemoinnista
• Esimerkki absoluuttisesta asemoinnista
• Esimerkki sivun asemoinnista reunuksien avulla
• Miten saada samankorkuiset sarakkeet?
• Kolmen sarakkeen layoutit