CSS2 ja CSS-valitsimet - Luento 4

Seuraavassa käydään läpi erilaisia CSS2:sta löytyviä ominaisuuksia. Erityisesti tutustutaan monimutkaisempiin CSS-valitsimiin.

Luentotaltiointi

Ongelmia videon katselussa?

Tekstin ominaisuudet

Elementin raja, täyte ja marginaali

Käsitteitä

vanhempi-, äiti- tai isäelementti (engl. parent)
elementti, jonka sisällä ko. elementti välittömästi on. 
<p>
<strong>Tämän strong-elementin äiti-elementti on p-elementti.</strong>
</p>
lapsielementti (engl. child)
välittömästi ko. elementin sisällä oleva elementti 
<p>
<strong>Tämä strong-elementti on p-elementin lapsi.</strong>
</p>
jälkeläinen (engl. descendant)
ko. elementin sisällä oleva elementti 
<p>
<strong>Tämä strong-elementti on p-elementin jälkeläinen.
<a href="/">Tämä linkki on sekä strong-elementin, että p-elementin jälkeläinen.</a></strong>
</p>
esivanhempi, esi-isä (engl. ancestor)
elementti, jonka jälkeläinen ko. elementti on 
<p>Tämä p-elementti on sekä a-elementin, että strong-elementin esi-isä.
<strong>Tämä strong-elementti on a-elementin esi-isä.
<a href="/">Tämä linkki on sekä strong-elementin, että p-elementin jälkeläinen.</a></strong>
</p>
sisarelementti (engl. sibling)
elementit ovat sisaret, jos niillä on yhteinen vanhempielementti 
<p>
<strong>Tämä strong-elementti ja seuraava a-elementti ovat sisarelementtejä.</strong>
<a href="/">Tämä linkki on edellisen strong-elementin sisarelementti.</a>
</p>
edeltävä/seuraava sisarelementti (engl. preceding/following sibling)
edeltävä elementti on dokumenttipuussa ennen ko. elementtiä, seuraava on sen jälkeen 
<p>
<strong>Tätä strong-elementtiä seuraava elementti on a-elementti.</strong>
<a href="/">Tätä linkkiä edeltävä elementti on strong-elementti.</a>
</p>

Tutki Firebugilla ja DOM Inspectorilla dokumentin puurakennetta.

Lisätietoa:

Valitsimet ja näennäisluokat

Seuraavassa on esitelty lyhyeiden esimerkkien avulla erilaisia CSS2:n valitsimia (engl. selectors) ja näennäisluokkia (engl. pseudo). Valitsimien (engl. selector) avulla voidaan viitata xhtml-dokumentissa käytettyihin rakenteisiin määrityksiin, joten ne toimivat eräällä tavalla tyylin niminä.

Tärkeimmät CSS-valitsimet
Valitsin Selitys
* Valitsee jokaisen elementin
E Valitsee jokaisen elementin E
E F Valitsee elementin F, joka on elementin E jälkeläinen
E > F Valitsee elementin F, joka on elementin E lapsi
E:first-child Valitsee elementin E, jos elementti E on äitielementtinsä ensimmäinen lapsielementti
E + F Valitsee elementin F jos se on heti elementin E jälkeen
E[foo] Valitsee elementin E jos elementin E foo-attribuutilla on jokin arvo
E[foo="varoitus"] Valitsee elementin E jos elementin E foo-attribuutilla on arvona varoitus
E[foo~="bar"] Valitsee elementin E, jonka ominaisuudella foo on välilyönnillä eroteltujen arvojen joukossa arvo bar
E.luokka Valitsee elementin E, jos elementin E class-attribuutin arvo on luokka
E#tunniste Valitsee elementin E, jos elementin E ID-attribuutin arvo on tunniste
E:before Lisää ennen elementtiä E jotakin sisältöä
E:after Lisää elementin E jälkeen jotakin sisältöä
E:first-letter Valitsee elementin E ensimmäisen kirjaimen
E:first-line Valitsee elementin E ensimmäisen rivin
Yleisesti tuettuja CSS3-valitsimia
E[foo^="bar"] Valitsee elementin E, jonka ominaisuus foo alkaa merkeillä bar
E[foo$="bar"] Valitsee elementin E, jonka ominaisuus foo loppuu merkkeihin bar
E[foo*="bar"] Valitsee elementin E, jonka ominaisuuden foo arvo sisältää peräkkäiset merkit bar
E ~ F Valitsee elementin F, jos se on elementin E jälkeen (välissä voi olla muita elementtejä)
Esimerkit tärkeimmistä CSS-valitsimista
Valitsin CSS xhtml
* * { background-color: white; }
E h1 { color: red; } <h1>Punainen otsikko</h1>
E F ul strong { color: red; } <ul><li>Tässä jotain tekstiä ja <strong>tärkeä</strong> sana</li></ul>
E > F ul > li > strong { color: red; } <ul><li>Tässä jotain tekstiä ja <strong>tärkeä</strong> sana</li></ul>
E:first-child p:first-child { color: red; } <body><p>Tämä on ensimmäinen kappale, joka tulee punaisella</p><p>Tämä tulee normaalilla värillä</p></body>
E + F p + p { color: red; } <p>Tämä on ensimmäinen kappale, joka tulee normaalilla värillä</p><p>Tämä tulee punaisella värillä</p>
E[foo] img[title] { border: 1px solid red; } <p><img src="kuva.jpg" alt="foo" title="bar" /></p>
E[foo="varoitus"] a[href="/www/"] { font-size: 1.2em; } <a href="/www/">WWW-julkaiseminen</a>
E#tunniste p#tarkein { color: red; } <p id="tarkein">tämä on sivun tärkein tekstikappale</p>
E:before p:before { content: "Lue tarkkaan "; color: red; }
E:after p:after { content: " - Tommi "; color: yellow; }
E:first-letter p:first-letter { font-size: 1.5em; }
E:first-line p:first-line { text-transform: uppercase; }

