To co zamierzam wyjaśnić w tym odcinku, jest niezbędnym początkiem naszych rozważań o arkuszach stylów. Przedstawione informacje są konieczne gdyż umożliwiają zrozumienie zasad działania arkuszy stylów, a zwłaszcza zasady kaskadowości i dziedziczenia własności stylowych przez elementy języka HTML.
Proszę przyjrzeć się poniższemu przykładowi. Przygotowałem prymitywną stronę: poniżej przedstawiony jest jej kod i jej prezentacja w przeglądarce. Analizując kod, zwracajcie uwagę na wcięcia kolejnych linii kodu.
<html> <head> <title>Struktura elementów</title> </head> <body> <h1>Nagłówek 1</h1> <p>Akapit</p> <table border="1"> <colgroup> <col span="2"> </colgroup> <thead> <tr><th colspan="2">Nagłówek</th></tr> </thead> <tfoot> <tr><th colspan="2">Stopka</th></tr> </tfoot> <tbody> <tr> <td>Prosta</td><td>Tabela</td> </tr> </tbody> </table> <ul> <li>Lista</li> <li>Lista</li> <li>Lista</li> </ul> <hr> </body> </html>
Dokument HTML jest tak zbudowany, że elementy HTML tworzą strukturę zwaną hierarchią dokumentu (document tree). Każdy element w hierarchii posiada wyłącznie jednego „rodzica” (parent), z wyjątkiem elementu podstawowego, który „rodzica” nie posiada. Rysunek powyżej przedstawia przykładową hierarchię elementów. Elementem podstawowym jest HTML, jego „dziećmi” (children) są HEAD oraz BODY (które względem siebie są „rodzeństwem” – sibling). HEAD posiada „dziecko” TITLE, natomiast BODY ma całą rodzinę…
Hierarchia elementów w dokumencie HTML
Analizując wcześniejszy przykład, można powiedzieć w odniesieniu do wykorzystanych elementów HTML, że ich wzajemne „rodzinne powinowactwa” przedstawiają się następująco:
- Element A zwany jest dzieckiem (child) elementu B, jeśli tylko B jest rodzicem (parent) A. Np. dzieckiem <BODY> jest <P>. Rodzicem <TH> jest <TR>.
- Element A zwany jest potomkiem (descendant) elementu B, jeśli A jest dzieckiem B lub A jest dzieckiem jakiegoś elementu C, który jest potomkiem B. Np. potomkiem <TABLE> jest <TD>.
- Element A zwany jest przodkiem (ancestor) elementu B, jeśli tylko B jest potomkiem A. Np. przodkiem <TD> jest <TABLE>.
- Element A zwany jest rodzeństwem (sibling) elementu B, jeśli i tylko jeśli B i A posiadają tego samego rodzica. Np. <P> i <UL> są rodzeństwem.
Element A zwany jest „starszym” rodzeństwem, jeśli występuje przed B w hierarchii elementów zapisanych w dokumencie. Element B zwany jest „młodszym” rodzeństwem, jeśli występuje po A w hierarchii elementów zapisanych w dokumencie. Np. <P> jest młodszym bratem (albo siostrą – wybierajcie) <H1> i jednocześnie starszym bratem (siostrą) <TABLE>. - Element A zwany jest poprzedzającym (preceding) element B, jeśli A i tylko A jest przodkiem B lub A jest starszym bratem (siostrą) elementu B. Np. <UL> jest poprzedzajacym <LI>, jak również <H1> jest poprzedzającym <P>.
- Element A zwany jest następującym (following) po elemencie B, jeśli tylko B poprzedza element A. Np. <LI> jest następującym po <UL>, jak również <P> jest następującym po <H1>.
Zrozpaczony czytelniku! Uspokój się, przestań gryźć klawiaturę – już wyjaśniam, do czego jest potrzebna ta koszmarna łamigłówka. Otóż w następnej części poradnika zajmę się szczegółowym opisem budowy arkusza stylów, sciślej – składni definicji pojedynczego stylu. Jak się tam okaże, wiedza o „powinowactwach z wyboru” pozwala decydować projektantowi o zakresie oddziaływania określonego stylu na poszczególne elementy języka HTML. Inaczej mówiąc – styl możemy stosować globalnie do każdego jak leci elementu HTML albo wybiórczo, selektywnie. Tak więc zapraszając do dalszej lektury, polecam szanownej pamięci to słowo.