Promocje Heliona
Bestsellery Heliona
2. Pseudoklasy i pseudoelementy
W CSS 1 style dopasowują się do elementów na podstawie ich miejsca w strukturze dokumentu. Do wielu zastosowań ten prosty model postępowania jest wystarczający, ale nie do wszystkich. Głównym zadaniem pseudoklas i pseudoelementów jest zwiększenie możliwości kontroli nad wyglądem dokumentu poprzez umożliwienie autorowi dostępu do informacji zewnętrznych.
Pseudoklas i pseudoelementów można używać w selektorach, ale nie występują one w kodzie HTML. Są one "wstawiane" przez aplikację kliencką w określonych warunkach, aby można było się do nich odwoływać. Nazywa się je najczęściej "klasami" lub "elementami", jako że jest to najdogodniejszy sposób opisu ich zachowania. Bardziej trafnym sposobem opisu ich zachowania jest fikcyjna sekwencja znaczników.
Pseudoelementy służą do odwoływania się do określonych części elementów, podczas gdy pseudoklasy pozwalają na rozróżnienie pomiędzy typami elementów.
2.1 Pseudoklasy hiperłączy
Nowo odwiedzone linki są zazwyczaj wyświetlane w odmienny sposób przez przeglądarki niż pozostałe łącza na stronie. W CSS1 można kontrolować ich wygląd przy pomocy pseudoklas dla elementu „A”:
A:link { color: red } /* łącze jeszcze nie odwiedzone */
A:visited { color: blue } /* łącze odwiedzone */
A:active { color: lime } /* łącze aktywne */
Wszystkie elementy „A” z atrybutem „HREF” zostaną zaklasyfikowane tylko do jednej z tych grup (tj. łącza z atrybutem target pozostają bez zmian). Przeglądarka może po jakimś czasie wrócić do podstawowego koloru (pseudoklasa „link”) odnośników odwiedzonych (pseudoklasa „visited”). Pseudoklasa „active” służy do zmiany wyglądu odnośników, które są w jakiś sposób zaznaczone (np. kliknięcie przyciskiem myszki) przez odbiorcę.
Formatując element, dla którego zdefiniowano pseudoklasę hieprłączy przeglądarka nie musi ładować całego dokumentu od nowa, tylko dokonuje reformatowania elementu na bieżącej stronie, w taki sposób jakby klasa została wpisana ręcznie. Oznacza to, że gdy arkusz stylów nakazuje wyświetlać odnośniki aktywne („active”) czcionką większą niż odnośniki odwiedzone, to przeglądarka nie musi reformatować dynamicznie całego dokumentu gdy użytkownik kliknie na odwiedzanym już łączu.
Selektory pseudoklas nie pasują do zwykłych klas i odwrotnie. Poniższa zasada nie wywołałaby żadnego efektu:
A:link { color: red }
<A CLASS=link NAME=target5> ... </A>
W CSS1 pseudoklasy hiperłączy działają tylko na element „A”. Dzięki temu w selektorze można opuścić element, do którego się on odnosi:
A:link { color: red }
:link { color: red }
Obydwa powyższe selektory w CSS1 wywołają podobny efekt.
W nazwach pseudoklas nie rozróżniane są małe i wielkie litery
Pseudoklas można używać w selektorach potomka:
A:link IMG { border: solid blue }
Pseudoklasy można także stosować w połączeniu ze zwykłymi klasami:
A.external:visited { color: blue }
<A CLASS=external HREF="http://out.side/">external link</A>
Jeżeli odnośnik w powyższym przykładzie został odwiedzony, to jego kolor zmieni się na niebieski. Nazwy zwykłych klas w selektorach występują przed nazwami pseudoklas.
2.2 Pseudoelementy typograficzne
Niektóre efekty typograficzne nie są związane ze strukturą dokumentu, lecz z elementami typograficznymi widocznymi w oknie przeglądarki lub w obszarze roboczym. W CSS1 można uzyskać dostęp do dwóch takich elementów przy pomocy pseudoelementów: pierwsza linia elementu oraz pierwsza litera.
CSS1 core: Aplikacja kliencka może zignorować reguły zawierające pseudoelementy „:first-line” lub „:first-letter” w selektorze lub alternatywnie obsługiwać tylko podzbiór tych własności dla tych pseudoelementów (rozdział 7).
2.3 Pseudoelement „first-line”
Pseudoelement „first-line” służy do zmiany wyglądu pierwszej linii tekstu.
<STYLE TYPE="text/css">
P:first-line { font-variant: small-caps }
</STYLE>
<P>Pierwsza linia artykułu z Newsweeka</P>
W przeglądarce tekstowej powyższy fragment mógłby wyglądać następująco:
PIERWSZA LINIA
artykułu z Newsweeka.
Fikcyjna sekwencja znaczników w powyższym przykładzie wygląda następująco:
<P> <P:first-line> Pierwsza linia </P:first-line> artykułu w Newsweeku. </P>
Znacznik zamykający „first-line” został umieszczony na końcu pierwszej linii wg formatowania w obszarze roboczym.
Pseudoelement „first-line” może być stosowany tylko z elementami blokowymi.
Pseudoelement „first-line” ma podobne właściwości jak element śródliniowy z pewnymi ograniczeniami. Tylko następujące atrybuty mogą być stosowane dla elementu „first-line”: atrybuty czcionki (5.2), kolory i tło (5.3), „word-spacing” (5.4.1), „letter-spacing” (5.4.2), „text-decoration” (5.4.3), „vertical-align” (5.4.4), „text-transform” (5.4.5), „line-height” (5.4.8), „clear” (5.5.26).
2.4 Pseudoelement „first-letter”
Pseudoelement „first-letter” służy do zmiany wyglądu pierwszej litery lub rozciągania pierwszej litery na dolne linie. Pseudoelement „first-letter” przypomina elementy śródliniowe, jeżeli ma ustawioną własność „float” na „none”. W przeciwnym wypadku zachowuje się jak elementy pływające. Atrybuty, które mogą być stosowane dla pseudoelementu „first-letter”: atrybuty czcionki (5.2), kolory i tło (5.3), „text-decoration” (5.4.3), „vertical-align” (tylko jeżeli wartość „float” ustawiona jest na „none”, (5.4.4), „text-transform” (5.4.5), „line-height” (5.4.8), marginesy (5.5.1-5.5.5), dopełnienie (5.5.6-5.5.10), obramowanie (5.5.11-5.5.22), „float” (5.5.25), „clear” (5.5.26).
Poniższy przykład przedstawia jak można uzyskać efekt rozciągnięcia pierwszej litery na dwie linie:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article in The Economist.</P>
</BODY>
</HTML>
Jeżeli przeglądarka tekstowa obsługiwałaby pseudoelement „first-line” (a prawdopodobnie nie obsługuje), powyższy przykład mógłby wyglądać następująco:
___ | HE FIRST few | words of an article in the Economist.
Fikcyjna sekwencja znaczników przedstawia się następująco:
<P> <SPAN> <P:first-letter> T </P:first-letter>he first </SPAN> few words of an article in the Economist. </P>
Należy zauważyć, że znacznik otwierający i zamykający pseudoelementu „first-letter” umieszczone są bezpośrednio przed i po literze, którą zmieniają, podczas gdy znacznik otwierający pseudoelementu „first-line” umieszczany jest bezpośrednio po znaczniku otwierającym elementu, do którego się odnosi.
O tym, które znaki znajdą się wewnątrz elementu „first-letter” decyduje przeglądarka. Znaki cudzysłowu poprzedzające pierwszą literę normalnie powinny znaleźć się wewnątrz pseudoelementu.
|| /\ bird in
/ \ the hand
/----\ is worth
/ \ two in
the bush," says an
old proverb.
Natomiast znaki takie jak np. nawias lub wielokropek lub inne normalnie nie zaliczane do liter (np. cyfry, symbole matematyczne) które pojawiają się na początku, są zazwyczaj ignorowane przez pseudoelement „first-letter”.
W niektórych językach mogą istnieć oddzielne zasady dotyczące traktowania pewnych kombinacji liter. Na przykład w języku holenderskim kombinacja liter "ij" pojawiająca się na początku słowa powinna być traktowana przez pseudoelement „first-letter” jako jeden znak.
Pseudoelement „first-letter” można stosować tylko dla elementów blokowych.
2.5 Pseudoelementy w selektorach
Pseudoelementy mogą występować tylko na końcu selektorów potomka:
BODY P:first-letter { color: purple }
Pseudoelementy można także łączyć ze zwykłymi klasami w selektorach:
P.initial:first-letter { color: red }
<P CLASS=initial>First paragraph</P>
Powyższy przykład spowodowałby, że pierwsza litera wszystkich elementów „P” z klasą „initial” miałaby kolor czerwony. W kombinacji z klasami lub pseudoklasami, pseudoelementy powinny występować na końcu selektora. W selektorze może znajdować się maksymalnie jeden pseudoelement.
2.6 Użycie wielu pseudoelementów naraz
Możliwe jest użycie kilku pseudoelementów naraz:
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Trochę tekstu, który zajmuje dwie linijki</P>
W tym przykładzie, pierwsza litera każdego elementu „P” miałaby kolor zielony, a wielkość czcionki wynosiłaby 24pt. Reszta pierwszej linii (zgodnie z tym jak tekst został wyświetlony na ekranie) byłaby niebieska. Zakładając, że złamanie linii nastąpi przed słowem "zajmuje", fikcyjna sekwencja znaczników wyglądałaby następująco:
<P> <P:first-line> <P:first-letter> T </P:first-letter>Trochę tekstu, który </P:first-line> zajmuje dwie linijki </P>
Element „first-letter” znajduje się wewnątrz elementu „first-line”. Element „first-letter” odziedziczy wszystkie właściwości elementu „first-line”. Jeżeli, natomiast takie same własności zostały zdefiniowane dla obu elementów, to zostaną one nadpisane.
Jeżeli zdarzy się sytuacja, w której pseudoelement "rozrywa" jakiś rzeczywisty element, to zachodzi potrzeba utworzenia dodatkowych znaczników w fikcyjnej sekwencji znaczników. Na przykład, jeżeli element SPAN rozciąga się poza fikcyjny znacznik </P:first-line>, to zostanie utworzona dodatkowa para otwierającego i zamykającego znacznika SPAN, a fikcyjna sekwencja znaczników wygląda następująco:
<P> <P:first-line> <SPAN> Ten tekst znajduje się wewnątrz długiego </SPAN> </P:first-line> <SPAN> elementu SPAN </SPAN>
Niniejszy dokument jest tłumaczeniem rekomendacji W3C Cascading Style Sheets, level 1. Tłumaczenie to nie ma statusu dokumentu normatywnego i może zawierać błędy wynikające z tłumaczenia. Tylko dokument znajdujący się na stronie W3C pod adresem http://www.w3.org/TR/REC-CSS1 ma charakter normatywny.
Copyright © 2004 W3C® (MIT, ERCIM, Keio), Wszystkie prawa zastrzeżone. W3C stosuje następujące zasady dotyczące odpowiedzialności cywilnej, znaków towarowych, używania dokumentu i licencji oprogramowania.