Kurs HTML - style (selektory pseudoklas)










SPIS TREŚCI


Odsyłacz podstawowy  - 
Odsyłacz odwiedzony  - 
Odsyłacz aktywny  - 
Wskazanie myszką  - 
Zogniskowanie  - 
Atrybut języka  - 
Pierwsze dziecko


Selektory pseudoklas




ODSYŁACZ PODSTAWOWY
(interpretuje Internet Explorer, Netscape 6, Opera 5)

Dla odsyłaczy nie można stosować zwykłego selektora prostego.
Musimy zawsze określić tzw. pseudoklasę odsyłaczową (:link, :visited, :active lub :hover).


Ogólny:
A:link { cecha: wartość }

gdzie litera "A" na początku deklaracji, jest selektorem odsyłacza
[zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane
poprzez style i zostaną opisane w dalszych rozdziałach.


Polecenie pozwala nadać określone atrybuty formatowania dla wszystkich podstawowych
odsyłaczy na stronie (czyli takich, które nie zostały jeszcze odwiedzone).


Przykład:

Ten odsyłacz jest koloru czerwonego




Z podaniem klasy:
A.klasa:link { cecha: wartość }

gdzie litera "A" na początku deklaracji, jest selektorem odsyłacza
[zobacz: Wstawianie stylów].
Wyraz "klasa" jest nazwą
klasy selektorów.
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane
poprzez style i zostaną opisane w dalszych rozdziałach.


Taka deklaracja stylu umożliwia ustalenie atrybutów dla wybranych odsyłaczy, które
zostały opatrzone podaną nazwą klasy.

Przykład:
W wewnętrznym arkuszu stylów
tej strony została umieszczona następująca deklaracja:
A.klasa:link { color: red }
Dzięki temu teraz wystarczy napisać:
<A class="klasa" HREF="#odsylacz_podstawowy">To jest odsyłacz z podaniem klasy</A>


aby otrzymać:

To jest odsyłacz z podaniem klasy





ODSYŁACZ ODWIEDZONY
(interpretuje Internet Explorer, Netscape 6, Opera 5)

Ogólny:
A:visited { cecha: wartość }

gdzie litera "A" na początku deklaracji, jest selektorem odsyłacza
[zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane
poprzez style i zostaną opisane w dalszych rozdziałach.


Polecenie pozwala nadać określone atrybuty formatowania dla wszystkich odwiedzonych
już kiedyś odsyłaczy.


Przykład:

Jeśli ten odsyłacz został już odwiedzony, to będzie miał kolor
bladoniebieski




Z podaniem klasy:
A.klasa:visited { cecha: wartość }

gdzie litera "A" na początku deklaracji, jest selektorem odsyłacza
[zobacz: Wstawianie stylów].
Wyraz "klasa" jest nazwą
klasy selektorów.
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane
poprzez style i zostaną opisane w dalszych rozdziałach.


Taka deklaracja stylu umożliwia ustalenie atrybutów dla wybranych odsyłaczy, które
były już odwiedzone, a dodatkowo zostały opatrzone podaną nazwą klasy.

Przykład:
W wewnętrznym arkuszu stylów
tej strony została umieszczona następująca deklaracja:
A.klasa:visited { color: red }
Dzięki temu teraz wystarczy napisać:
<A class="klasa" HREF="#odsylacz_odwiedzony">To jest odsyłacz z podaniem klasy</A>


aby otrzymać:

To jest odsyłacz z podaniem klasy





ODSYŁACZ AKTYWNY
(interpretuje Internet Explorer, Netscape 6, Opera 5)

Ogólny:
A:active { cecha: wartość }

gdzie litera "A" na początku deklaracji, jest selektorem odsyłacza
[zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane
poprzez style i zostaną opisane w dalszych rozdziałach.


Polecenie pozwala nadać określone atrybuty formatowania dla
odsyłacza, który jest w danej chwili aktywny (został właśnie uruchomiony).


Przykład:

Jeśli przytrzymasz wciśnięty klawisz myszki na tym
odsyłaczu,
to zauważysz, że będzie on wtedy miał kolor czerwony.




Z podaniem klasy:
A.klasa:active { cecha: wartość }

gdzie litera "A" na początku deklaracji, jest selektorem odsyłacza
[zobacz: Wstawianie stylów].
Wyraz "klasa" jest nazwą
klasy selektorów.
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane
poprzez style i zostaną opisane w dalszych rozdziałach.


Taka deklaracja stylu umożliwia ustalenie atrybutów dla wybranych odsyłaczy, które
będą w danej chwili aktywne (właśnie uruchomione), a dodatkowo zostały opatrzone podaną
nazwą klasy.

Przykład:
W wewnętrznym arkuszu stylów
tej strony została umieszczona następująca deklaracja:
A.klasa1:active { color: red }
Dzięki temu teraz wystarczy napisać:
<A class="klasa1" HREF="#odsylacz_aktywny">To jest odsyłacz z podaniem klasy</A>


aby otrzymać ten sam efekt co poprzednio, a jednocześnie nie zmieniać innych odsyłaczy:


Jeśli przytrzymasz wciśnięty klawisz myszki na tym
odsyłaczu,
to zauważysz, że będzie on wtedy miał kolor różowy.






WSKAZANIE MYSZKĄ
(interpretuje Internet Explorer, Netscape 6, Opera 5)

Ogólnie:
A:hover { cecha: wartość }

gdzie litera "A" na początku deklaracji, jest selektorem odsyłacza
[zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane
poprzez style i zostaną opisane w dalszych rozdziałach.


Polecenie pozwala nadać określone atrybuty formatowania dla
odsyłacza, który jest w danej chwili wskazany wskaźnikiem myszki, ale nie został kliknięty.


Przykład:

Jeśli wskażesz myszką ten odsyłacz (ale nie klikniesz),
pojawi się pod nim podkreślenie.




Z podaniem klasy:
A.klasa:hover { cecha: wartość }

gdzie litera "A" na początku deklaracji, jest selektorem odsyłacza
[zobacz: Wstawianie stylów].
Wyraz "klasa" jest nazwą
klasy selektorów.
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane
poprzez style i zostaną opisane w dalszych rozdziałach.


Taka deklaracja stylu umożliwia ustalenie atrybutów dla odsyłaczy, opatrzonych podaną
klasą, które będą w danej chwili wskazane myszką, ale nie zostały kliknięte.

Przykład:
W wewnętrznym arkuszu stylów
tej strony została umieszczona następująca deklaracja:
a.klasa2:hover { color: red; background: none }
Dzięki temu teraz wystarczy napisać:
<A class="klasa2" HREF="#wskazanie_myszka">To jest odsyłacz z podaniem klasy</A>


aby otrzymać ten tekst koloru czerwonego (bez tła), a jednocześnie nie zmieniać innych odsyłaczy:


Jeśli wskażesz myszką (ale nie klikniesz) ten
odsyłacz,
to zmieni on kolor na czerwony.






ZOGNISKOWANIE
(interpretuje Netscape 6, Opera 7)
SELEKTOR:focus { cecha: wartość }

SELEKTOR wskazuje jakiemu elementowi nadajemy formatowanie
(dla selektora uniwersalnego są to wszystkie elementy)
[zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane
poprzez style i zostaną opisane w dalszych rozdziałach.


Polecenie pozwala nadać określone atrybuty formatowania dla
elementu (np. odsyłacza lub pola formularza), który przyjmuje w danej chwili zogniskowanie.
Przykładowo dotyczy to odsyłacza, wybranego za pomocą klawisza Tabulatora czy pola
formularza, w którym znalazł się kursor.


UWAGA! Polecenie nie interpretuje IE6.

Przykład:
A:focus { color: red; background: none }

Jeśli wybierzesz ten odsyłacz za pomocą Tabulatora,
zmieni on kolor na czerwony.

Inny przykład:
TEXTAREA:focus { color: white; background: black }

Kliknij tutaj lub przenieś kursor za pomocą klawisza Tabulatora,
a tło w tym polu stanie się czarne natomiast tekst - biały.


Jeśli używasz przeglądarki internetowej innej niż Netscape 6 lub Opera 7, prawdopodobnie
nie zobaczysz żadnego efektu.




ATRYBUT JĘZYKA
(interpretuje Mozilla i Opera 7.5)
SELEKTOR:lang(język) { cecha: wartość }

SELEKTOREM może być praktycznie dowolny znacznik języka HTML
[zobacz: Wstawianie stylów].
Jako "język" należy wpisać nazwę języka (np.: en - angielski).
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane
poprzez style i zostaną opisane w dalszych rozdziałach.


Polecenie pozwala nadać określone atrybuty formatowania dla elementów, którym został
nadany z poziomu HTML atrybut języka LANG="język"
[zobacz: Skróty nazw języków].


UWAGA! Polecenie nie interpretuje IE6.

Przykład:
Po wpisaniu w arkuszu stylów:
P:lang(en) { color: red }
a w dowolnym miejscu strony:
<P LANG="en">To jest paragraf z atrybutem języka LANG="en"</P>

Na ekranie powinniśmy otrzymać tekst koloru czerwonego:

To jest paragraf z atrybutem języka LANG="en"

Niestety przeglądarki nie interpretują tego polecenia, więc prawdopodobnie nie
zauważysz żadnego efektu.




PIERWSZE DZIECKO
(interpretuje Netscape 6 i Opera 7.2)
DZIECKO:first-child { cecha: wartość }
lub
RODZIC > DZIECKO:first-child { cecha: wartość }

RODZICEM oraz DZIECKIEM może być praktycznie dowolny znacznik języka HTML,
przy czym dziecko zawiera się w znaczniku rodzica
[zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane
poprzez style i zostaną opisane w dalszych rozdziałach.


Pierwsze z poleceń pozwala nadać określone atrybuty formatowania dla elementów, będących
pierwszym dzieckiem dowolnego innego elementu - o jeden rząd niżej w hierarchii
drzewa dokumentu (rodzaj znacznika rodzica
nie ma w tym przypadku znaczenia).
Natomiast drugie polecenie pozwala dodatkowo określić typ znacznika rodzica.


UWAGA! Polecenie nie interpretuje IE6.

Przykład:
Po wpisaniu w arkuszu stylów:
H4:first-child { color: red }
a w dowolnym miejscu strony:
<BLOCKQUOTE>
  To jest cytat blokowy
  <H4>To jest tytuł wewnątrz cytatu blokowego - pierwsze dziecko (powinien być czerowny)</H4>
  <H4>A to jest następny tytuł - drugie dziecko (nie powinien być czerowny)</H4>
  ...ciąg dalszy cytatu.
</BLOCKQUOTE>

Na ekranie powinniśmy otrzymać tekst, w którym zawiera się tytuł rzędu czwartego
koloru czerwonego:


To jest cytat blokowy
To jest tytuł wewnątrz cytatu blokowego - pierwsze dziecko (powinien być czerowny)
A to jest następny tytuł - drugie dziecko (nie powinien być czerowny)
...ciąg dalszy cytatu.


Należy zauważyć, że dla wpisu:

<BLOCKQUOTE>
  To jest zwykły tekst
  <P>To jest paragraf</P>
  <H4>To jest tytuł (drugie dziecko) wewnątrz cytatu blokowego</H4>
</BLOCKQUOTE>

nie otrzymamy żadnych rezultatów, ponieważ w tym przypadku tytuł nie jest pierwszym dzieckiem.



Dla deklaracji w arkuszu stylów:

DIV > H5:first-child { cecha: wartość }

Odpowiednie atrybuty otrzyma tytuł H5, będący pierwszym dzieckiem elementu DIV.
Jeśli będzie się on zawierał w innym znaczniku (np. BLOCKQUOTE - jak powyżej),
jego wygląd nie zostanie zmieniony.



Inny przykład:

H6:first-child U { cecha: wartość }

Odpowiednie cechy otrzyma znacznik U, będący potomkiem
elementu H6, który z kolei jest czyimś pierwszym dzieckiem (nie ma znaczenia czyim), np.:

<BLOCKQUOTE>
  <H6>To jest tytuł (pierwsze dziecko) wewnątrz cytatu blokowego,
  a to jest <I>pochylenie, wewnątrz którego znajduje się <U>podkreślenie</U></I></H6>
</BLOCKQUOTE>


Jeśli używasz przeglądarki internetowej innej niż Netscape 6 lub Opera 7, prawdopodobnie
nie zobaczysz żadnego efektu.