CSS-valitsimet ja -mediatyypit

Luentotaltiointi
Valitsimet ja näennäisluokat
Mediatyypit
Erilaiset mediatyypit
- Sivun ominaisuuksia
- Esimerkkejä mediatyyppien käytöstä
Taulukot
Ylivuoto, leikkaus ja näkyvyys -ominaisuudet
display-ominaisuus
Listanumerointityylejä
Automaattinen numerointi
Käyttäjän omien värien ja kirjasimien käyttäminen
Minimin ja maksimin määrittely elementin leveydelle ja korkeudelle
CSS 2.1:n muutokset CSS2-suositukseen

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

Luentotaltiointi

www04.mp3 15M
www04.wmv 37M

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

Mediatyyppien tarkoituksena on mahdollistaa sivun ulkoasun määrittely mediakohtaisesti
Esimerkiksi WWW-dokumentti voidaan muotoilla erilaisilla mediatyypeillä eri tavalla paperille kuin näytölle.
Hyötynä tästä saavutetaan, että jokaista mediaa varten voidaan tehdä omat tyylimääritykset, jotka mahdollistavat tiedon tehokkaan saamisen useamman median kautta.

Erilaiset mediatyypit

all-tyyppiin voidaan määritellä asetuksia kaikille laitteille.
aural-tyyppiin voidaan määritellä asetuksia puhesyntetisaattoreita varten. aural-tyyppi on poistettu suosituksesta ja korvautuu myöhemmin speech-mediatyypillä.
braille-tyyppiin voidaan määritellä asetuksia esimerkiksi pistekirjoitusnäyttöä varten.
embossed-tyyppiin voidaan määritellä asetuksia brailletulostimia varten.
handheld-tyyppiin voidaan määritellä pieninäyttöisille laitteille.
print-tyyppiin voidaan määritellä esimerkiksi paperille tulostettavaksi tarkoitettuja asetuksia.
projection-tyyppiin voidaan määritellä asetukset projektoreita varten.
screen-tyyppiin voidaan määritellä tietokonenäytöllä käytettäviä asetuksia.
tty-tyyppiin voidaan määritellä tasalevyistä kirjasinta käyttäviin laitteisiin.
tv-tyyppiin voidaan määritellä asetuksia televisiotyyppisille laitteille.

Sivun ominaisuuksia

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

@page-määrityksen sisällä voidaan kertoa sivutukseen liittyviä ominaisuuksia, kuten esimerkiksi koko (size), marginaalit.
Sivunvaihtoon liittyvät ominaisuudet
- page-break-before-voidaan määritellä sivunvaihdon käyttäytyminen ennen kappaletta.
- page-break-after-voidaan määritellä sivunvaihdon käyttäytyminen kappaleen jälkeen.
- page-break-inside-voidaan määritellä sivunvaihdon käyttäytyminen lohkon sisällä.
- Sivunvaihdon esiintyminen voidaan kieltää arvolla avoid ja sivunvaihto voidaan pakottaa arvolla always.

Esimerkkejä mediatyyppien käytöstä

Kurssin kotisivuja tulostettaessa jätetään tulosteista pois navigointipalkit sekä pyritään välttämään sivunvaihtoa asiakirjan eri rakenteissa. Tämä on toteutettu seuraavilla CSS-määrittelyillä.
```
@media print {
h1, h2, h3 {
 page-break-after: avoid;
 page-break-inside: avoid;
}
ul, ol, dl {
 page-break-before: avoid;
}
.navbar, .navbartop {
 display: none;
}

}
```
Toinen esimerkki mediatyyppien käytöstä löytyy WWW-sivujen näyttämisestä esityksenomaisesti. Esimerkiksi tämä sivu näkyy Opera-selaimella diaesityksenä, kun sitä katsotaan kokoruututilassa.
```
@media projection {
body {
 margin-top: 1em;
 margin-left: 1em;
 margin-right: 1em;
 font-size: 200%;
}
h1,h2,h3{
 page-break-before: always;
}
.navbartop, .navbar {
 display: none;
}

}
```
Tarkempi esimerkki aural-mediatyypin määrittelyistä : aural.css.
Esimerkki handheld-medista

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

Ylivuoto eli overflow-ominaisuudella voidaan määritellä mitä pitää tehdä jos elementti ei mahdu sille annettuun tilaan. Elementin käyttäytymistä voidaan määritellä seuraavien arvojen avulla
- visible-arvolla ylivuotava osuus näytetään.
- hidden-arvolla ylivuotava osuus piilotetaan.
- scroll-arvolla elementtiin voidaan määritellä vierityspalkki sisällön vieritykseen.
- auto-arvolla elementtiin tehdään tarvittaessa vierityspalkki.
Leikkaus eli clip-ominaisuudella voidaan rajoittaa elementistä näkyvää suorakaiteen muotoista aluetta.
Näkyvyys eli visibility-ominaisuudella voidaan poistaa elementti näkyvistä, mutta kuitenkin pitää se sivulla eli näkymätön elementti vaikuttaa muiden sivun osien sijoitteluun.

Seuraavassa esimerkki ominaisuuksien käytöstä

Esimerkki overlow-, clip-, ja visibility-ominaisuuksista
- overflow.html - lähdekoodi
- overflow.css - lähdekoodi

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.

block-arvolla elementti käyttäytyy lohkotason elementin tavoin.
inline-arvolla elementti käyttäytyy tekstitason (inline) elementin tavoin.
inline-block
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.
run-in-arvolla elementti saadaan osaksi toista lohkotason elementtiä.
table
inline-table
table-row
table-row-group
table-header-group
table-footer-group
table-column
table-column-group
table-cell
table-caption

Esimerkki keskittämisestä pystysuunnassa display-ominaisuuden avulla.

Listanumerointityylejä

CSS2:sta löytyviä listatyylejä ovat:

decimal (1, 2, 3, ...)
decimal-leading-zero (01, 02, 03, ...)
lower-roman (i, ii, iii, iv, v, ...)
upper-roman (I, II, III, IV, V, ...)
lower-latin (a, b , c, ...)
upper-latin (A, B, C, ...)
lower-greek (alpha, beta, gamma, ...)
hebrew
georgian
armenian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha

Seuraavassa esimerkkejä listatyyleistä:

Esimerkki uusista listatyyleistä
- listat.html
- listat.css

Automaattinen numerointi

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

Käyttäjän omien värien ja kirjasimien käyttäminen

Voidaan käyttää sivulla suoraan käyttäjän käyttöympäristössä määriteltyjä värejä ja kirjasimia.

Esimerkki järjestelmäväreistä ja -fonteista.
- system.html
- system.css

Minimin ja maksimin määrittely elementin leveydelle ja korkeudelle

Esimerkki minimin ja maksimin määrittelystä.
- minmax.html
- minmax.css

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:

@font-face, font-stretch, font-size-adjust -ominaisuudet on poistettu.
text-shadow ominaisuus on poistettu
aural-mediatyyppi on poistettu. CSS3:n mukana pitäisi tulla uusi speech-mediatyyppi
Rajan väri voi olla nyt myös transparent
Täyte (padding) -ominaisuutta ei ole taulukon riveillä, riviryhmillä, otsikkoryhmillä yms.

Käyttäjien kommentit

CSS (Cascading Style Sheets)

WWW-lomakkeet