Kurs HTML - style: selektory pseudoelementów









Selektory pseudoelementów

[ aktualizacja 23.12.2000 ]

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.

Ilustracja dla użytkowników IE.



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 bardzo ważny ze względu na współudział w generowaniu zawartości liczników.