11<!DOCTYPE HTML SYSTEM "http://www.w3.org/TR/WD-html40/sgml/HTML4.dtd">
22<html lang="en">
3- <!-- $Id: doctree.src,v 1.6 1997-08-14 00 :40:04 ian Exp $ -->
3+ <!-- $Id: doctree.src,v 1.7 1997-08-21 20 :40:41 ian Exp $ -->
44<HEAD>
55<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
6- <TITLE>CSS2 document tree</TITLE>
7- <LINK rel="next" href="selector .html">
8- <LINK rel="previous" href="syndata .html">
6+ <TITLE>Document tree</TITLE>
7+ <LINK rel="next" href="syndata .html">
8+ <LINK rel="previous" href="convent .html">
99<LINK rel="STYLESHEET" href="style/default.css" type="text/css">
1010</HEAD>
1111<BODY>
12- <H1 align="center">CSS2 document tree</H1>
12+ <H1 align="center">Document tree and inheritance </H1>
1313<H2>Document tree</H2>
14- <em>To be written ...</em>
15- <H2>Inheritance</H2>
14+ When a document written in the object language is parsed by a user
15+ agent, the result is a tree structure.
16+
17+ <div class="example"><P>
18+ For example, the following HTML document:
19+ <PRE>
20+ <HTML>
21+ <TITLE>My home page</TITLE>
22+ <BODY>
23+ <H1>My home page</H1>
24+ <P>Welcome to my home page! Let me tell you about my favorite
25+ composers:
26+ <UL>
27+ <LI> Elvis Costello
28+ <LI> Johannes Brahams
29+ <LI> Georges Brassens
30+ </UL>
31+ </BODY>
32+ </HTML>
33+ </PRE>
34+
35+ <P> results in the following tree:</P>
36+
37+ <IMG src="images/doctree.gif">
38+
39+ <P>Notice that although the source program does not explicitly refer
40+ to the HEAD element, it is inferred during parsing and becomes part of
41+ the document tree.
42+ </div>
43+
44+ <!--
45+ <P>Notice in the previous example that the tree illustration does not
46+ refer to the text this program: the title text, the paragraph text, and
47+ the list item text.
48+ -->
49+
50+ <H2>Inheritance</H2>
51+
52+ <P>Elements inherit some property values from their ancestors in the
53+ document tree.
1654
1755<div class="example"><P>
1856Suppose there is an H1 element with an emphasized element inside:
@@ -32,12 +70,16 @@ class="propinst-font-size">'font-size'</span>.
3270
3371
3472<P> To set a "default" style property for a document, one can set the
35- property on an element from which all visible elements descend.
36-
73+ property on the root of the document tree. In HTML, the HTML or BODY
74+ elements can serve this function. This will work even if the author
75+ omits the BODY tag in the HTML source since the HTML parser will
76+ infer the missing tag.
3777
3878<div class="example"><P>
39- In HTML documents, for example, the BODY element can serve this
40- function.
79+
80+ For example, the <span class="propinst-color">'color'</span> property
81+ on the BODY element is inherited by all descendents of the BODY
82+ element:
4183
4284<PRE>
4385 BODY {
@@ -46,36 +88,23 @@ function.
4688 }
4789</PRE>
4890
49- <P> This will work even if the author has omitted the BODY tag
50- (which is legal) since the HTML parser will infer the missing tag. The
51- example above sets the text color to be black and the background to be
52- an image. The background will be white if the image is not
53- available. (See the section on <a href="./colors.html#backgrounds">
54- backgrounds</a> for more information).
91+ <P> In this example, all descendents of the BODY element inherit the
92+ <span class="propinst-color">'color'</span> property.
5593</div>
5694
95+ <P> Not all style properties are inherited. For example, the <span
96+ class="propinst-background">'background'</span> property is not
97+ inherited. However, by default, when an element has no explicit
98+ background, its parent's background shines through.
5799
58- <P> Some style properties are not inherited from the parent element to
59- the child element. Most often it is intuitive why this is not the
60- case, e.g., the <span class="propinst-background">'background'</span>
61- property does not inherit, but the parent element's background will
62- shine through by default.
63-
64- <P> Often, the value of a property is a percentage that refers to
65- another property. The property definition clearly statues what
66- property value the percentage refers to.
67-
68- <div class="example"><P>
69- For example, Children elements of P will inherit the
70- computed value of <span class="propinst-line-height">'line-height'</span>
71- (i.e., 12pt), not the percentage (see
72- the <span class="index-inst" title="<percentage>"><span class="value-inst-percentage"><percentage></span></span>value).
73-
74- <PRE>
75- P { font-size: 10pt }
76- P { line-height: 120% } /* relative to 'font-size', i.e. 12pt */
77- </PRE>
78- </div>
100+ Thus, in the example above, the <span
101+ class="propinst-background">'background'</span> property on the BODY
102+ element, although not inherited, establishes the background of the
103+ entire document. The background will be white if the image is not
104+ available (see the section on <a href="./colors.html#backgrounds">
105+ backgrounds</a> for more information).
79106
107+ <P>Each property definition indicates whether the property is
108+ inherited by child elements.
80109</BODY>
81110</html>
0 commit comments