Tuesday 27th of January 2015 11:20:29 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: 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: Scaling the line heights
scrollbars: Overflow
block-level elements and: 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: Horizontal properties
shadow, adding to text: 10.3.2. text-shadow
shorthand hex notation: 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: 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: Simulating class and ID
single attribute values, matching: 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: Spacing, alignment, and font size
letter: Letterspacing
speak properties: 10.7. Tables
special effects
background colors: 6.1.3. Special Effects
perfect alignment of backgrounds: 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: 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: 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: Superscripting and subscripting

In the case of ordered lists, CSS2 goes a great deal further than CSS1 to provide control over the ordering. For example, there is no way in CSS1 to automatically create subsection counters such as "2.1" or "7.1.3." This can, however, be done under CSS2 and is briefly discussed in Chapter 10, "CSS2: A Look Ahead".

superscript (SUP) element: 4.1.3. Vertical Alignment
superscripting: 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.

right top. When using the position keywords, they can appear in any order, so long as there are no more than two of them, one for the horizontal and the other for the vertical.

Figure 6-37

Figure 6-37. Placing the background image in the top right corner of the browser window

If only one keyword appears, then the other is assumed to be center. Table 6-1 shows equivalent keyword statements.

described in the previous section -- relative, absolute, and fixed -- use four distinct properties to describe the offset of a positioned element's sides with respect to its containing block. These four properties, which we will refer to as the side-offset properties, are a big part of what makes positioning work.

top, right, bottom, left

normal paragraph -- then both top andbottom for any positioned element within thatcontaining block are treated as auto.

In addition, even though they don't explicitly say so, theexamples in this section (and the next few sections) are all basedaround absolute positioning. Since absolute positioning is thesimplest scheme in which to demonstrate how top,right, bottom, andleft work, we'll stick to that for now.The rest is left to our discretion.

A lot of this is fairly straightforward. For the documentBODY, we write:

BODY {font-family: Times,serif; color: black;background: white url(pix/grstripe.gif) repeat-y top left;}

For the anchors, among other things, we need to know the color valueof the green being used. The art department reports that thisparticular shade of green uses no red or blue, and just 40% green;

Consider the example in Figure 9-19. It shows twoparagraphs that contain identical text. However, the first paragraphcontains an inline boldface element, and the second an absolutelypositioned boldface element. In the second paragraph, the styles usedwould be something like what is shown here:

P {position: relative;}   /* establish containing blocks */<B STYLE="position: absolute; top: auto; right: 0; bottom: 0; left: auto;width: 8em; height: 4em;">...</B>
Figure 9-19

Figure 9-19. The effects of absolute positioning