Cascading Style Sheets (CSS) opas 2

[firebird]

CSS Pseudo-luokat:

Pseudo-luokkia käytetään luomaan efektejä joihinkin valitsimiin. Pseudo-luokkien syntaksi näyttää tältä:

Koodia:

valitsin:pseudo-luokka { ominaisuus: arvo; }

CSS-luokkia voi myös käyttää Pseudo-luokkien kanssa:

Koodia:

valitsin.luokka:pseudo-luokka { ominaisuus: arvo; }

Jos tutustuit edelliseen CSS -oppaaseeni, tai osaat jo CSS:n perusteet, tämän syntaksin pitäisi näyttää yksinkertaiselta. Olet jopa joskus saattanut käyttää Pseudo-luokkia ihan tietämättäsikin. Pseudo-luokkia käytetään yleisimmin hyperlinkkien muokkaamiseen.

Pseudo-luokilla voidaan määritellä helposti määritellä eri arvot koskemattomalle linkille, aktiiviselle linkille, jo klikatulle linkille ja linkille, jonka päällä hiiri on. Jos et aivan ymmärtänyt, havainnollista asiaa koodinpätkällä:

Koodia:

a:link { color: blue; }
a:visited { color: red; }
a:hover { color: yellow; }
a:active { color: green; }

Elikkäs yläpuolella määriteltiin hyperlinkin eri "olotiloille" eri värit.
a:link - määrittelee koskemattoman linkin arvot. Yläpuolella oleva esimerkki määrittelisi tämän väriksi sinisen.
a:visited - määrittelee jo joskus klikatun linkin arvot. Yläpuolella oleva esimerkki määrittelisi tämän väriksi punaisen.
a:hover - määrittelee arvot linkille, kun hiiri on sen päällä. Yläpuolella oleva esimerkki määrittelisi tämän väriksi keltaisen.
a:active - määrittelee aktiivisen linkin arvot. Yläpuolella oleva esimerkki määrittelisi tämän väriksi vihreän.

HUOM! a:hover tulee aina a:link ja a:visited -kohtien jälkeen. a:active tulee aina a:hover -kohdan jälkeen.

Pseudo-luokat "sekoitettuna" CSS-luokkiin:

Pseudo-luokkia voi myös "sekoittaa" CSS-luokkien kanssa. Tässä on pikkuinen esimerkki:

Koodia:

a.vihr:hover { color: green; }

<a class="vihr" href="http://www.hemiplace.com">Hemiplace</a>

Yläpuolella oleva koodi muuttaa linkin värin vihreäksi, kun hiiri liikutetaan sen päälle.

Tässä ovat kaikki Pseudo-luokat:
:active
:focus
:hover
:link
:visited
:first-child
:lang

CSS Pseudo-elementit:

Pseudo-elementtien syntaksi näyttää tältä:

Koodia:

valitsin:pseudo-elementti { ominaisuus: arvo; }

CSS-luokkia voi myös käyttää Pseudo-elementtien kanssa:

Koodia:

valitsin.luokka:pseudo-elementti { ominaisuus: arvo; }

:first-line Pseudo-elementti

":first-line" pseudo-elementtiä käytetään määrittämään valitsimen ensimmäiselle riville erityinen tyyli. Esimerkki:

Koodia:

p:first-line { color: green; }

<p>Tämän tekstin ensimmäinen rivi on vihreä.</p>

Seuraavat komennot sopivat yhteen ":first-line" pseudo-elementin kanssa:
font -komennot
color -komennot
background -komennot
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

:first-letter Pseudo-elementti

":first-letter" pseudo-elementtiä käytetään määrittämään valitsimen ensimmäiselle kirjaimelle erilainen tyyli. Esimerkki:

Koodia:

p:first-letter { color: red; }

<p>Tämän tekstin ensimmäinen kirjain on punainen.</p>

Seuraavat komennot sopivat yhteen ":first-letter" pseudo-elementin kanssa:
font -komennot
color -komennot
background -komennot
margin -komennot
padding -komennot
border -komennot
text-decoration
vertical-align (vain jos 'float' :in arvo on 'none')
text-transform
line-height
float
clear

Pseudo-elementit ja CSS-luokat

Pseudo-elementtejä voidaan käyttää CSS-luokkien kanssa:

Koodia:

p.lause:first-line { color: red; }

<p class="lause">Tämä on lause.</p>

Yläpuolella oleva esimerkki määrittää kaikista <p> -elementeistä, joiden luokka on 'lause' ensimmäisen rivin punaiseksi.

Useita Pseudo-elementtejä

Useita pseudo-elementtejä voidaan yhdistää:

Koodia:

p:first-letter { color: blue; }
p:first-line { color: red; }

<p>Tämä on lause.</p>

Ylläpuolella oleva esimerkki muuttaa <p></p> -tagien välissä olevan tekstin ensimmäisen kirjaimen siniseksi ja ensimmäisen rivin punaiseksi.

:before Pseudo-elementti

":before" pseudo-elementtiä käytetään toteuttamaan jotain ennen elementtiä:

Koodia:

h1:before { content: url(aani.wav); }

Yläpuolella oleva koodi soittaa äänen 'aani' ennen <h1> -elementin tapahtumista.

:after Pseudo-elementti

":after" pseudo-elementtiä käytetään toteuttamaan jotain elementin jälkeen:

Koodia:

h1:after { content: url(aani.wav); }

Yläpuolella oleva koodi soittaa äänen 'aani' <h1> elementin tapahtumisen jälkeen.

Lista pseudo-elementeistä:

:first-letter
:first-line
:before
:after

Ja vielä kooste pseudo-luokista:

:active
:focus (ei toimi IE:llä)
:hover
:link
:visited
:first-child (ei toimi IE:llä)
:lang (ei toimi IE:llä)

Noniin, tässä oli taas yksi opas. Toivottavasti opit jotain uutta.

E: Lisäsin koosteen pseudo-luokista.

[mAd-]

Hyvä opas oli. Helppoa luettavaa sekä selkeästi kerrottu asiat. =)

[firebird]

Kiitoksia. Ajattelin tässä, että aloitan samantyylisen JavaScript-opassarjan kirjoittamisen.