Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 28th of April 2017 06:17:21 AM

10.5. Adapting to the Environment

CSS2 offers the ability to both alter the

Opera 3.5 allows negative paddingvalues, but this was fixed in Opera 3.6.The other browsers don't allownegative padding lengths.

7.5.1. Percentage Values and Padding

As stated earlier, it's possible toset percentage values for the padding of an element. Percentages are 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.



Library Navigation Links

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

This will make the text gray, but the borders willbe black in color, as we can see from Figure 6-7. Any value set forborder-color will always override the value ofcolor.

Figure 6-7

Figure 6-7. Overriding the default border color

It's in the borders, incidentally, where you can have an effecton the foreground color of images. Since images are already composedof colors, you can't really affect them usingcolor, but you can change the color of any border

top: 50%; bottom: 0; left: 50%; right: 0; margin: 10em;top: 60%; bottom: 10%; left: 60%; right: 10%; margin: 0;

Again, the similarity would be only visual in nature.

By using negative values, it is possible to position an elementoutside its containing block. For example, thefollowing values will lead to the result shown in Figure 9-3:

top: -5em; bottom: 50%; left: 75%; right: -3em;
Figure 9-3

Figure 9-3. Positioning an element beyond its containing block

TIP

The fictional LINE element actually clarifies the behavior that results from setting line-height on a block-level element. According to the CSS specification, declaring line-height on a block-level element sets a minimum line-box height for the content of that block-level element. Thus, declaring P.spacious {line-height: 24pt;} means that the minimum height for each line box is 24 points. Technically, the