Saturday 20th of December 2014 01:04:03 AM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book

Symbols | A | B | C | D | E | F | G | H | I | J | K value contained within that line box (since this will coincide with the height of the tallest inline box in the line), so this works. Furthermore, it only affects those lines in which a hyperlink appears. However, there is yet another alternative.

8.4.3.1. Scaling the line heights

There's an even better way to set line-height, as it turns out, and that's to | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Index: S

S element: 4.1.6. Text Decoration
sample projects using CSS: 11. CSS in Action
sans serif fonts: 5.1. Font Families
Scalable Vector Graphics (SVG): 1.3.1. Limited Initial Scope
scaling factor
absolute font sizes: 5.3.1. Absolute Sizes
line height and: 4.1.2. The Height of Lines
scaling line heights: 8.4.3.1. Scaling the line heights
scrollbars: 9.1.4.1. Overflow
block-level elements and: 8.2.1.1. Height
selectors: 2.1.1. Rule Structure
class: 2.3. Class and ID Selectors
2.3.1. Class Selectors
CSS2: 10.2. CSS2 Selectors
grouping: 2.2.1. Grouping Selectors
ID: 2.3. Class and ID Selectors
2.3.2. ID Selectors
pseudo-class: 2.4.1. Pseudo-Class Selectors
pseudo-element: 2.4.2. Pseudo-Element Selectors
semicolon (;) terminating declarations: 2.1.3. Declarations
2.2.2. Grouping Declarations
serif fonts: 5.1. Font Families
servers, external style sheets and: 11.2.11. Serving CSS Up Correctly
seven properties of horizontal formatting[seven properties of horizontal formatting: 8.2.2.1. Horizontal properties
shadow, adding to text: 10.3.2. text-shadow
shorthand hex notation: 3.1.2.4. Short hexadecimal colors
shorthand properties: 7.4.4. Shorthand Border Properties
background property: 6.2.6. Bringing It All Together
border property: 7.4.4. Shorthand Border Properties
font property: 5.5. Using Shorthand: The font Property
list-style property: 7.7.4. List Styles In Shorthand
shrink-wrapping content: 9.1.3.1. Setting width and height
shrinking text: 11.2.6. The Incredible Shrinking Text!
side-offset properties: 9.1.2. Side Offsets
sidebar: 11.1.2. Case 2: Library Catalog System Interface
images in: 6.2.2. Repeats with Direction
simulating class/ID selectors: 10.2.2.4. Simulating class and ID
single attribute values, matching: 10.2.2.3. Matching single attribute values
single quotation marks ( ): 5.1.3. Using Quotation Marks
single-side margin properties: 7.3.4. Single-Side Margin Properties
slanted text: 5.4.1. Fonts with Style
small-caps text: 5.4.2. Font Variations
sorting (cascade rules): 2.8. The Cascade
spaces separating keywords: 2.1.3. Declarations
2.1.3. Declarations
spacing: 4.1.4. Word Spacing and Letterspacing
alignment and: 4.1.4.3. Spacing, alignment, and font size
letter: 4.1.4.2. Letterspacing
speak properties: 10.7. Tables
special effects
background colors: 6.1.3. Special Effects
perfect alignment of backgrounds: 6.2.5.1. Interesting effects
text shadow: 10.3.2. text-shadow
specificity: 2.7. Specificity
inheritance and: 2.7.1. Inheritance and Specificity
specificity sorting: 2.8. The Cascade
speech-synthesis browsers: 1.1.1. What a Mess
1.1.1. What a Mess
10.8.2. The Spoken Word
stacking context: 9.5. Stacking Positioned Elements
stacking positioned elements: 9.5. Stacking Positioned Elements
sticky notes: 9.3. Absolute Positioning
stress property: 10.8.2. The Spoken Word
STRIKE element: 4.1.6. Text Decoration
strikethrough (see line-through)
structural languages: 1.2.6. Preparing for the Future
structural markup: 1.1.1. What a Mess
structure of rules: 2.1.1. Rule Structure
STYLE attribute: 1.4.6. Inline Styles
2.8. The Cascade
quotation marks and: 5.1.3. Using Quotation Marks
specificity and: 2.7.1. Inheritance and Specificity
style declarations: 1.4.4. Actual Styles
STYLE element: 1.4.2. The STYLE Element
style sheets
alternate, defining: 1.4.1.1. LINK attributes
cascading (see CSS)
consistency, achieving with: 11.1.1. Case 1: Consistent Look and Feel
document: 1.4.2. The STYLE Element
embedded: 1.4.2. The STYLE Element
external (see external style sheets)
ignored when not recognized: 1.4.4. Actual Styles
imported: 1.2.3. Using Your Styles on Multiple Pages
overriding styles in: 7.6.1.3. No floating at all
linking to HTML documents: 1.4.1. The LINK Tag
making concise through grouping: 2.2. Grouping
naming: 1.4.1. The LINK Tag
reader: 1.2.4. Cascading
styles: 1.4.4. Actual Styles
for borders: 7.4.1. Borders with Style
disappearing with Netscape Navigator: 11.2.10. Disappearing Styles
inline: 1.4.6. Inline Styles
using on multiple pages: 1.2.3. Using Your Styles on Multiple Pages
styling common elements: 11.2.4. Styling Common Elements
stylistic languages: 1.2.6. Preparing for the Future
subscript (SUB) element: 4.1.3. Vertical Alignment
subscripting: 4.1.3.2. Superscripting and subscripting
superscript (SUP) element: 4.1.3. Vertical Alignment
superscripting: 4.1.3.2. Superscripting and subscripting
SVG (Scalable Vector Graphics): 1.3.1. Limited Initial Scope


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.

appearances. And that isn't the end of what's possible. Now that we know how to keep a background image from repeating, how about moving it around in the background?

6.2.3. Background Positioning

Thanks to H2 {color: silver;} /* long, but since it is alongside */ P {color: white;} /* actual styles, each line needs to */ PRE {color: gray;} /* be wrapped in comment markers. */

Given this example, if each line isn't marked off, then most of the style sheet will become part of the comment, and so will not work:

H1 {color: gray;}   /* This CSS comment is several lines
H2 {color: silver;}   long, but since it is not wrapped
P {color: white;}   in comment markers, the last three

There is one interesting thing about CSS that can make life difficult for authors. According to CSS1, a user agent is allowed to interpret any value of border-style (besides none) as solid. Because of this allowance, a user agent that is technically CSS1-compliant could display the following as all solid:

P.new3 {border-style: ridge dashed double;}

The result shown in Figure 7-35 wouldn't be what the author had in mind, of course, but it's technically

Figure 6-31

Figure 6-31. Tiling along the horizontal axis

Finally, of course, we may wish not to repeat the background image atall. In that case, we use the last value,no-repeat, which is illustrated in Figure 6-32:

Figure 6-32

Figure 6-32. No tiling at all

BODY {background-image: url(yinyang.gif);background-repeat: no-repeat;}

This may not seem terribly useful, given that there is only a small

This is a fast, easy way to make a "toolbar" a little more active, without the need for fitting BGCOLOR attributes on to specific table cells.

TIP

By taking this approach, it's possible to take the toolbar and split it into a separate file, and then include that file on every page by means of a server-side include. Includes