CSS Pseudo-elemendid
CSS pseudo-elemente kasutatakse spetsiaal-efektide loomiseks mõnede selektorite juures. (selector-märgis mida soovitakse kujundada).
Näited
Esimene täht
Selles näites demonstreeritakse, kuidas lisada spetsiaalset efekti teksti esimesele tähele.
Esimene rida.
Selles näites demonstreeritakse, kuidas lisada spetsiaalset efekti teksti esimesele reale.
Esimene täht ja rida.
Selles näites demonstreeritakse, kuidas lisada spetsiaalset efekti teksti esimesele tähele ja reale.
:before.
Selles näites demonstreeritakse, kuidas kasutada :before pseudo-elementi nii, et lisatud pilt jääb elemendi ette.
(Ei tööta IE's).
: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:
- font omadus
- värvi omadus
- tausta omadus
- sõna paigutus
- tähe paigutus
- teksti välimus
- vertikaalne paigutus
- teksti transformeerimine
- rea pikkus
: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:
- font omadus
- värvi omadus
- tausta omadus
- margin omadus
- padding omadus
- äärise omadus
- teksti välimus
- teksti transformeerimine
- vertikaalne paigutus (ainult siis kui "float" on "none")
- rea pikkus
- float
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 |
