Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 18th of March 2018 03:03:18 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, 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.






Applies to

all elements

fontIE4 P/Q IE5 P/Y NN4 P/P Op3 Y/-

This is a

Library Navigation Links

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


TD {white-space: nowrap;}
TT {white-space: pre;}
widthIE4 P/Y IE5 P/Y NN4 P/P Op3 Q/-

Used to set the width of an element. This is most often applied to images, but can be used on any block-level or replaced element. Negative values are not permitted.


word-spacingIE4 N/Y IE5 N/Y NN4 N/N Op3 Y/-

Used to set the amount of whitespace We'll start by considering the simple case of a small inlineelement within a single line, as depicted in Figure 7-52.

Figure 7-52

Figure 7-52. An inline element

Here, if we set values for the left or right border, not only willthey be visible, but they'll displace the text around them, aswe see in Figure 7-53:

With borders, just as with margins, the browser's calculationsfor line-breaking are not directly affected by anyboxline-height has not changed. It simply has no effect on the image's inline box, which is in this case 30px tall.

Nonetheless, an inline replaced element still has a value for line-height. Why? In order to be able to correctly position the element if it's been vertically aligned. Recall that, percentage values for vertical-align are calculated with respect to an element's line height. Thus:

A lot of this is fairly straightforward. For the documentBODY, we write:

BODY {font-family: Times,serif; color: black;background: white url(pix/grstripe.gif) repeat-y top left;}

For the anchors, among other things, we need to know the color valueof the green being used. The art department reports that thisparticular shade of green uses no red or blue, and just 40% green;someone there has had the foresight to use web-safe colors.(Remember, this is a hypothetical situation.) We want to do the same

Figure 10-9

Figure 10-9. Hover styles

As a matter of fact, the rule for A:hover would be used while the pointer hovers over any anchor, not just a hyperlink. While some other pseudo-classes, like :link and :visited , are constrained to the A element in HTML, the same is not true of :hover. User agents could, in theory, allow the assignment of hover styles to any element, like this: