Inne działy

 

 

CSS - Pseudo elementy

 

Pseudoelementy CSS są używane do dodawania efektów specjalnych do niektórych selektorów. Nie musisz używać Javascript lub innych skryptów do osiągnięcia tego samego efektu. Pseudoelement ma prostą składnię jak poniżej:

 

selector:pseudo-element { Właściwość: wartość }

 Klasy CSS mogą być również używane z pseudo-elementami:

selector.class:pseudo-element { Właściwość: wartość }

 Istnieją następujące najczęściej używane pseudo-elementy:

 

 

WartośćOpis
:first-line Tego elementu należy użyć, aby dodać specjalne style w pierwszej linii tekstu w selektorze.
:first-letter Tego elementu należy użyć, aby dodać specjalny styl do pierwszej litery tekstu w selektorze.
:before Tego elementu należy użyć do wstawiania niektórych treści przed elementem.
:after Tego elementu należy użyć do wstawiania niektórych treści za elementem.

 

pseudo-element first-line 

Oto przykład, który pokazuje sposób użycia elementu :first-line aby dodać efekty specjalne do pierwszej linii elementu w dokumencie:

 

<style type="text/css">
p:first-line { text-decoration: underline; }
p.noline:first-line { text-decoration: none; }
</style>
<p class="noline"> Ten wiersz nie ma żadnego podkreślenia, bo należy do 
klasy noline.</p> <p>Pierwszy wiersz tego akapitu zostanie podkreślony, zgodnie z definicją
w regule CSS powyżej. Reszta wierszy w tym paragrafie będzie nadal
wyświetlana normalnie. W tym przykładzie przedstawiono sposób użycia
pseduo elementu :first-line do nadania podkreślenia w pierwszej linii
każdego elementu HTML </p>

 

pseudo-element first-letter 

Oto przykład, który pokazuje sposób użycia elementu :first-letter, aby dodać efekty specjalne do pierwszej litery elementu w dokumencie:

 

<style type="text/css">
p:first-letter { font-size: 3em; text-color:red; }
p.normal:first-letter { font-size: 10px; }
</style>
<p class="normal"> Pierwszy znak niniejszego paragrafu będzie normalny
i będzie mieć rozmiar czcionki 10 px;</p> <p>Pierwszy znak niniejszego paragrafu będzie wielkości 3em i w kolorze
czerwonym zgodnie z definicją w regule CSS powyżej. Reszta znaków w tym
paragrafie pozostanie normalnymi. W tym przykładzie przedstawiono
sposób użycia pseduo elementu :first-letter do nadania specjalnego
wyglądu pierwszych znaków w dowolnym elemencie HTML </p>

 

pseudo-element before 

Oto przykład, który pokazuje sposób użycia elementu :before, aby dodać niektóre treści przed dowolnym elementem.

 

<style type="text/css">
p:before
{
content: url(/images/bullet.gif)
}
</style>
<p> Linia ta będzie poprzedzone kulą.</p>
<p> Linia ta będzie poprzedzone kulą.</p>
<p> Linia ta będzie poprzedzone kulą. </p>

 

pseudo-element after 

Oto przykład, który pokazuje sposób użycia elementu :after, aby dodać jakąś treść po każdym elemencie.

 

<style type="text/css">
p:after
{
content: url(/images/bullet.gif)
}
</style>
<p> Po tym paragrafie będzie wyświetlona kula.</p>
<p> Po tym paragrafie będzie wyświetlona kula.</p>
<p> Po tym paragrafie będzie wyświetlona kula.</p>

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.