|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
Platinum Edition Using HTML 4, XML, and Java 1.2
Listing 25.3 shows an example that combines these methods of applying style information and shows that their effects are cumulative on subject text. In this example, the text within the <H1> container tag is given the Impact style through the CLASS attribute, and the named allCaps through the ID attribute. Further, the small caps font style is achieved by applying the named bigText style to the first letter of each word. The effects accumulate; the text is first given the font characteristics of 48pt Impact through the Impact class, then it is made all capital letters with the allCaps style, and finally, its initial letters are enlarged using the bigText style (see Figure 25.5). Listing 25.3 StyleApp2.htm—Applied Style Effects Are Cumulative <HTML> <HEAD> <STYLE TYPE=“text/javascript”> classes.Impact.all.fontFamily=“Impact”; classes.Impact.all.fontSize=“48pt”; ids.allCaps.textTransform=“uppercase”; ids.bigText.fontSize=“125%”; </STYLE> <TITLE>Applying Styles: Classes and Named Styles</TITLE> </HEAD> <BODY> <H1 CLASS=“Impact” ID=“allCaps”> <SPAN ID=“bigText”>A</SPAN>pplying <SPAN ID=“bigText”>S</SPAN>tyles: <SPAN ID=“bigText”>C</SPAN>lasses and <SPAN ID=“bigText”>N</SPAN>amed <SPAN ID=“bigText”>S</SPAN>tyles</H1> <HR> <ADDRESS> Jim O’Donnell, <A HREF=“mailto:odonnj@rpi.edu”>odonnj@rpi.edu</A> </ADDRESS> </BODY> </HTML>
Doing Contextual SelectionSometimes it is necessary to apply style information to an element only when it appears in the context of another. With CSS, doing this is fairly straightforward. As an example, the following code:
<STYLE TYPE=“text/css”>
H1 STRONG {color:red};
</STYLE>
says that any level 1 heading text marked up with the <STRONG> element should be rendered in red. This makes some sense because headings are already in boldface. Adding the <STRONG> element, which usually produces boldface rendering, would not change the appearance of the text. By making <STRONG> text red within a level 1 heading, you make it stand out even more and thereby convey your strong emphasis. To accomplish the same effect with JavaScript, you need to use the contextual() method. contextual() takes a list of element objects that represent the usage context to which you want to apply style information. The following replicates the effect of the CSS code just discussed: <STYLE TYPE=“javascript” contextual(tags.H1,tags.STRONG).color=“red”; </STYLE> After you have the context set up, you don’t need to do anything special in the HTML code to invoke it. You just nest the tags and the browser detects the context. Applying Styles to Block-Level ElementsBlock-level formatting tags require some extra attention because of how the browser treats them. Block-level formatting in HTML 4.0 includes <P>, <DIV>, <H1>–<H6>, and <BLOCKQUOTE>. You can think of each block-level element on a page as having an invisible box that contains it. The boundaries of that box define the extent of the block-formatted text, and the browser treats that box as an object that has many properties, such as borders, indentation, and background colors. Figure 25.6 shows the extent of a box around an <H1> heading by turning on the box’s border and making the background color yellow. This example was made using virtually the same code as shown in Listing 25.3, with the addition of the <STYLE> information shown in Listing 25.4, which is used to add the background color and borders. Listing 25.4 StyleApp3.htm (excerpt)—HTML Block-Level Elements
<STYLE TYPE=“text/javascript”>
with (tags.H1) {
backgroundColor=“yellow”;
borderWidths(“10pt”);
borderStyle=“solid”;
}
</STYLE>
Because of the boxes that surround them, block-level elements have style characteristics that other elements do not. These characteristics include the following:
Refer back to Table 25.1 for the JavaScript property names for each of these; each is fairly intuitive. As you specify values for these properties, keep the image of the invisible box in mind, and it will help you visualize what your results will look like. One important thing to note is the relationship between the width and margin characteristics. Mathematically, you could describe the relationship between the width of the block element, the margins, and the width of the content of the block element as this: block element width=left margin + content width + right margin After the content is specified, its width is determined and becomes a fixed value. This means you can set either of the following:
The point is that it does not make sense to specify both the margins and the total width. After you choose values for one, the value of the other is determined by the preceding equation. Content PositioningIn the previous section, you saw how you could use JavaScript to assign values to style characteristics and dynamically format your document. One class of style characteristics was deliberately left out of the section, however: those for specifying content position. Content positioning is a much different activity than assigning styles, and you can bring many more JavaScript commands to bear on a content-positioning challenge. This section looks at how you can do content positioning with Netscape Navigator. Again, the focus is on Netscape’s implementation of content positioning. This means that it will be “legal” to make use of the nonstandard <LAYER> element as well as CSS techniques to do positioning.
|
|
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}