Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 30th of September 2016 01:46:56 AM

10.5. Adapting to the Environment

CSS2 offers the ability to both alter the browser's environment and integrate its look more closely to that of the user's operating system.

10.5.1. Cursors

To achieve the former, we have the cursor property, which lets you declare what shape the browser's cursor will take as it passes over a given element. Want to make a humorous point about download times? Change the cursor to the wait cursor (an hourglass or watch) when the cursor passes over hyperlinks. You can even hook this property up to "cursor files" (which are not defined by the specification), so you could theoretically class your anchors based on where they go and load different icons for each type of link. For example, off-site links could cause the cursor to change into a globe, while links intended to provide help could trigger a question-mark cursor.

10.5.2. Colors

In order to let web pages more closely match the user's desktop environment, there are a whole list of new color keywords like button-highlight, three-d-shadow, and gray-text. These are all intended to use the colors of the user's operating system. In all, there are 27 of these new color keywords. I won't list them all out here, but they're listed in Table 10-1, found at the end of this chapter.

10.5.3. Outlines

While you're moving your cursor around, you might want to show where the focus is set. For example, it might be nice to define a button so that it gets a red box around it when the cursor moves over it. Well, there a number of outline properties, including outline, outline-color, positioning, as well as how declaring them can work to youradvantage.

There will be many cases when, having determinedwhere you're going to position an element, you will want to goahead and declare how wide and how high that element should be. Inaddition, there will likely be conditions where you'll want tolimit how high or wide a positioned element gets, not to mentioncases where you want the browser to go ahead and automaticallycalculate the width, or the height, or both. outline-style, and outline-width. To use the example of a red box, you might declare:

IMG.button:hover {outline: solid red 1px;}

This should have the effect described. The outline styles could also be used to set a visible outline for regions in a client-side image map.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

bold is straightforward enough, of course. As for the numbers, 100 through 300 are assigned to the Regular face because there isn't a lighter face available. 400 goes to Regular as expected, but what about 500 ? It is assigned to the Regular (or normal) face because there isn't a Medium face available; thus, it is assigned the same as 400. As for the rest, 700 goes with bold as always, while 800 and 900, lacking a heavier face, are assigned to

Another important point is that when an element is positioned, itestablishes a containing block for its descendantelements. For example, we could absolutely position an element andthen absolutely position one of its children, as shown in Figure 9-23.

Figure 9-23

Figure 9-23. Nested absolutely positioned elements

The small box B in the lower-left corner of the element A is a childof A, which is in turn a child of a relatively positionedDIV. B was absolutely positioned, as was element Figure 7-86 shows one possibility.

Figure 7-86

Figure 7-86. Placing the bullets inside and outside list items

CSS2, by the way, provides a good deal more control over thepositioning of the bullets (called "markers" in CSS2);again, this is discussed in Chapter 10, "CSS2: A Look Ahead".

7.7.4. List Styles In Shorthand