 | Cascading Style Sheets: The Definitive Guide |  |
Tuesday 07th of February 2012 04:09:01 AM
In the previous chapter, we covered a great deal of information on how CSS handles the visual formatting of a document. However, we did this in a mostly practical fashion: lots of explanation about how things work, with only a little lip service paid to the questions of why. In this chapter, we turn to the theoretical side of visual rendering, with only occasional references to the practical.
You may wonder why it's necessary to spend an entire chapter on the theoretical underpinnings of visual rendering in CSS. The main reason is to cover all the bases. I attempted to provide as many and varied examples as possible in the previous chapters, but with a model as open and powerful as that contained within CSS, no book could hope to cover every possible way of combining properties and effects. Every reader of this book will obviously go on to discover new ways of using CSS for their own document effects.
In the course of so doing, you may encounter what seems like strange behavior on the part of user agents. With a thorough grasp of how the visual rendering model works in CSS, you'll be able to determine whether the behavior is a correct (if unexpected) consequence of the rendering engine CSS defines or whether you've stumbled across a bug that needs to be reported. (See Appendix A, "CSS Resources", for details on how to report problems with rendering engines.)
In the rendering of elements, CSS assumes that every element generates one or more rectangular boxes, called element and other inline content and not to block-level elements. We can seta line-height value for a block-level element, butthe only way this will have any visual impact is by being applied toinline content within that block-level element. Consider thefollowing paragraph, for example:
<P STYLE="line-height: 0.25em;"></P>
Without content, the paragraph won't have anything to display,so it will not. The fact that this paragraph has aline-height of any value -- be it boxes . (Future versions of the specification may allow for nonrectangular boxes, but for now everything is rectangular.) Each element box consists of a content area at its core. This content area is surrounded by optional amounts of padding, borders, and margins. These are considered optional because all could be set to a width of zero, effectively removing them from the element box. An example content area is shown in Figure 8-1, along with the surrounding regions of padding, border, and margins.
Each of the margins, borders, and padding can be set using various properties, such as margin-left or border-bottom. The content's background (for example, a color or tiled image) is also applied to the padding, while the margins are always transparent, allowing the background of any parent elements to be visible. In effect, the margins simulate the HSPACE and VSPACE attributes of images, although in a much more sophisticated fashion. Padding cannot be set to a negative value, but margins can. The effects of negative margins are explored later in this chapter.
The borders, on the other hand, have their own rules. Borders are generated using defined styles, such as solid or inset, and their color can be set using the border-color property. If no color is set, then the color of the border is based on the foreground color of the element's content. For example, if the text of a paragraph is white, then any borders around that paragraph will be white, unless a different border color is explicitly declared by the author. If a border style has "gaps" of some type, then the element's background is visible through those gaps; in other words, the border has the same background as the content and padding. Finally, the width of a border can never be negative.
There are differences in how different types of elements are formatted, however. Block-level elements are not treated in the same way that inline elements are, for example, and floated elements introduce a whole new level of complexity. Let's examine each type of element in turn.
|  | |
| 7.8. Summary |  | 8.2. Block-Level Elements |
Copyright © 2002 O'Reilly & Associates. All rights reserved.
BODY {background-image: url(yinyang.gif);background-repeat: repeat;}
I've left out a background color in order to keep the ruleshort, but remember to include a background color any time you have abackground image. And, of course, the effect shown in Figure 6-28 would have been the same if we'd leftout the background-repeat property altogether,since repeat is its default value.
Let's assume, though, that we just want images down the left
Let's consider another example, illustrated in Figure 8-20, where the left margin is set to be negative:
DIV {width: 400px; border: 1px solid black;}
P.wide {margin-left: -50px; width: auto; margin-right: 10px;
border: 3px solid gray;}
In this case, not only does the paragraph spill beyond the borders of the DIV, but also beyond the edge of the browser window itself!
rgb(color)
where color is one of two ways to specifythe color. The first way is to use percentages, and the second, whichuses numbers, is discussed later in this section.
Perhaps you want your H1 elements to be colored ashade of red somewhere between the values for red and maroon.red is simply rgb(100%,0%,0%),whereas maroon is more like(50%,0%,0%). In order to get a color between those
That's all it takes.
There may be times where you want a different amount of space on each side of an element. That's simple as well. If we want all H1 elements to have a top margin of 10 pixels, a right margin of 20 pixels, a bottom margin of 15 pixels, and a left margin of 5 pixels, here's all we need:
H1 {margin: 10px 20px 15px 5px; background-color: silver;}As Figure 7-8 reveals, we have what we wanted. The order of the values is obviously important, and follows this pattern: about suricates in general terms, examining their life in the wildand their general appeal to humans. The article appears in themagazine as shown in Figure 11-6.
Obviously, the folks at Meerkat Monthly havebeen having some fun with their desktop publishing program. Itwon't be easy to get everything just the way it is on the page,but we'll see what we can do.