Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 20th of April 2018 04:42:34 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 the positioned element, up to the point where the clipping rectangleends.

The syntax of rect(...) is, as you may havealready realized, rather unfortunate. It is based on an early draftof the positioning section, which used the top-left-offset scheme.Internet Explorer implemented thisbefore CSS2 was made a full Recommendation, and so came into conflictwith a last-minute change that made rect(...) useside-offsets, just like the rest of CSS2. This was done, reasonably 1.57rad ; in each case, the values are translated 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.

Opera 3.6. More than one auto

Now let us consider the cases where two of these three properties are set to auto. If both the margins are set to auto, then they are set to equal lengths, thus centering the element within its parent, as you can see from Figure 8-14:

Then you change your mind, deciding that warning text should be grayand that links in such text should be silver. The preceding rulesneed only be changed to reflect the new values:

P.warn {color: gray;}P.warn A:link {color: silver;}

Another use for color is to draw attention to certain types of text.For example, boldfaced text is already fairlyobvious, but you could give it a different color to make it stand outeven further: :first-child

Thelast of the new pseudo-class selectors we'll cover here is the:first-child selector. This is used to match anelement that is the first child of another element. For example, youmight want to make the first child of every DIVitalicized instead of normal text, as long as that first child is aparagraph (shown in Figure 10-11):

Figure 10-11

Figure 10-11. Selecting styles for certain first children

If there is no such ancestor, then the content edge of the root element is used to establish a containing block.

The main thing to remember about the containing block is that it establishes a formatting context for all of its descendant elements. For example, if margins are declared as percentages, the percentages are calculated with respect to the containing block. This gives us

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

Figure 7-16

Figure 7-16. Collapsed versus uncollapsed margins

Correctly implemented user agents will collapse the vertically