Thursday 19th of January 2017 01:52:37 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 will be treated as though the elements were PREelements, in that whitespace would not be ignored, as shown in Figure 4-20:

P {white-space: pre;}<P>This    paragraph   has     manyspaces        in it.</P>
Figure 4-20

Figure 4-20. Honoring the spaces in markup

With a white-space value ofpre, the browser will pay attention to extraspaces and even carriage returns. In this respect, and in this | Q | R | S | T | U | V | W | X | Y | Z

Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

BODY {background-image: url(bg23.gif);
background-repeat: no-repeat;
background-position: 20px 30px;}
Figure 6-43

Figure 6-43. Offsetting the background image using length measures

This is, of course, different than percentage values, in the sense that the offset is simply from one top left corner to another. In other words, the top left corner of the background image lines up with the point specified in the background-position declaration. You can combine length and percentage values, though, to get a sort of "best of in place, but it will remain fixed so long as the viewing areaisn't resized.

Figure 6-56

Figure 6-56. Centering still holds, even if the image is "fixed"

There is only one other value forbackground-attachment, and that's thedefault value scroll. As you'd expect, thiscauses the background to scroll along with the rest of the documentwhen viewed in a web browser, and it doesn't necessarily changethe origin image's position as the window is resized. If the

As we'll see later in the chapter, you have the option to force your content to overflow the element. For now, however, let's concentrate on ways to deal with its width and height. You could try explicitly assigning a width and height, like this:

top: 10%; bottom: 20%; left: 50%; right: 10%; width: 30em; height: 15em;

However, this approach seems a little heavy-handed, and could have disastrous consequences in small browsing environments like handheld devices. Furthermore, it forces you to declare a specific height and width, which gives up a lot of flexibility. Wouldn't it be

XML documents are also quite naturally retrieved from a persistence layer (databases, file systems, XML stores). This lends XML to be used in real world applications where the information being used by different parts of a system is the most important thing.

XML is platform independent, textual information

Information in an XML document is stored in plain-text. This might seem like a restriction if were thinking of embedding binary information in an XML document. There are several advantages to keeping things plain text. First, it is easy to write parsers and all other XML enabling technology on different platforms. Second, it makes everything very interoperable by staying with the lowest common denominator approach. This is the whole reason the web is so successful despite all its flaws. By accepting and sending information in plain text format, programs running on disparate platforms can communicate with each other. This also makes it easy to integrate new programs on top of older ones (without rewriting the old programs), by simply making the interface between the new and old program use XML.

For example, if you have an address book document stored in an XML file, created on a Mac, that you would like to share with someone who has a PC, you can simply email them the plain text address book XML document. This cant be done with binary encoded information which is totally platform (and program) dependent.

@import url(styles.css); /* @import comes first */H1 {color: gray;}</STYLE>

Like LINK, there can be more than one@import statement in a document. UnlikeLINK, however, the style sheets of every@import directive will always be loaded and used.So given the following, all three external style sheets will beloaded, and all of their style rules will be used in the display ofthis document: