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?

Käsitteitä

vanhempi-, äiti- tai isäelementti (engl. parent)
elementti, jonka sisällä ko. elementti välittömästi on.
lapsielementti (engl. child)
välittömästi ko. elementin sisällä oleva elementti
jälkeläinen (engl. descendant)
ko. elementin sisällä oleva elementti
esivanhempi, esiisä (engl. ancestor)
elementti, jonka jälkeläinen ko. elementti on
sisarelementti (engl. sibling)
elementit ovat sisaret, jos niillä on yhteinen vanhempielementti
edeltävä/seuraava sisarelementti (engl. preceding/following sibling)
edeltävä elementti on dokumenttipuussa ennen ko. elementtiä, seuraava on sen jälkeen

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; }
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="http://appro.mit.jyu.fi/www/"] { font-size: 1.2em; } <a href="http://appro.mit.jyu.fi/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;
}

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.

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

Minimin ja maksimin määrittely elementin leveydelle ja korkeudelle

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/
© 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-08 08:12:56