Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 13th of December 2017 08:03:12 PM

3.5. CSS2 Units

In addition to what we've covered, CSS2 adds a small number of new units, almost all of which are concerned with aural style sheets (employed by those browsers that are capable of speech). We'll briefly cover them here:

Angle values

Used to define the position from which a given sound should seem to originate. There are three type of angles: degrees (deg ), grads (grad ), and radians (rad ). For example, a right angle could be declared as 90deg, 100grad , or 1.57rad ; in each case, the values are translated calculations, but will be applied to the right and left ends of the element. If an inline element has both padding and a background, the background may be extended above and below the edges of the line-box in which the inline element appears, but user agents are not required to support this behavior. There is also no defined behavior to say whether the foreground content of a previous line appears above the background of a succeeding line, or is overwritten by that background. Negative values are not permitted.


into degrees in the range through 360. This is also true of negative values, which are allowed. The measure -90deg is the same as 270deg.

Time values

Used to specify delays between speaking elements, these values can be expressed as either milliseconds (ms) or seconds (s). Thus, 100ms and 0.1s are equivalent. Time values may not be negative.

Frequency values

Used to declare a given frequency for the sounds that speaking browsers can produce. Frequency values can be expressed as hertz (Hz) or megahertz (mHz) and cannot be negative. The values labels are case-insensitive, so 10mHz and 10mhz are equivalent.

In addition to these values, there is also an old friend with a new name. A URI is a Uniform Resource Identifier, which is sort of another name for a Uniform Resource Locator (URL). The difference is, for now, mostly semantic, but many authors are beginning to adopt the convention of referring to online addresses as URIs, not URLs. The specification still requires that URIs be declared with the form url(...), though, so it's hard to know exactly what the point was of including a section in CSS2 about how CSS2 uses URIs instead of URLs.

Library Navigation Links

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

Thus, each list item has a 10-pixel top margin and a 15-pixel bottommargin. However, when the list is rendered, the distance betweenadjacent list items is 15 pixels, not 25. This is because along thevertical axis, adjacent margins are said to be collapsed. In otherwords, the smaller of the two margins is eliminated in favor of thelarger. Figure 7-16 shows the difference betweencollapsed and uncollapsed margins.

Figure 7-16

Figure 7-16. Collapsed versus uncollapsed margins

Correctly implemented user agents will collapse the vertically Also paragraph breaks.  <P>But making extra space by stringing P tags together doesn't work <P><P><P><P>. Use multiple BR tags, or insert special non-breaking space characters between P tags instead:

  Also paragraph breaks. 

But making extra space with multiple P tags doesn't work change if the parent element's width changes in some way. For example, assume the following, shown in Figure 7-10:

P {margin: 10%;}
<DIV STYLE="width: 200px;">
<P>This paragraph is contained within a DIV which has a width of 200 pixels,
so its margin will be 10% of the width of the paragraph's parent (the DIV).
Given the declared width of 200 pixels, the margin will be 20 pixels on
all sides.</P>