Friday 20th of April 2018 04:45:37 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: D

decimal values in percentage values: Percentage colors
declarations: 2.1.1. Rule Structure
2.1.3. Declarations
grouping: 2.2.2. Grouping Declarations
ignored: 2.1.3. Declarations
decorating text (see text decoration)
reason you don't usually see borders is that the default style is none, which prevents them from existing. If a border has no style, then it may as well not exist, so it doesn't. The absence of a border style also resets the width, but we'll get to that in a little while.

Finally, the default border color is the foreground color of the element itself. If no color has been declared for the border, then it will be the same color as the text of the element. If, on the other hand, an element has no text -- let's say a table which

descendants: 2.5. Structure
display driver, setting on Windows systems: Working with absolute lengths
display property: 2.9. Classification of Elements
additions/changes with CSS2: 10.1.1. Additions and Changes to the display Property
markers (bullets): 10.4.2. Markers
table-related values: 10.7. Tables
distance (see length units)
DIV element
creating columns: 11.1.3. Case 3: Putting a Magazine Article Online
wrapping images: Aligning text
document style sheets: 1.4.2. The STYLE Element
document type definition (DTD): 2.9. Classification of Elements
dots-per-inch (dpi) environment: 5.3.5. Using Length Units
double quotation marks ( ): 1.4.6. Inline Styles
curly, in generated content: 10.4. Generated Content
in font-family declarations: 5.1.3. Using Quotation Marks
dpi (dots-per-inch) environment: 5.3.5. Using Length Units
drop cap: 11.1.3. Case 3: Putting a Magazine Article Online
with or without \:first-letter pseudo-element: 11.2.9. Drop Caps With and Without :first-letter
drop shadow: 10.3.2. text-shadow
DTD (document type definition): 2.9. Classification of Elements

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.

line-height to increase. What is increased is the height of the line box. Therefore, if a line's height is 14px, and an element within that line is vertically aligned to 50%, and within that same line, there is an image 50 pixels tall, you get the result shown in Figure 4-42:

SUP {vertical-align: 50%;}
Figure 4-42

Figure 4-42. Vertical alignment with a percentage and a tall image

The 50%-aligned element has its baseline raised 7 maroon and BODY elements to have a yellowbackground.

Styles such as these comprise the bulk of any embedded stylesheet -- style rules both simple and complex, short and long. Itwill be only rarely that you have a document where theSTYLE element does not contain any rules.

For those of you example -- there is no alternative. In Internet Explorer 4.x and5.0, however, you can use a SPAN element to fakeyour way around the lack of support for:first-letter. Here's how it works:

SPAN.dropcap {font-size: 300%; font-weight: bold; float: left;width: 0.75em;}<P><SPAN CLASS="dropcap">T</SPAN>his is a paragraph with...</P>

Since this is very similar to the fictional tag sequence used todescribe the behavior of :first-letter anyway, it </DIV> <P>This paragraph is green.</P> </BODY>

Only the first and third paragraphs match the rule because they are children of BODY. The second paragraph is a child of DIV, and therefore a grandchild of BODY, so it does not match the rule.

Child selectors must have at least two or more selectors separated by the > symbol. It is possible to make a childthe style is set to none, not only does the border's style go away, so does its width! Why?

If you'll remember, the terminology used in the previous section was that a border with a style of none does not exist. Those words were picked carefully because they help explain what's going on here. Since the border doesn't exist, it can't have any width, so the width is automatically set to 0 (zero). This may seem completely backward, but it actually makes a great deal of sense. After all, if