Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Zawartość generowana

Selektory pseudoelementów

Email Drukuj PDF

Tematy: wprowadzenie | selektory elementów | selektory atrybutów | selektory specjalne | selektory pseudoklas | 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, Firefox, Opera, Chrome (z błędami).

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, Firefox, Opera, Chrome.

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: Internet Explorer 8, Firefox, Opera, Chrome.

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.

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V