Tuesday 02nd of September 2014 06:39:13 PM

by Eric A. Meyer
ISBN 1-56592-622-6
First edition, published May 2000.
(See the catalog page for this book.)

Search the text of Cascading Style Sheets: The Definitive Guide.

Table of Contents

Copyright Page
Preface
Chapter 1: HTML and CSS
Chapter 2: Selectors and Structure
Chapter 3: Units and Values
Chapter 4: Text Properties
Chapter 5: Fonts
Chapter 6: Colors and Backgrounds
Chapter 7: Boxes and Borders
Chapter 8: Visual Formatting
Chapter 9: Positioning
Chapter 10: CSS2: A Look Ahead
Chapter 11: CSS in Action
Appendix A: CSS Resources
Appendix B: HTML 2.0 Style Sheet
Appendix C: CSS1 Properties
Appendix D: CSS Support Chart
Index
Colophon

BODY {position: relative;}
<P STYLE="position: absolute; top: 0; right: 25%; left: 25%; bottom: auto;
width: 50%; height: auto; background: silver;">...</P>
Figure 9-20

Figure 9-20. An absolutely positioned paragraph

The paragraph is now positioned at the very beginning of the document, half as wide as the document's width and overwriting the first few elements!

In addition, if the document is scrolled, the paragraph will scroll Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

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

/* This is a CSS1 comment */

Comments can span multiple lines, just as in C++:

/* This is a CSS1 comment, and it
can be several lines long withouttext-align of center, then the
centers of the line boxes would have lined up, and if it were set to
justify, then each line box would be forced to be
as wide as the paragraph's content area. The difference is made
up in letter- and word-spacing, as we see in Figure 8-49.

Figure 8-49

Figure 8-49. Line-box layout with full justification

That pretty well covers how line boxes are generated, at least in the simplest cases. As we're about to see, however, the inline formatting model is not exactly simple.

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 employing it in some creative ways, you can set up some truly astonishing 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?