Sunday 25th of February 2018 10:10:42 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: I

ID attributes: 2.3.2. ID Selectors
ID selectors: 2.3. Class and ID Selectors
2.3.2. ID Selectors
vs. class selectors: 2.3.3. Class? ID? What's the Difference?
simulating: 10.2.2.4. Simulating class and ID
universal selector and: 10.2.1.1. Universal selector
IE (see Internet Explorer)
ignoring declarations: 2.1.3. Declarations
images
attachment and: 6.2.5. Getting Attached
as background: 6.2. Complex Backgrounds
specifying color: 6.2.1.1. Good background practices
border around, setting color: 6.1.1.2. Affecting borders
as bullets in lists: 7.7.2. List Item Images
centering: 4.1.1.2. Aligning text
with text: 4.1.1.2. Aligning text
floating: 4.1.1.1. Indenting text
7.6. Floating and Clearing
11.1.3. Case 3: Putting a Magazine Article Online
right, bottom, and left work, we'll stick to that for now.

Figure 9-2

Figure 9-2. Positioning an element within its containing block

Note that the positioned element has padding, a double border, and a slightly different background color. In Figure 9-2, it has no margins, but if it did, they would create blank space between the borders and the offset edges. This would make the positioned element appear as though it did not completely fill the

indenting with text: 4.1.1.1. Indenting text
line height and: 8.4.4. Inline Replaced Elements
middle alignment: 4.1.3.5. In the middle
origin image: 6.2.3.3. Length values
repeating: 6.2.2. Repeats with Direction
6.2.4. Repeats with Direction (Revisited)
sidebar: 6.2.2. Repeats with Direction
tiling: 6.2.4. Repeats with Direction (Revisited)
vertical alignment and: 4.1.3.1. Baseline alignment
implementations of CSS: 1.3.2. Implementations
!important property: 2.7.2. Importance
important rules: 2.7.2. Importance
imported style sheets: 1.2.3. Using Your Styles on Multiple Pages
overriding styles in: 7.6.1.3. No floating at all
inches (in): 3.2.1. Absolute Length Units
inclined text: 5.4.1. Fonts with Style
includes: 11.2.4. Styling Common Elements
indenting text: 4.1.1.1. Indenting text
11.1.3. Case 3: Putting a Magazine Article Online
inherit value: 10.1. Changes from CSS1
10.1.2. More Inheritance
inheritance: 2.6. Inheritance
background-color property and: 6.1.2. Background Color
color property and: 6.1.1.3. Inheriting color
font size and: 5.3.4. Font Size and Inheritance
specificity and: 2.7.1. Inheritance and Specificity
initial containing block: 9.1. General Concepts
inline box: 4.1.2. The Height of Lines
8.4.2.1. Generating a line box
11.1.3. Case 3: Putting a Magazine Article Online
inline elements: 2.9. Classification of Elements
8.4. Inline Elements
background images, placing in: 6.2.1. Background Images
borders and: 7.4.5. Borders and Inline Elements
box properties, adding to: 8.4.2.2. Adding box properties
formatting: 8.4.2. Inline Formatting
line height, managing: 8.4.3. Managing the Line Height of Inline Elements
line-height property and: 4.1.2. The Height of Lines
line layout: 8.4.1. Line Layout
margins and: 7.3.8. Margins: Known Issues
caution with: 7.3.8. Margins: Known Issues
padding and: 7.5.3. Padding and Inline Elements
replaced: 8.4.4. Inline Replaced Elements
box properties, adding to: 8.4.4.1. Adding box properties
vertical-align property and: 4.1.3. Vertical Alignment
inline formatting: 8.4.2. Inline Formatting
inline styles: 1.4.6. Inline Styles
Internet Explorer
clipping support and: 9.1.4.2. Overflow clipping
CSS implementations in: 1.3.2. Implementations
margin problems and: 11.2.3. Fighting Margin Problems with @import
margins and: 7.3.8. Margins: Known Issues
support for @import: 1.4.3. The @import Directive
Internet Explorer 5.x
:hover pseudo-element: 10.2.3.1. :hover
inline elements, borders and: 7.4.5. Borders and Inline Elements
interword spacing: 4.1.4.1. Word spacing
italic text: 5.4.1. Fonts with Style


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.

700, 800, and 900.

In order to understand this more clearly, let's look at three examples of font-weight assignment. In the first, assume that the font family Karrank% is an OpenType font and so already has nine weights already defined. In this case, the numbers are assigned to each level, and the keywords normal and bold are assigned to the numbersyou only have to edit one file in order to change the text colors ofevery last one of your pages.

6.1.1.2. Affecting borders

Thevalue of color can also affect the borders aroundan element. Let's assume that you've declared thesestyles, which have the result shown in Figure 6-6:

In practice, some browsers may not do this correctly. Instead, they will increase the height of a parent element so that the floated element is contained within it, even though this results in a great deal of extra blank space within the parent element.

Then there is the question of what happens to elements that flow past a floated element but have visible backgrounds. Let's take the preceding example and change it so that the second H3 element has a visible background and border, as

BODY {font-size: 10pt;}P {font-size: 18pt; line-height: 27pt;}BIG {font-size: 250%; line-height: 1em;}<P>This paragraph's 'font-size' is 18pt, and the 'line-height' for thisparagraph is 27pt. A <BIG>larger element</BIG> within the paragraph doesnot cause the line's height to change, but setting its 'line-height' does,which leads to some interesting effects.</P>
Figure 4-28

Figure 4-28. Changing the line-height of an inline element

Setting a line-height of 1emtrick I plan to use later in this chapter, for this projectwe're still going to use a table for the page's overalllayout, but we're going to modify it slightly. Instead of fourcells, it will only have two: the sidebar and the rest of the screen.The navigation bar will become part of the main display, and theblank "spacing" table cell will be eliminated entirely.This will leave us with the following:

<TABLE CELLSPACING=0><TR>