CSS-valitsimet

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>

Lisätietoa:

Valitsimet ja näennäisluokat

Seuraavassa on esitelty lyhyiden esimerkkien avulla erilaisia CSS-valitsimia (engl. selectors) ja näennäisluokkia (engl. pseudo). Valitsimien (engl. selectors) avulla voidaan viitata HTML-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. 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ä).

CSS-Selectors

Esimerkit tärkeimmistä CSS-valitsimista
Valitsin CSS HTML
* * { 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:stä löytyviä listatyylejä ovat mm.:

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;
}

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.

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-koodi

Lisätietoja: Styling Tables ja A Complete Guide to the Table Element

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

Esimerkkisivu

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;
}

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. Esimerkin css-koodi

Lisätietoa display-ominaisuudesta: display

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

Seuraavassa esimerkki ominaisuuksien käytöstä

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/itkp1011/luennot/luento4/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2017-09-19 14:36:09
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta