CSS-mediatyypit ja asemointi - Luento 6

Tutustutaan mediatyyppikohtaisiin CSS-asetuksiin ja jatketaan asemointiesimerkkejä.

Luentotaltiointi

Ongelmia videon katselussa?

Mediatyypit

Erilaiset mediatyypit

Sivun ominaisuuksia

Sivun ominaisuuksilla voidaan hallita dokumenttia sivutettuna. Seuraavassa muutamia sivuttamiseen liittyviä ominaisuuksia.

Esimerkkejä mediatyyppien käytöstä

Asemointiesimerkkejä

Perusongelma kanssa on saada aikaan monisarakkeinen sivusommittelu.

Taulukkotaitto

Float-asemointi

Absoluuttinen asemointi

Samankorkuiset sarakkeet

Linkkejä:

CSS-vinkkejä

Lomake-elementit ja CSS

Lomake-elementtien muotoilu CSS:llä: Älä tee.

Lomake-elementtien ulkomuotoilu CSS:llä on liian epävarmaa joten sitä ei juurikaan kannata tehdä. Enintään voi yrittää vaihtaa kirjasimen tyyppiä, kokoa ja tekstin ja taustan väriä. Liiallinen lomake-elementtien ulkomuodon muuttaminen oletuksesta poikkeavaksi aiheuttaa vain käytettävyysongelmia.

IE6 ja CSS

Jos haluat jonkin CSS-ominaisuuden toimivan vain muilla selaimilla kuin IE:llä, käytä valitsinta >, joka valitsee tietyn elementin lapsielementin. Valitsin ei toimi IE:ssä ja tekstin yhteenkirjoittamalla IE jättää nämä määrittelyt varmasti huomiotta. Merkitse tyylitiedostoon esimerkiksi seuraavasti:

html>body>.notforie {
/* Tänne määritykset, joita käytetään välittömästi body-elementin sisällä
olevassa elementissä, jonka luokka on notforie */
}
p>strong {
/* Tänne määritykset välittömästi tavallisen kappaleen sisällä olevalle 
strong-elementille, jota ei haluta näyttää IE:ssä */
}
* html body div#forie {
/* Tänne määritykset lohkolle <div id="forie">...</div>, 
jotka halutaan toimivan pelkästään IE:n vanhemmilla versioilla. */
}

IE laskee väärin lohkojen koon

IE ja lohkojen koko

Huomaa, että IE7 laskee koot oikein.

IE6 ja position: fixed

Kiinnitetty asemointi ei toimi oikein IE6:ssa. Ongelman voi kiertää seuraavan esimerkin avulla.

position: fixed toimii oikein IE7:ssä.

Standard & Quirks Mode

XHTML-dokumentin alussa oleva dokumenttityypin määritys määrää sen millä tavalla CSS:ssä ja muita ulkoasumuotoiluja tulkitaan.

Floatattu kuva valuu lohkon ulkopuolelle

Kuva ei mahdu lohkoon

Lisätietoa

CSS 2.1:n muutokset CSS2-suositukseen

CSS 2.1 korjaa muutamia CSS2-suosituksessa olleita virheitä ja poistaa joitain ominaisuuksia joita ei ole tuettu. Oleellisimmat muutokset:

CSS3

CSS3 on tekeillä oleva uusin versio CSS-suosituksesta. CSS3:ssa ominaisuudet jaetaan moduuleihin joista ohjelmat voivat valita mitä moduuleja haluavat tukea. Moduuleja on yli 30 kappaletta.

CSS3:n uutuudet

Tärkeimmät uutuudet mitä CSS3 tulee ehkä tuomaan mukanaan ovat:

Muutamia CSS3-esimerkkejä

/* Merkitään aktiivinen lomake-elementti */
input[type="text"]:focus, textarea:focus { border-color: #FC0; } 

/* Merkitään sisäisen linkin kohde */
body *:target { border-bottom: 1px dotted; }

/* Muotoillaan sisäiset linkit poikkeavasti. Riittääkö pelkkä alleviivaus? */
a:link[href^="#"] {
        color: black;
}


a:link[href^="mailto:"] {
        text-decoration: none;
}

print-mediassa:

a:link:after {
        content: " <" attr(href) "> "; 
        color: silver;
        font-family: "Courier New", Courier, monospace;
        font-size: smaller;
}

a:link[href^="/"]:after {
        content: " <http://appro.mit.jyu.fi" attr(href) "> "; 
}

a:link[href^="#"] {
        text-decoration: none;
}

a:link[href^="#"]:after {
        content: "";
}

Harjoitustyö

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/www/luennot/luento6/
© Jukka Mäntylä (jmantyla@mit.jyu.fi) <http://www.iki.fi/jmantyla/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
2007-02-13 11:48:52