|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
HTML 4.0 Sourcebook
The last feature of interest is the word “Hello” at the bottom of Figure 7.35. This is in a large Arial font on an image background. Looking to Figure 7.33 you will see that this is accomplished using a SPAN element with local, STYLE–attribute style sheet instructions.
Positioning Elements with CSSA recent extension to CSS allows for positioning of elements, in a manner similar to that allowed by the Netscape layer elements. This is illustrated in Figure 7.36, which is the same as Figure 7.30, but formatted using CSS—notice how the HTML markup is much simpler than in Figure 7.30, as all the formatting–specific information is now in the style sheet. The CSS top, left, height, width, and z–index properties are equivalent to the layer attributes of the same name, while the clip property is similar to the layer attribute but uses a different syntax. The position property defines the type of positioning for the element—the values absolute and relative provide formatting equivalent to the LAYER and ILAYER elements, while the value static formats an element as a standard on–the–page component. Finally, the visibility property can take the values hidden (for a hidden element), visible (for a displayed element), and inherit (the element inherits the visibility of the element it lies within). Note also that this document uses CLASS attributes to define the CSS formatting and not IDs—Netscape Navigator 4 does not properly support ID attributes for assigning positioning formatting properties to layers. Figure 7.37 shows the rendering of Figure 7.36 by both Netscape Navigator 4 and Internet Explorer 4. Both browsers provide formatting essentially equivalent to that shown in Figure 7.31, although Netscape does not properly color the entire background region of the elements—this is a bug in Netscape Navigator 4. Figure 7.36 Example HTML document illustrating CSS positioning properties—these positioning properties are equivalent to the LAYER–based positioning defined in Figure 7.30. Rendering of this document by Netscape Navigator 4 and Internet Explorer 4 is shown in Figure 7.37.
<HTML><HEAD>
<TITLE> Test of Nested Layer Elements</TITLE>
<STYLE>
<!––
SPAN.o1 {position: absolute; background–color: #cccccc;
top: 150px; left: 100px;
height: 100px; width: 350px;
clip: rect(5px,300px,80px,15px); }
SPAN.o2 {position: absolute; background–color: #666666;
top: 20px; left: 20px;
width: 245px; z–index: 2; }
SPAN.o3 {position: absolute; background–color: #333333;
top: 40px; left: 130px;
visibility: hidden; z–index: 3; }
SPAN.o4 {position: absolute; background–color: #fffffc;
top: 10px; left: 250px;
height: 100px; width: 30px;
z–index: 1; }
––></STYLE>
</HEAD>
<BODY TEXT=“black” BGCOLOR=“white”>
<DIV>This block contains an absolutely positioned
<SPAN CLASS=“o1”>
Here is the content of the first layer element.
This element contains, in turn another layer.
<SPAN CLASS=“o2”>
<FONT COLOR=“white”><B>Layer A</B></FONT>
</SPAN>
<SPAN CLASS=“o3”>
<FONT COLOR=“yellow”><B>Layer B ... ... .</B></FONT>
</SPAN>
<SPAN CLASS=“o4”><B>..C.</B>
</SPAN>
</SPAN>
layer that. in turn, contains three other absolutely
positioned layers.
</DIV>
</BODY></HTML>
Cascading PropertiesThe above sections illustrated some of the cascading properties—styles cascade down from one element to other elements contained within it (e.g., from a DIV to all paragraphs within the DIV), until overridden by a specific declaration relevant to one of the interior elements (e.g., DIV content may be in Times–Roman, while a paragraph–specific instruction may override this font to Arial). However, this does not cover the case where there are multiple style sheet specifications for the same element. There are several ways this might happen. First, there may be an external style sheet linked to the document, as well as internal style sheet information within a STYLE element. Also, individual users may have their own default style sheets, specified via a browser configuration file. Finally, there may be element–specific style information specified by STYLE attribute content or by an ID label with corresponding style information in the style sheet. The CSS handles this kind of conflict through a sequence of complex cascading rules, which involve weighting different types of specifications and applying the formatting instructions in the order of increasing weights. In general, the instructions closer to a specific block of text override those further from it—that is, text–specific instructions will override block–specific instructions, which override generic document instructions. If two equivalent instructions are found, then the last one found is used. Finally, author–specified formatting instructions will override reader–specified style sheet instructions, which in turn override a browser’s default behavior. There are many aspects of CSS that have been omitted from this brief discussion: CSS also supports style specifications for nested elements (e.g., how to format list items within a list that lies within another list), drop–caps lettering, horizontal and vertical spacing control, backgrounds, floating elements, boxing of elements, and so on. For details, you are referred to the CSS specifications, referenced at the end of this chapter. Scripting in HTML Documents
|
|||||||||||||||||||||
|
Products | Contact Us | About Us | Privacy | Ad Info | Home
Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.
|
)
)
)
){kind=link}
){kind=link}
){kind=link}