Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 19th of January 2018 12:52:43 AM

There are many uses for color, of course, the most basic of which is to replace the BODY attributes TEXT, LINK , ALINK , and VLINK. In conjunction with the anchor pseudo-classes, color can replace these BODY attributes outright. The first line in the following example can be rewritten with the subsequent CSS, and either will have the result depicted in Figure 6-3:


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.



Library Navigation Links

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

is an indirect effect, of course, in that the margins (and so on) ofan element can induce an offset for child elements. Vertical marginsare still collapsed, as shown in Figure 8-18:

DIV {margin: 20px; padding: 20px;}P {margin: 10px; padding: 10px;}
Figure 8-18

Figure 8-18. Offset is implicit in the parent's margins and padding

8.2.2.4. Negative margins


7.5. Padding

Betweenthe borders and the content area, we find thepadding of the element box. It will come as nosurprise that the simplest property used to affect this area iscalled padding.

padding

as a pixel value, so you get something like what's shown inFigure 4-29.

Figure 4-29

Figure 4-29. Internet Explorer 3 and line-height factors mean big trouble

According to the CSS specification, user agents are free to setwhatever value they think best for the default keywordnormal, but the suggested range is 1.0 to 1.2,depending on what works best for the display medium and the font inuse. Most browsers seem to use something in the vicinity of 1.2, butof course that could change with a new browser, or even a new version