Drzewo dokumentu html
Drzewo strony i jej źródło <html> <head> <title>…</title> </head> <body> <h1>…</h1> <p>…</p> <table> <tr> <td>…</td> </tr> </table> </body> </html> html head body title h1 p table tr td td
Kilka nowych ważnych pojęć drzewo dokumentu (document tree) - hierarchiczny układ elementów HTML zakodowanych w dokumencie; każdy element ma dokładnie jednego rodzica, oprócz elementu najwyższego w hierarchii dziecko (child) - element będący o jeden szczebel niżej w drzewie w stosunku do danego elementu potomek (descendant) - element będący o jeden lub więcej szczebli niżej w drzewie w stosunku do danego elementu
Nowych pojęć ciąg dalszy rodzic (parent) - element o jeden szczebel wyżej w drzewie w stosunku do danego elementu przodek (ancestor) - element będący o jeden lub więcej szczebli wyżej w drzewie w stosunku do danego elementu brat (sibling) - element mający tego samego rodzica co inny element; jeśli znajduje się obok niego, to jest to brat przylegający (adjacent sibling)
Wracając do przykładu za slajdu nr 1 element table jest dzieckiem elementu body element table jest potomkiem elementu html oraz body element table jest rodzicem elementu tr element table jest przodkiem dwóch elementów td oraz elementu tr element table jest bratem elementów h1 oraz p elementy h1 oraz p są braćmi poprzedzającymi elementu table element table jest bratem następującym elementów h1 oraz p element table jest elementem poprzedzającym elementu tr oraz td element table jest elementem następującym elementu body oraz html
Co z tego wynika? Oznacza to, że elementy, które leżą niżej w hierarchii (jeśli nie zostanie zaznaczone inaczej) dziedziczą atrybuty formatowania, które zostały nadane ich przodkom.
To już znamy… Selektor typu: Selektor uniwersalny Klasy selektorów selektor {właściwość: wartość;} Selektor uniwersalny * {właściwość: wartość;} Klasy selektorów selektor.klasa {właściwość: wartość;} .klasa {właściwość: wartość;} <selektor class="klasa">...</selektor> Selektor identyfikatora selektor#identyfikator {właściwość: wartość;} #identyfikator {właściwość: wartość;} <selektor id="identyfikator">...</selektor>
To co z tymi potomkami i przodkami? Selektor potomka Selektor dziecka Selektor braci
przodek1 przodek2 ... potomek {właściwość: wartość;} Selektor potomka Składnia : przodek1 przodek2 ... potomek {właściwość: wartość;} dotyczy atrybutów elementów umiejscowionych niżej w drzewie dokumentu. formatuje tylko elementy potomne w stosunku do innych elementów. Potomek może znajdować się kilka stopni niżej w stosunku do swego przodka. Przykład: p b {color: #008000;} To jest tekst w akapicie, a tutaj pogrubiony i w kolorze #008000; (green).Tutaj jest dalszy ciąg akapitu p i b {color: #008000;} To jest ponownie tekst w akapicie. Tutaj jest pochylony, a tutaj pochylony, pogrubiony i w kolorze #008000; (green). Tutaj jest dalszy ciąg akapitu - odtąd pogrubiony - poza znacznikami pochylenia. I tu ponownie zwykły akapit
rodzic > dziecko {właściwość: wartość;} Selektor dziecka Składnia: rodzic > dziecko {właściwość: wartość;} Dziecko w drzewie dokumentu znajduje się bezpośrednio poniżej rodzica. Formatuje elementy, które są potomne tylko o jeden stopień w stosunku do innych elementów. Przykład: p > b {color: #008000;} To jest tekst w akapicie, a tutaj pogrubiony i w kolorze #008000; (green).Tutaj jest dalszy ciąg akapitu. A tutaj tekst jest w znacznikach pochylenia i pogrubienia i nie powinien być koloru #008000; (green).
brat1 + brat2 {właściwość: wartość;} Selektor braci Składnia: brat1 + brat2 {właściwość: wartość;} W drzewie dokumentu oba elementy znajdują się na tym samym poziomie. formatuje elementy, które sąsiadują ze sobą i nie zawierają się w sobie. Formatowany jest drugi element. Przykład i + b {color: #008000;} To jest tekst w akapicie, tutaj jest pochylony. Tutaj jest dalszy ciąg akapitu - bez formatowania. A tutaj jest tekst pogrubiony i jest koloru #008000; (green).
A teraz pora na ćwiczenia praktyczne