CSS (Cascading Style Sheets)

• Luentotaltiointi
• Laatikkomalli (engl. box model)
• CSS-ominaisuuksia asemointia varten
  • Elementin koko
  • display-ominaisuus
  • Yleinen lohko - div
  • Elementin raja, täyte ja marginaali
  • Collapsing margins
  • Harjoitustehtävä
• Asemointi
  • Asemointi position-ominaisuudella
• Liu'utus
  • Harjoitustehtävä
• Suhteellinen asemointi (engl. relative positioning)
• Absoluuttinen asemointi (engl. absolute positioning)
  • Harjoitustehtävä
• Kiinnitetty asemointi (engl. fixed positioning)
• Asemointi z-suunnassa
  • Asemoinnin suunnittelu
• Media Queries
• 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.

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.

Basic CSS Box Model demo

CSS-ominaisuuksia asemointia varten

Elementin koko

• width
• height

Korkeus ja leveys voidaan määrätä lohkotason elementeille mutta ei tekstitason elementeille. Tekstitason elementin korkeus määrätään rivin korkeudella (line-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 on 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. Asemoituja elementtejä ei normaalisti lasketa sisällöksi eivätkä ne siis kasvata elementin korkeutta.

Esimerkki elementin leveys ja korkeus

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.

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>

Elementin raja, täyte ja marginaali

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

Esimerkki raja, täyte ja marginaali

Collapsing margins

Peräkkäiset pystymarginaalit yhdistetään ja vain suurempi marginaalimääritys jää voimaan. Tämä pätee vain elementeille joita ei ole asemoitu.

collapsing margins esimerkki

Harjoitustehtävä

Tee esimerkkidokumentista samannäköinen kuin mallikuvasta css:n avulla. Et saa muuttaa dokumentin XHTML:ää ja saat käyttää vain display-, margin-, width-, border- ja padding-ominaisuuksia.

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.

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ää.

Liu'utus

Kuvien liu'utus (esimerkki)

• float
• clear

Harjoitustehtävä

Tee esimerkkidokumentista samannäköinen kuin mallikuvasta css:n avulla. Et saa muuttaa dokumentin XHTML:ää. Käytä tällä kertaa float-ominaisuutta.

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

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

Harjoitustehtävä

Tee esimerkkidokumentista samannäköinen kuin mallikuvasta css:n avulla. Et saa muuttaa dokumentin XHTML:ää. Käytä tällä kertaa position-ominaisuutta.

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

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

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.

Media Queries

Jos haluaa sivunsa ulkoasun mukautuvan hyvin erilaisiin ympäristöihin niin voi käyttää apuna CSS3:en media queries -ominaisuutta.

Media queries demo

Media queries in Firefox

Asemointiesimerkkejä

• Keskitys pystysuunnassa
• 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