Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 25th of February 2018 10:20:31 PM

3.3. Percentage Values

Compared to length units, percentage units are almost laughably simple. They're pretty much exactly what you'd expect -- a positive or negative number, followed by a percent sign (%). For example:

H1 {font-size: 18pt;}
H1.tall {line-height: 150%;}

This sets the line-height of all H1 elements with a class of tall to be half again as large as normal, as we see in Figure 3-8.

Figure 3-8

Figure 3-8. Line height of 100% (top) and 150% (bottom)

Percentage values are always computed relative to another value -- usually a length unit. In this case, the line-height is exactly 27 points (18pt times 1.5). This is the same as setting the line-height to 1.5em , although neither method is particularly recommended over the other.

Percentages can, in general, be either positive or negative. However, there are properties that accept percentage values, but will not permit negative values (of any kind, including percentages). These will be mentioned as the properties are covered in subsequent chapters.

border-styleIE4 P/Y IE5 P/Y NN4 P/P Op3 Y/-

Sets the style of the overall border of an element, using the color set by border-color or the foreground of the element itself if no border-color has been defined. CSS1 does not require recognition of any values besides none and solid. Any unrecognized value from the list of values should be reinterpreted as solid.



Library Navigation Links

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

appearances. And that isn't the end of what's possible.Now that we know how to keep a background image from repeating, howabout moving it around in the background?

6.2.3. Background Positioning

Thanks to

In order to create applications of this category, you might have to define a DTD for your information. Then you have to write classes to import and export information from your XML document(s) (validating using your application's DTD if you have one). You must also write the classes which create the user interface in your application. The user of your application can view and modify information using the GUI (graphical user interface), and they can save (and load) their information to (and from) an XML file (that might use your DTD); in other words, they can save (and load) their information to (and from) an ApplicationML file (where Application is the name of your application). Some examples are AddressBookML, MathML, SVGML, etc.

The classes that import and export information from your ApplicationML file must use the parser and SAX or DOM API in order to import the information. These classes can access this information by using one of the following strategies:

  1. Use DOM to directly manipulate the information stored in the document (which DOM turns into a tree of nodes). This document object is created by the DOM XML parser after it reads in the XML document. This option leads to messy and hard-to-understand code. Also, this works better for document-type data rather than just computer generated data (like data structures and objects used in your code).
  2. Create your own Java object model that imports information from the XML document by using either SAX or DOM. This kind of object model only uses SAX or DOM to initialize itself with the information contained in the XML document(s). Once the parsing and initialization of your object model is completed, DOM or SAX isn't used anymore. You can use your own object model to accessed or modify your information without using SAX or DOM anymore. So you manipulate your information using your own objects, and rely on the SAX or DOM APIs to import the information from your ApplicationML file into memory (as a bunch of Java objects). You can think of this object model as an in-memory instance of the information that came was "serialized" in your XML document(s). Changes made to this object model are made persistent automatically, you have to deal with persistence issues (ie, write code to save your object model to a persistence layer as XML).
  3. a similar trick that helps work around a bug in most versions ofNavigator 4. In situations where font-weight:normal has been set on an element, this value willbe inherited by all the descendants of the element. That's asit should be, of course, but Navigator takes it one step too far.Given the following:

    <P STYLE="font-weight: normal;">This is a paragraph which contains a<B>boldface element</B>, but Navigator 4 won't make the text bold.</P>

    That's right: all of the text in the example paragraph will

    Anyway, this is almost exactly the same as setting percentage values:only the scale is different, going up to 255instead of 100%. Accordingly, the values in Table 3-2 correspond to our usual list of colors.

    Table 3-2. Numeric RGB Equivalents for Common Colors

    As expected, any value outside the range of-255 is clipped, just as with percentages -- although in thiscase, of course, the values are clipped to 0 and255: