Dokumentumfa

Dokumentumfa

Faszerkezet

Aki webfejlesztésre vállalkozik, annak számára nem jelentenek újdonságot az egyes elemek kapcsolatát leíró faszerkezetek.

Az egyik leggyakrabban használt példa erre a háttértárolókon kialakított könyvtárszerkezet. Ebben az esetben a gyökér könyvtárban található alkönyvtáraknak is lehetnek alkönyvtárai, és minden alkönyvtárban további alkönyvtárakat hozhatunk létre.

A háttértárolóink könyvtárszerkezetéhez hasonló módon a HTML oldalakat felépítő elemek kapcsolatát is faszerkezetben szokás ábrázolni.

A böngésző egy-egy elemnek a fa szerkezetben (dokumentumfán) elfoglalt helyének ismeretében határozzák meg miként kell megjeleníteniük.

Melyek az öröklött tulajdonságaik.

Hol helyezkedjenek el a képernyőn. (Melyik elemben helyezkednek el? Melyik elem van előttük? Melyik mögöttük? Mely további elemeket tartalmaznak.)

Az adott elem tulajdonságainak meghatározásánál a webfejlesztőnek is ismerni kell az elemek dokumentumfán elfoglalt helyzetét. Ennek alapján lehet például csak egy meghatározott elem belsejében lévő (a dokumentumfán alatta elhelyezkedő) elemeknek egy adott tulajdonságát beállítani.

Példa:

Forráskód


<body>            
    <div class="div_1">
        <p> A DIV gyermeke vagyok</p> 
    </div>  
    <p> A body gyermeke vagyok.</p> 
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_kijelolo_gyermek.html