Friday 20th of April 2018 04:44:57 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: T

table cells
setting text color: 6.1.1. Foreground Colors
suppressing wrapping in: 4.1.1.3. Handling whitespace
table elements: 8.4. Inline Elements
tables: 1.3.1. Limited Initial Scope
10.7. Tables
avoiding: 7. Boxes and Borders
header/footer of: 10.7. Tables
tags: 1.4.2. The STYLE Element
ignored when not recognized: 1.4.4. Actual Styles
text
aligning
horizontally: 4.1.1.2. Aligning text
vertically: 4.1.3. Vertical Alignment
blinking: 4.1.6. Text Decoration
bold: 5.2.2. Getting Bolder
11.2.7. Preserving Boldness
capitalizing: 4.1.5. Text Transformation
cursive: 5.4.1. Fonts with Style
floating: 7.6.1. Floated Elements
8.3. Floated Elements
inclined: 5.4.1. Fonts with Style
indented: 4.1.1.1. Indenting text
11.1.3. Case 3: Putting a Magazine Article Online
italic: 5.4.1. Fonts with Style
justified: 4.1.1.2. Aligning text
11.1.3. Case 3: Putting a Magazine Article Online
kursiv: 5.4.1. Fonts with Style
lighter: 5.2.3. Lightening Weights
lowercase: 4.1.5. Text Transformation
oblique: 5.4.1. Fonts with Style
overlapping, preventing: 8.4.3. Managing the Line Height of Inline Elements
overlining: 4.1.6. Text Decoration
shadow, adding to: 10.3.2. text-shadow
shrinking: 11.2.6. The Incredible Shrinking Text!
slanted: 5.4.1. Fonts with Style
small-caps: 5.4.2. Font Variations
transforming: 4.1.5. Text Transformation
underlining: 4.1.6. Text Decoration
turned off by browsers: 4.1.6.1. Weird decorations
uppercase: 4.1.5. Text Transformation
upright: 5.4.1. Fonts with Style
whitespace in: 4.1.1.3. Handling whitespace
text-align property: 4.1.1.2. Aligning text
effect on word/letter spacing: 4.1.4.3. Spacing, alignment, and font size
tables and: 10.7. Tables
text-bottom alignment: 4.1.3.3. Bottom feeding
text/css value: 1.4.1.1. LINK attributes
1.4.2. The STYLE Element
text decoration: 4.1.6. Text Decoration
changing color of: 4.1.6.1. Weird decorations
combining decorations: 4.1.6. Text Decoration
turned off by browsers: 4.1.6.1. Weird decorations
text-decoration property: 4.1.6. Text Decoration
text-transform property and: 4.1.6.1. Weird decorations
vertical-align property and: 4.1.6.1. Weird decorations
text-indent property: 4.1.1.1. Indenting text
text-shadow property: 10.3.2. text-shadow
text-top alignment: 4.1.3.4. Getting on top
text-transform property: 4.1.5. Text Transformation
vs. font-variant property: 5.4.2. Font Variations
tilde (~) in selectors: 10.2.2.3. Matching single attribute values
tiling images: 6.2.1. Background Images
6.2.4. Repeats with Direction (Revisited)
time values: 3.5. CSS2 Units
TITLE attribute: 1.4.1.1. LINK attributes
title, stylized: 11.1.3. Case 3: Putting a Magazine Article Online
top alignment: 4.1.3.4. Getting on top
top property: 9.1.2. Side Offsets
transforming text: 4.1.5. Text Transformation
transparent keyword: 6.1.2. Background Color
tree view of HTML documents: 2.5. Structure
troubleshooting
disappearing styles: 11.2.10. Disappearing Styles
style sheets displayed in browsers: 1.4.4. Actual Styles
TYPE attribute: 1.4.1.1. LINK attributes


Figure 8-41

Figure 8-41. Backgrounds "slide under" floated elements

Because the floated element is both within and without the flow, thissort of thing is bound to happen. What's going on? Well, thecontent of the paragraphs is being "displaced" by thefloated element. However, each paragraph's element width isstill as wide as its parent element. Therefore, its content areaspans the width of the parent, and so does the background. The actualcontent doesn't flow all the way across its own content area inorder to avoid being obscured behind the floating element.

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.

incorrectly appear between the two, as shown in Figure 7-62.

Figure 7-62

Figure 7-62. Padding problems in Navigator 4

This may be an interesting effect, but it isn't permissible under the CSS specification, and no other browser will do the same thing, so it's best to avoid this altogether.

Even worse, if you try applying padding to inline elements in Navigator 4.x, you get a huge mess. The same sorts of things that happen when you apply margins to inline elements will happen if you

An easy way to remember the order in which sides have to be declared,other than thinking of it as being clockwise from the top, is to keepin mind that getting the sides in the correct order helps you avoid"trouble" -- that is, TRBL, for "Top RightBottom Left."

It's also possible to mix up the types of length value you use.You aren't restricted to using a single length type in a givenrule, as shown here:

Figure 6-34

Figure 6-34. Creating a "triple border" on H2 elements

We can take that further and decide to set a wavy border along thetop of each H1 element, as illustrated in Figure 6-35. The image is colored in such a way that itblends 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 employingit in some creative ways, you can set up some truly astonishing margins. This comes into play when an element with declared marginsimmediately follows another such element in the document'slayout. This was discussed in the previous chapter, using thisexample:

LI {margin-top: 10px; margin-bottom: 20px;}

Padding and borders, where they exist, are never collapsed. Ifneither is declared, then both will default to 0(zero). This assumes that no style is set for the border. If a borderstyle is set, then the value of border-width

1.4.5. CSS Comments

/* These are my styles! Yay! */

CSSalso allows for comments, but it uses a completely different syntaxto accomplish this. CSS comments are very similar to C/C++ comments,in that they are surrounded by /* and*/:

/* This is a CSS1 comment */