CSS (Cascading Style Sheets) - Luento 2
- Luentotaltiointi
- Laatikkomalli (engl. box model)
- CSS-ominaisuuksia asemointia varten
- Asemointi
- Liu'utus
- Suhteellinen asemointi (engl. relative positioning)
- Absoluuttinen asemointi (engl. absolute positioning)
- Kiinnitetty asemointi (engl. fixed positioning)
- Asemointi z-suunnassa
- 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.
Luentotaltiointi
- sovellukset02.wmv 82M
- sovellukset02.avi 218M
- sovellukset02.mp3 30M
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 koko
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
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
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.
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
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%;
}
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.
Asemointiesimerkkejä
- Keskitys pystysuunnassa
- Erilaisia asemointeja
- asemointi.html - lähdekoodi
- asemointi.css - css
- Sarakejako
- Liukuva sarakkeiden määrä esim. kuvagalleriassa
- Lomake
Käyttäjien kommentit