Kurs HTML - style (selektory pseudoelementów)










SPIS TREŚCI


Pierwsza linia  - 
Pierwsza litera  - 
Tekst przed...  - 
Tekst po...


Selektory pseudoelementów




PIERWSZA LINIA
(interpretuje Internet Explorer 5.5, Netscape 6, Opera 5)
SELEKTOR:first-line { cecha: wartość }

SELEKTOREM może być dowolny znacznik języka HTML (np.: P - paragraf,
Hn - tytuł określonego rzędu czy TD - komórka tabeli i inne)
[zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane
poprzez style i zostaną opisane w dalszych rozdziałach.



Polecenie raz zdefiniowane w treści
nagłówkowej (wewnętrzny arkusz stylów),
pozwala na nadanie określonych cech wszystkim pierwszym linijkom, znajdującym się
wewnątrz znacznika, na który wskazuje selektor.


UWAGA! Polecenie nie interpretuje IE5, natomiast w IE6 wszystko jest w porządku.

Przykład:
W wewnętrznym arkuszu stylów
została umieszczona następująca deklaracja:

H4:first-line { color: red }


Dlatego wszystkie pierwsze linijki wchodzące w skład tytułów rzędu czwartego,
będą miały czerwony kolor:

To jest tytuł rzędu czwartego... To jest tytuł rzędu czwartego...
To jest tytuł rzędu czwartego... To jest tytuł rzędu czwartego...
To jest tytuł rzędu czwartego... To jest tytuł rzędu czwartego...

Jeśli używasz Internet Explorera 5, wszystkie linijki w powyższym tytule będą tego
samego koloru (nie zobaczysz efektu). Natomiast w IE6 wszystko jest w porządku.




PIERWSZA LITERA
(interpretuje Internet Explorer 5.5, Netscape 6, Opera 5)
SELEKTOR:first-letter { cecha: wartość }

SELEKTOREM może być dowolny znacznik języka HTML (np.: P - paragraf,
Hn - tytuł określonego rzędu czy TD - komórka tabeli i inne)
[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 na nadanie określonych cech pierwszej literze treści,
znajdującej się wewnątrz znacznika, na który wskazuje selektor.


UWAGA! Polecenie nie interpretuje IE5, natomiast w IE6 wszystko jest w porządku.

Przykład:
W wewnętrznym arkuszu stylów
została umieszczona następująca deklaracja:

H5:first-letter { color: red }


Dlatego pierwsza litera każdego tytułu rzędu piątego ma czerwony kolor:

To jest tytuł rzędu piątego

Jeśli używasz Internet Explorera 5, wszystkie litery w powyższym tytule będą tego
samego koloru (nie zobaczysz efektu). Natomiast w IE6 wszystko jest w porządku.



Inny ciekawy przykład:


P.akapit:first-letter { color: red; font-family: 'Times New Roman', serif; font-size: 300%; float: left }


(wyraz "akapit" oznacza nazwę klasy)


W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe...
W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe...
W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe...
W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe...
W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe...
W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe...
W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe...
W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe...
W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe...
W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe...




TEKST PRZED...
(interpretuje Netscape 6, Opera 5)
SELEKTOR:before { content: "treść" }

SELEKTOREM może być dowolny znacznik języka HTML (np.: P - paragraf,
Hn - tytuł określonego rzędu czy TD - komórka tabeli i inne)
[zobacz: Wstawianie stylów].
Natomiast jako wyraz "treść" można wpisać dowolny tekst.



Polecenie pozwala automatycznie dopisywać podaną treść przed określonymi
elementami (na które wskazuje selektor).


UWAGA! Polecenie nie interpretuje IE6.

Przykład:
W wewnętrznym arkuszu stylów
została umieszczona następująca deklaracja:

H3:before { content: "POCZĄTEK "; color: red }


Dlatego wszystkie tytułu rzędu trzeciego będą rozpoczynały się od wyrazu
"POCZĄTEK" (mimo, że nie wpiszemy tego wyrazu bezpośrednio w treści tytułu):

To jest tytuł rzędu trzeciego, rozpoczynający się wyrazem "POCZĄTEK"
pomimo, że nie został on umieszczony w treści tytułu.

Jeśli używasz Internet Explorera 5 lub 6, powyższy tytuł będzie się rozpoczynał
normalnie ("To jest tytuł rzędu trzeciego...") - nie zobaczysz efektu.




TEKST PO...
(interpretuje Netscape 6, Opera 5)
SELEKTOR:after { content: "treść" }

SELEKTOREM może być dowolny znacznik języka HTML (np.: P - paragraf,
Hn - tytuł określonego rzędu czy TD - komórka tabeli i inne)
[zobacz: Wstawianie stylów].
Natomiast jako wyraz "treść" można wpisać dowolny tekst.



Polecenie pozwala automatycznie dopisywać podaną treść po określonych
elementach (na które wskazuje selektor).


UWAGA! Polecenie nie interpretuje IE6.

Przykład:
W wewnętrznym arkuszu stylów
została umieszczona następująca deklaracja:

H6:after { content: " KONIEC"; color: red }


Dlatego wszystkie tytułu rzędu szóstego będą kończyły się wyrazem
"KONIEC" (mimo, że nie wpiszemy tego wyrazu bezpośrednio w treści tytułu):

To jest tytuł rzędu szóstego, kończący się wyrazem "KONIEC"
pomimo, że nie został on umieszczony w treści tytułu.

Jeśli używasz Internet Explorera 5 lub 6, powyższy tytuł będzie się kończył
normalnie ("...w treści tytułu.") - nie zobaczysz efektu.