CSS-valitsimet ja -mediatyypit
- Luentotaltiointi
- Valitsimet ja näennäisluokat
- Mediatyypit
- Erilaiset mediatyypit
- Taulukot
- Ylivuoto, leikkaus ja näkyvyys -ominaisuudet
- display-ominaisuus
- Listanumerointityylejä
- Automaattinen numerointi
- 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.
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ä.
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 |
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.
|
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ä:
Automaattinen numerointi
Automaattisen numeroinnin avulla voidaan listoille tai otsikoille määritellä automaattinen numerointi. Seuraavassa esimerkki automaattisen numeroinnin käytöstä.
- Esimerkki automaattisesta numeroinnista
- Esimerkki generoidusta sisällöstä sekä automaattisesta numeroinnista
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:
@font-face, font-stretch, font-size-adjust
-ominaisuudet on poistettu.text-shadow
ominaisuus on poistettuaural
-mediatyyppi on poistettu. CSS3:n mukana pitäisi tulla uusispeech
-mediatyyppi- Rajan väri voi olla nyt myös
transparent
- Täyte (
padding
) -ominaisuutta ei ole taulukon riveillä, riviryhmillä, otsikkoryhmillä yms.