Site hosted by Angelfire.com: Build your free website today!

CSS Pseudo-elemendid

CSS

CSS pseudo-elemente kasutatakse spetsiaal-efektide loomiseks mõnede selektorite juures. (selector-märgis mida soovitakse kujundada).

Näited

 red_dot.gif Esimene täht
Selles nšites demonstreeritakse, kuidas lisada spetsiaalset efekti teksti esimesele tähele.

 red_dot.gif Esimene rida.
Selles nšites demonstreeritakse, kuidas lisada spetsiaalset efekti teksti esimesele reale.

 red_dot.gif Esimene täht ja rida.
Selles nšites demonstreeritakse, kuidas lisada spetsiaalset efekti teksti esimesele tähele ja reale.

 red_dot.gif :before.
Selles näites demonstreeritakse, kuidas kasutada :before pseudo-elementi nii, et lisatud pilt jääb elemendi ette.
(Ei tööta IE's).

 red_dot.gif :after.
Selles näites demonstreeritakse, kuidas kasutada :after pseudo-elementi nii, et lisatud pilt jääb elemendi järele.
(Ei tööta IE's).

CSS Pseudo-elemendi süntaks

Niisugune on pseudo-elemendi kirjaviis:

selector:pseudo-element {omadus: väärtus}

Css class omadust saab kasutada ka pseudo-elemendis:

selector.class:pseudo-element {omadus: väärtus}

:first-line Pseudo-element

"first-line" pseudo-elementi kasutatakse lisamaks spetsiaalseid efekte, teksti esimesele rea selektorisse.

p:first-line {color:#0000ff;font-variant:small-caps}
<p>Teksti kujundus mis lõppeb teisel real</p>

Selline peaks olema tulemus.

TEKSTI KUJUNDUS MIS LÕPPEB

teisel real

Ülal toodud näites kuvab brauser teksti vastavalt "first-line" pseudo elemendile. Lause poolitus sõltub brauseri akna suurusest.

Pane tähele: Siin on nimekiri "first-line" pseudo-elementide omadustest mida on võimalik rakendada:

:first-letter Pseudo-element

"first-letter" pseudo-elementi kasutatakse teksti esimese tähe stiili kujundamiseks:

p:first-letter {color:#ff0000;font-size:xx-large}
<p>Selle paragrahvi esimene täht...</p>

Selline peaks olema tulemus.

Selle paragrahvi esimene täht...

Pane tähele: Siin on nimekiri "first-line" pseudo-elementide omadustest mida on võimalik rakendada:

Pseudo-element ja CSS Class

Pseudo-elementi saab kombineerida koos Css class'iga:

p.article:first-letter {color:#ff0000}
<p class="article">
See paragrahv on article stiilis</p>

Ülal toodud näites on paragrahvi esimene täht määratud class="article" elemendiga, mistõttu muutub esimene täht punaseks.

Mitu Pseudo-elementi

Mitut pseudo-elementi saab omavahel kombineerida:

p:first-letter {color:#ff0000;font-size:xx-large}
p:first-line {color:#0000ff}
<p>Esimesed sõnad selles artiklis...</p>

Selline peaks olema tulemus.

Esimesed sõnad
selles artiklis...

Ülal toodud näites on paragrahvi esimene täht punane ning fondi suuruseks on 18px. Esimese rea tekst on sinine ja ülejäänud tekst brauseri vaikimisi valikul must.

CSS :before Pseudo-element

":before" pseudo-elementi kasutatakse mingi elemendi lisamiseks, teise elemendi ette.

Selles näites lisatakse heli enne igale poole kus ilmub element <h1>:

h1:before
{
content: url(beep.wav)
}

CSS :after Pseudo-element

":after" pseudo-elementi kasutatakse mingi elemendi lisamiseks, teise elemendi järele.

Selles näites lisatakse heli pärast igale poole kus ilmub element <h1>:

h1:after
{
content: url(beep.wav)
}
Pseudo-element Otstarve
:first-letter Määrab esimese tähe stiili, tekstis
:first-line Määrab esimese rea stiili, tekstis
:before Lisab mingi elemendi teise elemendi ette
:after Lisab mingi elemendi teise elemendi järele