Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Drzewo dokumentu html. Drzewo strony i jej źródło … … … html head body title h1 p table tr td td.

Podobne prezentacje


Prezentacja na temat: "Drzewo dokumentu html. Drzewo strony i jej źródło … … … html head body title h1 p table tr td td."— Zapis prezentacji:

1 Drzewo dokumentu html

2 Drzewo strony i jej źródło … … … html head body title h1 p table tr td td

3 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

4 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)

5 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

6 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.

7 To już znamy…  Selektor typu:  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 identyfikatora  selektor#identyfikator {właściwość: wartość;}  #identyfikator {właściwość: wartość;} ...

8 To co z tymi potomkami i przodkami?  Selektor potomka  Selektor dziecka  Selektor braci

9 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

10 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).

11 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).

12 A teraz pora na ćwiczenia praktyczne


Pobierz ppt "Drzewo dokumentu html. Drzewo strony i jej źródło … … … html head body title h1 p table tr td td."

Podobne prezentacje


Reklamy Google