Tuesday 28th of June 2016 11:34:46 AM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Index: O

oblique text: 5.4.1. Fonts with Style
octothorpe (#) preceding ID selectors: 2.3.2. ID Selectors
offsets (see side-offset properties)
CSS implementation in: 1.3.2. Implementations
padding and: 7.5.4. Padding: Known Issues
padding values, negative: 7.5. Padding

Before we get there, however, there are a few more things to cover. Remember that absolutely positioned boxes can have backgrounds, margins, borders, and padding; styles can be applied within them, just as with any other element. This can make them very useful for the creation of sidebars, "sticky notes," and other such effects. One example is the ability to set a "change marker" on any paragraph that has been edited. This could be done using the following styles

operating system, colors and: 10.5.2. Colors
order sorting: 2.8. The Cascade
ordered lists: 7.7.1. Types of Lists
7.7.2. List Item Images
origin image: Length values
origin sorting: 2.8. The Cascade
origins: 2.8. The Cascade
orphans property: 10.8.1. Paged Media
outline properties: 10.5.3. Outlines
overflow: 9.1.4. Content Overflow and Clipping
overflow-clip property: Overflow clipping
overflow clipping: Overflow clipping
overflow property: Overflow
elements, altering: 9.5. Stacking Positioned Elements
floated elements, preventing: 8.3.1. Floating: The Details
margins (see collapsing margins)
text, preventing: 8.4.3. Managing the Line Height of Inline Elements
overlining: 4.1.6. Text Decoration
overriding previously declared values: 11.1.3. Case 3: Putting a Magazine Article Online

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

example, a grooved border might look better enclosed on each lineend, as shown in Figure 7-55.

Figure 7-55

Figure 7-55. An inline element with a border displayed across multiple lines of text, with the border boxes closed

It's also acceptable for the lines to be "open" asshown in Figure 7-54.


Borders cannot be applied to inline elements inNavigator 4.x or is likely to vary by user agent, so it's usually better to declare a width that you like.

Of course, this is not always the case: you could set an explicit height and let the width scale to fit the content. Thus:

top: 0; bottom: auto; left: auto; right: 0; width: auto; height: 10em;

Here the element will be 10 ems tall no matter what, but its width can vary to exactly fit the content. This is sometimes called "shrink-wrapping" theThese guns shoot out beams of light in varying levels of light and dark, in one of the three RGB colors, at each point on the screen. The brightnesses of each of these beams combine at each point to form all of the colors you see on your screen. Each point, by the way, is known as a pixel, which is a term to which we'll return later in the chapter.

Given the way colors are created on a monitor, it makes sense that a good way to let you set colors is to give you direct access to those color levels, thereby determining your own mixture of the beams. This

Figure 7-48

Figure 7-48. Letting default values fill in the gaps

By contrast, if you set only a style, you will still get a border. For example, let's say you simply want a border style of dashed for the top of an element and are willing to let the width default to medium and the color to be inherited from the element itself. All you need in such a case is the following:

P.roof {border-top: dashed;}

Another thing to note is that since each of these