|
|
 |
 |
To access the contents, click the chapter and section titles.
Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98
NOTE: Line-height in Table 9.1 refers to the leading, or space between lines, that the browser uses. Padding refers to the amount of space left around an element.
You can see from the table that you get control over a large number of presentation characteristics—certainly more than you get with HTML tags alone. In addition to the font and block level properties noted in Table 9.1, CSS2 includes characteristics that give you control over how your content is positioned on the browser screen. The content positioning characteristics, summarized in Table 9.2, enable you to precisely place any portion of your content, even overlapping other content in some cases.
| Table 9.2 Content Positioning Characteristics Permitted in Style Sheets
|
|
| Characteristic
| Purpose and Possible Values
|
|
| position
| Specifies how content is to be positioned; possible values are static (content cannot be positioned or repositioned), absolute (content is positioned with respect to the upper-left corner of the browser window), and relative (content is positioned with respect to its natural position in the document).
|
| top
| Specifies the vertical displacement of the positioned content; values can be in points (pt), pixels (px), centimeters (cm), or inches (in) and can have negative values (negative value moves content above its reference point on the screen).
|
| left
| Specifies the horizontal displacement of positioned content; values can be in points (pt), pixels (px), centimeters (cm), or inches (in) and can have negative values (negative value moves content to the left of its reference point on the screen).
|
| clip:rect(x1,y1,x2,y2)
| Defines the size of the clipping region (rectangular area in which the positioned content appears); (x1,y1) are the coordinates of the upper-left corner of the rectangle and (x2,y2) are the coordinates of the lower-right corner.
|
| overflow
| Tells the browser how to handle positioned content that overflows the space allocated for it; possible values are visible, hidden, auto, and scroll.
|
| visibility
| Enables the document author to selectively display or conceal positioned content; possible values are show or hide.
|
| z-index
| Permits stacking of positioned content in the browser screen so that content overlaps; z-index is set to an integer value of 0 or higher (content with a smaller z-index will be positioned below content with higher z-index values).
|
|
Both Netscape and Microsoft have bundled their support for content positioning as part of the “Dynamic HTML” capabilities of the fourth release of each of their browsers. Although both browsers support content positioning by means of Cascading Style Sheets, Netscape initially tried to implement positioned content through the proprietary <LAYER> tag. Currently, Navigator 4.0 supports both the CSS and the <LAYER> tag approaches.
NOTE: Content positioning is discussed in great detail in Chapter 24, “Introduction to Dynamic HTML,” Chapter 25, “Advanced Netscape Dynamic HTML,” and Chapter 26, “Advanced Microsoft Dynamic HTML.”
Using the <LINK> Tag
After you create your style sheet file, save it with a .css extension and place it on your server. Then you can reference it by using the <LINK> tag in the head of each of your HTML documents, as follows:
<HEAD>
<TITLE>A Document that Uses Style Sheets</TITLE>
<LINK REL=STYLESHEET HREF=“styles/sitestyles.css”>
</HEAD>
The REL attribute describes the relationship of the linked file to the current file, namely that the linked file is a style sheet. HREF specifies the URL of the style sheet file.
CAUTION: Style sheet files are of MIME type text/css, although not all servers and browsers register this automatically. If you set up a site that uses style sheets, be sure to configure your server to handle the MIME type text/css.
Embedded Style Information
Figure 9.2 shows Microsoft’s Site Search page. The style information is stored in the document head, as shown in the excerpt of HTML source code in Listing 9.1. For the link styles defined near the bottom of the listing, the structure of the style information takes the same form that you saw for setting up style information in a separate file: an HTML tag name, followed by curly braces containing the style characteristics. The rest of the style information is devoted to setting up style classes. These classes can then be referenced by multiple tags by using the CLASS attribute.
FIGURE 9.2 Microsoft defines several font classes for its search page. Each class is referenced by using the CLASS attribute in the tag where you want to apply the styles in that class.
Listing 9.1 Embedded Style Information in Microsoft’s Site Search Page
<STYLE TYPE=“text/css”>
<!--
.8V {font-size: 8pt; font-family: verdana, arial,
helvetica, sans-serif;}
.10V {font-size: 10pt; font-family: verdana, arial,
helvetica, sans-serif;}
.sidebar {font-size: 8pt; font-weight:bold; text-decoration: none;
color:“#000000”; font-family: verdana, arial, helvetica, sans-serif;}
.COPY {font-size: 8pt; color:“#000000”; font-family: verdana,
arial, helvetica, sans-serif;}
A:link {text-decoration:none;}
A:visited {text-decoration:none;}
-->
</STYLE>
|
)
){kind=link}