[ aktualizacja 21.12.2000 ]
Kilka ważnych pojęć:
Przykładowe drzewo:
Źródło: Cascading Style Sheets, level 2 - CSS2 Specification
a. Selektor prostySelektor ten został opisany na początku rozdziału.
b. Selektor uniwersalnyWartości ogólne (uniwersalne) można przypisywać dokumentowi na najwyższym poziomie, czyli w BODY, ale można także stosować tzw. selektory uniwersalne, oznaczane gwiazdką.
Selektor o postaci:
* {color:#FF0000; font-weight:bold}
spowoduje, że cały tekst (w akapitach, wykazach, tabelach itd.) będzie wyświetlany jako pogrubiony i w czerwonym kolorze.
Z kolei selektor
*.klasa1 {font-family:Verdana}
spowoduje, że wszystkie elementy opatrzone klasą o nazwie klasa1 będą wyświetlane za pomocą czcionki Verdana.
akapit z klasą "klasa1" - czcionka Verdana 15 pt
Interpretacja: Internet Explorer, Netscape 6, Opera 5.
c. Selektor potomka (descendant selector)Selektor potomka (w CSS1 jest to selektor kontekstowy) pozwala nadawać styl tym elementom, które mają określonych przodków. Na przykład:
H1 I {color:red}
Oznacza to, że jeśli fragment tytułu stopnia pierwszego będzie przedstawiony za pomocą czcionki pochylonej, to automatycznie zyska on także czerwony kolor, np.
Podobnie, definicja
UL UL LI {color:green}
spowoduje, że elementy wykazu na drugim poziomie zagnieżdżenia będą przedstawione w zielonym kolorze, podczas gdy elementy wykazu pierwszego poziomu będą miały domyślny kolor, np.
Interpretacja: Internet Explorer, Netscape 6, Opera 5.
Zauważmy, że w definicji selektora potomka poszczególne elementy są rozdzielone spacjami. Spacja jest tzw. kombinatorem - w CSS2 rozróżniamy trzy rodzaje kombinatorów: spacja, znak + i znak >. Spacje wokół znaków + i > są opcjonalne.
d. Selektor dziecka (child selector)
Element jest dzieckiem w stosunku do innego elementu, jeśli jest w nim zawarty i jest o jeden szczebel niżej w hierarchii. Na przykład, w <h1> <h3> </h3> </h1>, H3 jest dzieckiem H1, ale wszystko w ramach H3 jest już dzieckiem wobec H3, a nie H1 (chociaż jest zarazem potomkiem H1). Jeśli chcemy , aby wszystkie H3, które są dziećmi H1, były czerwone, użyjemy polecenia:
H1 > H3 { color : red }
Inny przykład:
p > u { color : white }
to jest białe podkreślenie w ramach akapitu
Podkreślenie poza znacznikami akapitu nie jest już białe.Interpretacja: Netscape 6, Opera 5.
Ilustracja dla użytkowników IE:
e. Selektor braci (adjacent sibling selector)
Selektor pozwala nadawać określone formatowanie jednemu z bezpośrednio sąsiadujących ze sobą elementów, mających tego samego rodzica. Jeśli np. mamy fragment pogrubiony i fragment pochylony w ramach akapitu, zaś kod stylu ma postać:
B + I {color:green}
fragment pochylony uzyska odpowiednie formatowanie. Zauważmy, że stosujemy tutaj kombinator w postaci znaku +.
Akapit, w tym pogrubienie oraz sąsiadujące pochylenie i reszta akapitu
Inny przykład:
H1 + H2 { margin-left: +15mm }
Polecenie realizują Netscape 6 i Opera 5.
Ilustracja dla użytkowników IE: