Kaskadowe arkusze stylów CSS: selektory pseudoelementów










Tematy: wprowadzenie | selektory elementów | selektory atrybutów | selektory specjalne
selektory pseudoklas | selektory pseudoelementów





Strona główna kursu
Style
Wstęp
Narzędzia
Budowa stylu
Selektory
Kaskadowość i dziedziczenie
Wstawianie stylów
Jednostki miary
Własności czcionek
Własności tekstu
Kolor i tło
Marginesy i odstępy
Obramowania
Wykazy
Tabele
Rozmiary
Pozycjonowanie
Wyświetlanie
Obrys
Własności drukowania
Zawartość generowana
Suwaki






Selektory pseudoelementów

a. Pseudoelement first-line

Selektor pozwala nadać odrębne formatowanie pierwszemu wierszowi bloku, np. akapitu.

Przykład:

p:first-line {text-transform: uppercase; }

To jest akapit, w którym pierwszy wiersz
będzie zamieniony na wersaliki. To jest akapit, w którym pierwszy
wiersz będzie zamieniony na wersaliki. Proszę zauważyć, że zawartość
pierwszego wiersza zmienia się przy zmianie wielkości ramki.

Interpretacja: Internet Explorer 5.5, Netscape 6, Opera 5.

W deklaracji stylu dla :first-line można stosować następujące
własności: font properties, color properties, background properties,
'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align',
'text-transform', 'line-height', 'text-shadow', 'clear'.

To jest akapit, w którym pierwszy wiersz
będzie pogrubiony i pochylony. To jest akapit, w którym pierwszy wiersz
będzie pogrubiony i pochylony. To jest akapit, w którym pierwszy wiersz
będzie pogrubiony i pochylony. Proszę zauważyć, że zawartość pierwszego
wiersza zmienia się przy zmianie wielkości ramki.

b. Pseudoelement first-letter

Selektor :first-letter teoretycznie powinien powodować nadanie
odrębnego formatowania pierwszej literze danego bloku, np. akapitu.
Został on pomyślany przede wszystkim jako wygodne narzędzie o
charakterze typograficznym, pozwalające zbliżyć wygląd strony WWW do
tradycyjnych rozwiązań spotykanych w publikacjach papierowych, np.
rozciągnięcie pierwszej litery na kilka kolejnych wierszy tekstu.
Technika ta (drop-cap) jest znana choćby z popularnych edytorów tekstów.

Przykład:

p:first-letter { font-size: 200%; float: left; }

Pierwsza
litera w tym akapicie jest różna od pozostałych. Pierwsza litera w tym
akapicie jest różna od pozostałych. Pierwsza litera w tym akapicie jest
różna od pozostałych. Pierwsza litera w tym akapicie jest różna od
pozostałych. Pierwsza litera w tym akapicie jest różna od pozostałych.

Interpretacja: Internet Explorer 5.5, Netscape 6, Opera 5.

W deklaracji stylu dla :first-letter można stosować
następujące własności: font properties, color properties, background
properties, 'text-decoration', 'vertical-align', 'text-transform',
'line-height', margin properties, padding properties, border
properties, 'float', 'text-shadow', and 'clear'.

Pierwsza
litera w tym akapicie jest różna od pozostałych. Pierwsza litera w tym
akapicie jest różna od pozostałych. Pierwsza litera w tym akapicie jest
różna od pozostałych. Pierwsza litera w tym akapicie jest różna od
pozostałych. Pierwsza litera w tym akapicie jest różna od pozostałych.

c. Pseudoelement :before i :after

Selektor ten pozwala automatycznie generować określoną treść
przed i/lub po określonym elemencie. Na przykład, polecenie

p:before {content : "Początek akapitu: "}
p:after {content : " :Koniec akapitu"}

spowoduje automatyczne wstawienie ciągów (bez cudzysłowów)
"Początek akapitu: " i " :Koniec akapitu" przed i po każdym akapicie.

Polecenie

p.uwaga:before {content : "Uwaga: "}

opatrzy każdy akapit o klasie class=uwaga dodatkową inwokacją "Uwaga: ".

Tu powinien się pojawić wyraz "uwaga" na
początku zdania.

Jako content mogą występować nie tylko zwykłe ciągi znaków
(string), ale i adresy internetowe (address), liczniki (counter),
apostrofy i cudzysłowy (quotes).

Tu powinien się pojawić wyraz "koniec" na końcu zdania.

Interpretacja: Netscape 6, Opera 5.

Dodatkowe efekty formatujące można uzyskać, dodając po prostu odpowiedni kod:

.uwaga:before {content : "Uwaga: "; font-weight: bold}

.koniec:after {content : " :Koniec"; color: red}

Selektor ten jest ważny ze względu na współudział w generowaniu zawartości liczników.