Kurs HTML - style (selektory elementów)
SPIS TREŚCI
Dziedziczenie stylów -
Selektor prosty -
Selektor uniwersalny -
Selektor potomka -
Selektor dziecka -
Selektor braci -
Grupowanie selektorów
Selektory elementów
DZIEDZICZENIE STYLÓW
Z drzewem dokumentu związana jest również własność
dziedziczności stylów.
Polega ona na tym, że elementy leżące niżej w hierarchii
(potomkowie), jeśli nie zaznaczymy inaczej,
dziedziczą (przejmują) atrybuty formatowania, które zostały nadane ich
przodkom. Niestety w niektórych przeglądarkach
internetowych zdarza się błędna interpretacja dziedziczenia stylów.
Dlatego zawsze sprawdzaj w praktyce zastosowanie tej własności.
Problemy stwarzają np. elementy tabeli: nawet jeśli zdefiniujemy określoną
wielkość czcionki dla BODY (wyżej w hierarchii), w Internet Explorerze 5
nie spowoduje to jej zmiany w poszczególnych komórkach (TD) ani w tytule tabeli (CAPTION).
Natomiast w IE6 wszystko jest w porządku, ale tylko wtedy, gdy zastosujemy wersję DTD typu Strict
(deklaracja typu dokumentu - określa wersję użytego HTML),
czyli wpiszemy na stronie prolog:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
[zobacz: Ramy dokumentu].
Ale wtedy nie możemy stosować poleceń, które nie wchodzą w skład specyfikacji
(np. określić kolor suwaków),
na co pozwala wersja przejściowa DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
W Strict DTD nie przewiduje się również znaczników oraz atrybutów
zdeprecjonowanych w specyfikacji HTML 4.01
(chociaż jak dotychczas nadal są one interpretowane).
Przykład:
To jest paragraf koloru zielonego, wewnątrz którego znajduje się:
pogrubienie oraz podkreślenie, którym nie zostały nadane żadne atrybuty,
a więc dziedziczą je po przodku, czyli po paragrafie (są również zielone).
A to jest pochylenie, które znajduje się także wewnątrz tego
samego akapitu, ale został mu nadany atrybut koloru (czerwonego) i dlatego nie
odziedziczył stylu po przodku.
SELEKTOR PROSTY
SELEKTOR { cecha: wartość }
gdzie wyrazem SELEKTOR może być praktycznie dowolny znacznik HTML,
np.: P (paragraf), Hn (tytuł), TD (komórka tabeli) i inne
[zobacz: Wstawianie stylów].
To właśnie elementom znajdującym się pomiędzy tymi znacznikami,
nadajemy atrybuty formatowania.
Wyjątkiem są odsyłacze - dla nich musimy zawsze określić tzw. pseudoklasę odsyłaczową
(:link oraz
:visited).
Wyrazy "cecha" (ang. property) oraz "wartość"
(ang. value) określają atrybuty elementu i zostaną
opisane w dalszych rozdziałach. Tutaj będą przedstawione jedynie selektory.
Selektor prosty jest podstawowym typem selektora. Pozwala on wybrać pojedynczy
zwykły element dokumentu HTML, a następnie nadać mu atrybuty (za pomocą cechy oraz
wartości - opisane w następnych rozdziałach). Selektor to
inaczej element (znacznik), występujący w kodzie źródłowym strony.
Przykład:
W
wewnętrznym arkuszu stylów na tej stronie
została umieszczona następująca deklaracja:
H5 { color: red }
Jak widać jest to selektor prosty (podstawowy). Dzięki niemu teraz wystarczy napisać:
<H5>To jest tytuł rzędu piątego</H5>
aby otrzymać tytuł, napisany czerwoną czcionką:
To jest tytuł rzędu piątego
SELEKTOR UNIWERSALNY
(interpretuje Internet Explorer, Netscape 6, Opera 5)
* { cecha: wartość }
gdzie wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną
opisane w dalszych rozdziałach
[zobacz także: Wstawianie stylów].
Selektor taki pozwala ustalić określone atrybuty dla wszystkich elementów strony,
a więc dla różnych selektorów prostych.
Możemy za pomocą tej komendy nadać to samo formatowanie dla wszystkich elementów na całej
stronie, niezależnie od ich typu (P, Hn, LI itd.). Niestety jego działanie nie zawsze jest jednoznaczne,
dlatego dużo bezpieczniej jest używać selektora BODY
chyba, że zastosujemy to polecenie w odniesieniu do klasy selektorów.
Jeśli selektor uniwersalny chcemy zastosować do selektora innego niż prosty
(w połączeniu z selektorami: atrybutów,
specjalnymi, pseudoelementów
lub pseudoklas), to gwiazdkę można pominąć.
Niestety niektóre starsze przeglądarki mogą mieć z tym kłopoty!
SELEKTOR POTOMKA
(interpretuje Internet Explorer, Netscape 6, Opera 5)
PRZODEK1 PRZODEK2... POTOMEK { cecha: wartość }
gdzie wyrazy "PRZODEK1, PRZODEK2,..." oraz "POTOMEK" są
selektorami prostymi, przy czym
przodek leży wyżej w hierarchii
drzewa dokumentu
[zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną
opisane w dalszych rozdziałach.
Selektor tego typu pozwala nadać atrybuty elementom, które leżą niżej w hierarchii
drzewa dokumentu (zawierają się w innych zewnętrznych znacznikach).
Dzięki temu możemy zmienić typ formatowania tylko dla określonych elementów, które
są podrzędne w stosunku do innych (przodków).
Potomek nie musi leżeć
bezpośrednio wewnątrz znacznika przodka. Może być zawarty jeszcze w innych
znacznikach, które z kolei zawierają się rodzicu. Nie jest wtedy konieczne
podawanie w deklaracji wszystkich rodziców, a jedynie przodka
i potomka.
Selektor taki jest szczególnie przydatny, dla określenia wyglądu odsyłaczy wewnątrz bloku,
ponieważ jeśli nie określimy dla nich tzw. pseudoklas odsyłaczowych,
nie odziedziczą one formatowania po
przodkach.
Przykład:
W
wewnętrznym arkuszu stylów na tej stronie
została umieszczona następująca deklaracja:
H4 U { color: red }
Dzięki temu, jeśli wewnątrz znacznika H4 (tytuł rzędu czwartego) znajdzie się
znacznik U (czyli podkreślenie), to zostanie on automatycznie napisany czcionką
koloru czerwonego:
To jest tytuł rzędu czwartego, a to jest podkreślenie (czerwone), umieszczone
wewnątrz tego tytułu oraz wewnątrz znacznika tekstu pochylonego
Zauważ, że selektor będący potomkiem nie musi zawierać się bezpośrednio w
znaczniku, którego selektor jest w deklaracji przodkiem. W naszym przypadku
w znaczniku H4 (przodek) znajduje się tekst pochylony (czyli I), a
dopiero w nim potomek - tekst pochylony (U).
Inny przykład:
OL UL UL LI { color: red }
Punkt pierwszy
Punkt drugi
Podpunkt 2.a
Podpunkt 2.b (OL)
Podpunkt 2.b.[1]
Podpunkt 2.b.[2]
Podpunkt 2.c
Punkt trzeci
Dla porównania zwykły wykaz UL nie jest czerwony:
Punkt pierwszy
Punkt drugi
Przykład z odsyłaczami:
H4 A:link, H4 A:visited { color: red }
wyrażnia :link oraz :visited to tzw.
pseudoklasy odsyłaczowe,
natomiast przecinek oznacza, że grupujemy selektory:
To jest tytuł rzędu czwartego, a to jest odsyłacz
wewnątrz tytułu.
SELEKTOR DZIECKA
(interpretuje Netscape 6, Opera 5)
RODZIC > DZIECKO { cecha: wartość }
gdzie wyrazy "RODZIC" oraz "DZIECKO" są
selektorami prostymi,
przy czym rodzic leży o jeden rząd wyżej w hierarchii
drzewa dokumentu
[zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną
opisane w dalszych rozdziałach.
Selektor tego typu pozwala nadać atrybuty elementom, które leżą o jeden rząd
niżej w hierarchii drzewa dokumentu (zawierają się w innym zewnętrznym znaczniku).
W odróżnieniu do poprzedniego przypadku, tutaj znacznik będący
dzieckiem, musi
znajdować się bezpośrednio wewnątrz znacznika rodzica.
UWAGA! Polecenie nie jest interpretowane przez IE6.
Przykład:
W
wewnętrznym arkuszu stylów na tej stronie
została umieszczona następująca deklaracja:
H4 > I { color: red }
Dzięki temu, jeśli wewnątrz znacznika H4 (tytuł rzędu czwartego) znajdzie się
znacznik I (czyli pochylenie tekstu), to zostanie on automatycznie napisany
czcionką koloru czerwonego:
To jest tytuł rzędu czwartego,
a to jest
pochylenie (nie powinno być czerwone) umieszczone wewnątrz H4, ale i wewnątrz znacznika pogrubienia.
Natomiast to jest pochylenie (powinno być czerwone) umieszczone bezpośrednio wewnątrz znacznika tytułu H4.
A to jest zwykłe pochylenie, umieszczone osobno (nie powinno być czerwone)
Jeśli używasz Internet Explorera, interpretacja powyższego przykładu prawdopodobnie nie
będzie poprawna. Tylko tytuł rzędu szóstego, który został napisany w drugiej
kolejności, powinien być czerwony.
SELEKTOR BRACI
(interpretuje Netscape 6, Opera 5)
BRAT1 + BRAT2 { cecha: wartość }
gdzie wyrazy "BRAT1" oraz "BRAT2" są
selektorami prostymi, przy czym leżą
one w tym samym rzędzie hierarchii
drzewa dokumentu
[zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną
opisane w dalszych rozdziałach.
Selektor ten umożliwia nadanie określonych atrybutów jednemu z bezpośrednio sąsiadujących
ze sobą braci - temu, który w deklaracji został
podany jako drugi (czyli BRAT2).
UWAGA! Polecenie nie jest interpretowane przez IE6.
Przykład:
W
wewnętrznym arkuszu stylów na tej stronie
została umieszczona następująca deklaracja:
H2 + H3 { color: red }
Dzięki temu, jeśli wewnątrz tego samego znacznika (rodzica), będą znajdowały się
znaczniki H2 oraz H3, to ten drugi uzyska określone atrybuty:
To jest cytat blokowy, wewnątrz którego znajduje się:
tytuł rzędu drugiego
oraz tytuł rzędu trzeciego (powinien być czerwony)
i tu kończy się blok.
A to jest tytuł rzędu trzeciego, ale już poza blokiem (nie powinien być czerwony)
Jeśli używasz Internet Explorera, interpretacja powyższego przykładu prawdopodobnie nie
będzie poprawna. Tylko tytuł rzędu trzeciego, który został napisany w ramach cytatu blokowego,
powinien być czerwony.
GRUPOWANIE SELEKTORÓW
SELEKTOR1, SELEKTOR2, SELEKTOR3,... { cecha: wartość }
gdzie wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną
opisane w dalszych rozdziałach
[zobacz także: Wstawianie stylów].
Taka deklaracja stylu pozwala nadać te same wartości atrybutów kilku różnym
selektorom jednocześnie (bez względu na ich położenie w hierarchii drzewa dokumentu).
Przykład:
W
wewnętrznym arkuszu stylów na tej stronie
została umieszczona następująca deklaracja:
H1, STRIKE, CITE { color: red }
Dlatego po wpisaniu:
<H1>Tytuł rzędu pierwszego</H1>
<STRIKE>To jest tekst przekreślony</STRIKE>
<CITE>To jest krótki cytat</CITE>
otrzymamy tekst, napisany w całości czcionką koloru czerwonego:
Tytuł rzędu pierwszego
To jest tekst przekreślony
To jest krótki cytat
Wyszukiwarka
Podobne podstrony:
option extended valid elementsChristmas elementaryelementsidentify?sign elements?84AB82Elementy wymagan organizacyjnezdeformowane elementyPA3 podstawowe elementy liniowe [tryb zgodności]Elementy struktury organizacyjnej i zarządzanie projektowaniem organizacjielementarz liczba 10 ALee Smith Fifth Element42 cząstki elementarneElementy składowe i struktura robotów cz 1Dr Janusz Maciaszek Elementy Logiki [do egzaminu]Elementy składowe i struktura robotów cz 2GDDKiA Instrukcja wyodrebniania elementow drogi na drogowym obiekcie mostowymwięcej podobnych podstron