Saturday 30th of August 2014 04:13:19 PM

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)
Opera
CSS implementation in: 1.3.2. Implementations
padding and: 7.5.4. Padding: Known Issues
padding values, negative: 7.5. Padding
operating system, colors and: 10.5.2. Colors
order sorting: 2.8. The Cascade

7.4.3. Border Colors

Comparedto the other aspects of borders, setting the color is pretty easy. InCSS1, there is the single property border-color,which can accept up to four color values at one time.

border-color

ordered lists: 7.7.1. Types of Lists
7.7.2. List Item Images
origin image: 6.2.3.3. 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: 9.1.4.2. Overflow clipping
overflow clipping: 9.1.4.2. Overflow clipping
overflow property: 9.1.4.1. Overflow
overlapping
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.

:hover and :focus. Take, forexample:

A:hover {font-size: 200%;}

In theory, a user agent would have to double the size of anchor textas the pointer hovers over it, which could well cause major redisplayissues. An author could cause similar problems by declaring thatTEXTAREA elements should change their size whenthey are in focus. User agents are not required to reflow thedocument based on styles assigned to these pseudo-elements, although

B {padding: 10px; background: silver;}
Figure 7-61

Figure 7-61. Padding on an inline element that spans multiple lines

As with margins, the left padding is applied to the beginning of theelement, and the right padding to the end of it; padding isnot applied to the right and left side of eachline.

Now let's talk about top and bottom padding. In theory, aninline element with a background color and padding could have theIDs. For the purposes of the project, we will assume there is a standard writing guide for employees of the company: document titles are in H1, subheadings in H2, every page uses standard graphics at the top, and so forth.

Marketing has decreed that all pages shall use a white background with a thin dark green stripe running down the left edge, black body text in a serif font, and hyperlinks that are a dark green when unvisited and dark gray when visited. Furthermore, document titles must be underlined and use a color similar to the standard navigationif the user agent doesn't have a predefined rule such as OL {list-style-type: decimal;}, it may prohibit ordered bullets from being applied to unordered lists, and vice versa. You can't count on this, of course, so be careful.

If you wish to suppress the display of bullets altogether, then none is the value you seek. none will cause the user agent to refrain from putting anything where the bullet would ordinarily be, although it

We can take that further and decide to set a wavy border along the top of each H1 element, as illustrated in Figure 6-35. The image is colored in such a way that it blends with the background color and produces the wavy effect shown:

H1 {background-image: url(wavybord.gif); background-repeat: repeat-x;
background-color: #CCCCCC;}
Figure 6-35

Figure 6-35. Setting a wavy top border on H1 elements

Simply by choosing the appropriate image for the job, and employing it in some creative ways, you can set up some truly astonishing appearances. And that isn't the end of what's possible.