CSS 2.1 ja CSS-valitsimet - Luento 4
- Luentotaltiointi
- CSS1-ominaisuuksia
- Käsitteitä
- Valitsimet ja näennäisluokat
- Listan ominaisuuksia
- Taulukot
- Elementin koko
Seuraavassa käydään läpi erilaisia CSS 2.1:stä löytyviä ominaisuuksia. Erityisesti tutustutaan monimutkaisempiin CSS-valitsimiin.
Luentotaltiointi
Ongelmia videon katselussa?CSS1-ominaisuuksia
Käydään ensin läpi ne CSS1-ominaisuudet, joita ei ehditty käydä läpi edellisellä luennolla. Näitä ovat tekstin ominaisuudet sekä 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>
Esimerkki: Tutkitaan Firebugilla dokumentin puurakennetta
Lisätietoa:
- CSS 2.1 Definitions
- XML-sanasto (Henri Ruini)
Valitsimet ja näennäisluokat
Seuraavassa on esitelty lyhyiden esimerkkien avulla erilaisia CSS 2.1:sen valitsimia (engl. selectors) ja näennäisluokkia (engl. pseudo). Valitsimien (engl. selectors) 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. Myös tyhjä käy arvoksi. |
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. |
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ä). |
CSS3-valitsimien spesifikaatio
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.luokka |
p.keskitys { text-align: center; } |
<p class="keskitys">Tämä tekstikappale on keskitetty.</p> |
E:before |
p:before { content: "Lue tarkkaan "; color: red; } |
|
E:after |
p:after { content: " - Antti"; 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: CSS 2.1:ssä ei ole selektoreja, joilla voisi valita elementtejä niiden sisällön perusteella. Usein siis tarvitaan class- ja id-ominaisuuksia.
Listan ominaisuuksia
Listanumerointi
CSS 2.1:stä 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ä.
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; }
Kaikki selaimet eivät välttämättä vielä tue automaattista numerointia täydellisesti. Tuki löytyy kuitenkin ainakin Firefox 3:sta, Internet Explorer 8:sta ja Operasta.
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.
|
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-koodi
Lisätietoja: CSS 2.1 Tables
col-elementti
Yksi hieman erikoisempi taulukoiden elementti on col. Sillä voi määritellä tiettyjä ominaisuuksia taulukon eri sarakkeille (vrt. tr-elementti riveille). Esimerkiksi voi määritellä eri sarakkeille class-attribuutin avulla oman CSS-luokan, jolle voi sitten antaa eri määrityksiä CSS-tiedostossa.
col-elementissä lopetuselementti lyhennetään suoraan aloituselementtiin, eli elementin syntaksi on <col />. col-elementit tulee sijoittaa ennen tr-elementtejä, eli heti table-elementin perään. span-attribuutin avulla voi määrätä yhden col-elementin koskemaan useampia sarakkeita. Alla on esimerkki elementin käytöstä.
Esimerkin koodit:
HTML:
<table>
<col class="eka_sarake" />
<col span="2" class="toka_ja_kolmas_sarake" />
<tr><td>1. rivin 1. sarakkeen 1. solu</td><td>1. rivin 2. sarakkeen 1. solu</td>
<td>1. rivin 3. sarakkeen 1. solu</td></tr>
<tr><td>2. rivin 1. sarakkeen 2. solu</td><td>2. rivin 2. sarakkeen 2. solu</td>
<td>2. rivin 3. sarakkeen 2. solu</td></tr>
</table>
CSS:
.eka_sarake {
background-color: yellow;
}
.toka_ja_kolmas_sarake {
background-color: green;
}
Elementin koko
- Muut elementin ominaisuudet (esimerkki)
- width
- height
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 on 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
- 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
Huom. Internet Explorer 6 käsittelee väärin (korjattu IE 7-9:ssa) overflow-ominaisuuden:
- http://www.quirksmode.org/css/overflow.html
- http://www.dynamicsitesolutions.com/css/min-height-for-msie/
display-ominaisuus
- display
- Esimerkki display:n käytöstä yksinkertaisessa XML-dokumentissa
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.
- 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ä.
- inline-block
- 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
Lisätietoa display-ominaisuudesta: http://www.w3.org/TR/CSS21/visuren.html#display-prop
Käyttäjien kommentit