Inheritance

On almost every Web page, you can find HTML elements that contain other elements. As you've learned in earlier chapters, these embedded elements are commonly known as nested elements or child objects. In Code Listing 11-9, for example, a B element is nested inside the SPAN element. Figure 11-9 shows the resulting boldface word that appears within the text of the SPAN element.

Code Listing 11-9.

 <HTML> <HEAD> <TITLE>Listing 11-9</TITLE> </HEAD> <BODY> <SPAN>This is some <B>bolded</B> text in a SPAN.</SPAN> </BODY> </HTML> 

click to view at full size.

Figure 11-9. An example of a nested element.

Dynamic styles supports a mechanism called inheritance, in which the formatting of an outer, or parent, element (the SPAN element in Code Listing 11-9) is used as the basis for the formatting of the child object (the B element in Code Listing 11-9) nested within. Any additional or different formatting specified in the child object is applied to that nested element in addition to the inherited formatting. As an example, in Code Listing 11-10 we added a style sheet to the preceding code that declares a style for the SPAN and B elements. Figure 11-10 shows how the browser displays this page.

Code Listing 11-10.

 <HTML> <HEAD> <TITLE>Listing 11-10</TITLE> <STYLE>   SPAN {font-size: 16pt; font-style: italic; color: red}   B {font-size: 24pt} </STYLE> </HEAD> <BODY> <SPAN>This is some <B>bolded</B> text in a SPAN.</SPAN> </BODY> </HTML> 

click to view at full size.

Figure 11-10. An example of style inheritance.

In Figure 11-10, all the text within the SPAN element is 16-point, italic, and red. Because the B element is contained within the SPAN element, it inherits these same styles. However, it also adds to the mix its own boldface formatting and the 24-point font size declared in the global style sheet, making the text it contains 24-point, italic, red, and boldface.

Inheritance allows you to set default style definitions that will apply to all elements in a document. To do this, you simply set up a style sheet with style definitions for the BODY element of the document. Because BODY is the parent element of all the elements on the page, they will all inherit the style definitions you assign to the BODY element.

NOTE
One major exception to the inheritance system is that, in some browsers, tables do not inherit many attributes from the BODY element. You can work around this anomaly by adding a style declaration for the TABLE and TD elements.



Dynamic HTML in Action
Dynamic HTML in Action
ISBN: 0735605637
EAN: 2147483647
Year: 1999
Pages: 128

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net