CSS-valitsimet ja -mediatyypit

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

Luentotaltiointi

Ongelmia videon katselussa?

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

Mediatyypit

Erilaiset mediatyypit

Sivun ominaisuuksia

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

Esimerkkejä mediatyyppien käytöstä

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

Ylivuoto, leikkaus ja näkyvyys -ominaisuudet

Seuraavassa esimerkki ominaisuuksien käytöstä

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.

Listanumerointityylejä

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

Minimin ja maksimin määrittely elementin leveydelle ja korkeudelle

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:

Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/www/luennot/luento3/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi)<URL: http://hazor.iki.fi/>
2005-12-19 14:53:00