Esimerkkejä valitsimista. Esimerkissä käytetty css

Esimerkkejä näennäisluokkien käytöstä

Huomio: CSS2:ssa ei ole selektoreja, joilla voisi valita elementtejä niiden sisällön perusteella. Usein siis tarvitaan class- ja id-ominaisuuksia.

Listan ominaisuuksia

Listanumerointi

CSS2:sta löytyviä listatyylejä ovat:

Seuraavassa esimerkkejä listatyyleistä:

Automaattinen numerointi

Automaattisen numeroinnin avulla voidaan listoille tai otsikoille määritellä automaattinen numerointi. Seuraavassa esimerkki automaattisen numeroinnin käytöstä.

body {
    counter-reset: osa;
}
h1:before {
    content: "Osa " counter(osa) ". ";
    counter-increment: osa;
}
h1 {
    counter-reset: otsikko;
}
h2:before {
    content: counter(osa) "." counter(otsikko) " ";
    counter-increment: otsikko;
}

h2 {
  counter-reset: alaotsikko;
}

h3:before {
  content: counter(osa) "." counter(otsikko) "." counter(alaotsikko) " ";
  counter-increment: alaotsikko;
}

Automaattista numerointia eivät tue muut selaimet kuin Opera.

Esimerkki automaattisesta numeroinnista.

Taulukot

Taulukoilla on muutamia omia erikoisominaisuuksiaan.

Ominaisuus Arvot Taulukon osa johon liittyy Selitys
caption-side top | bottom | left | right caption Määrää onko caption taulukon päällä, sivulla vai alla.
table-layout auto | fixed table Määrittelee riippuuko taulukon koko ja ulkoasu sen sisällöstä vai ei
border-collapse collapse | separate table Määrää miten rajat määrätään taulukon soluille.

separate-moodissa jokaisella solulla on oma raja. Riveillä tai sarakkeilla ei voi olla rajoja.

collapse-moodissa rajat ovat yhteisiä.
border-spacing table Määrää välin joka tulee yksittäisten solujen väliin jos käytössä on separate-moodi
empty-cells show | hide td ja th Määrää näytetäänkö raja tyhjien solujen ympärillä

Taulukkoesimerkki ja esimerkin css

Lisätietoja: CSS2 tables

Elementin koko

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

Minimin ja maksimin määrittely elementin leveydelle ja korkeudelle

Ylivuoto, leikkaus ja näkyvyys -ominaisuudet

Seuraavassa esimerkki ominaisuuksien käytöstä

Huom. Internet Explorer 6 käsittelee väärin (korjattu IE7:ssa) overflow-ominaisuuden:

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 seuraavia arvoja.

Esimerkki keskittämisestä pystysuunnassa display-ominaisuuden avulla.

Lisätietoa display-ominaisuudesta: http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop

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/luento4/
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2008-03-12 16:44:26
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto