Ach ta rodzinka – czyli o dziedziczeniu w CSS

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>

Zobacz.

Diagram ilustrujący drzewo dokumentu 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.

Scroll to Top