Section 4.1. Property Value Types
4.1. Property Value TypesMany style sheet properties share similar data requirements. For the sake of brevity in the reference listings, this section describes a few common property value types in more detail than is possible within each listing. When you see one of these property value types associated with a property, consult this section for a description of the type. 4.1.1. LengthA length value defines a linear measure of document real estateusually a horizontal or vertical measurement of distance, height, width, thickness, or size. Length units may be relative or absolute. A relative unit depends upon variables such as the dot pitch or pixel density of the video display that shows a document. Relative units in CSS are pixels (px), ems (em), and exes (ex). An em is the actual height of the element's font (or inherited font) as rendered on a given display device; an ex is the height of a lowercase "x" under the same conditions. The exception to this rule is when em and ex units are used to define the font-size property, in which case the units are relative to the font size of the parent element. Pay special attention when a relative value is to be inherited by a child element. In those circumstances, the CSS recommendation says that the child element inherits the computed value of the property (computed at the time of the property definition in the parent element's assignment), rather than an adjusted value. For example, if the body element specifies a font-size of 20pt and a text-indent of 2em (equaling 40pt), the text-indent value inherited by p or other elements within the body element is equal to 40pt, regardless of what the current font-size of the other elements may be. To override the inherited computed value, the p or other element needs to reassign a text-indent property for that element (or other outer container that intervenes from the body). Mozilla, Safari, Opera, and IE for the Macintosh behave according to the recommendation. But IE for Windows, even in IE 7's standards-compatible mode, ignores this convention. Instead, this browser family recomputes the inherited relative style assignment. Thus, in the example we just discussed, a p element with a font-size set to 10pt does not inherit the 40pt computed text-indent value from the body. Rather, the unstated text-indent value for the p element is recomputed for its 10pt font-sizean effective text-indent value of 20pt. (This type of inconsistency is indicative of occasional cross-browser difficulties with CSS in implementing pixel-perfect identical representations on all platforms.) Pixel values, while frequently used for font sizes, present their own potential problems. A pixel, as noted earlier, varies in size with the pixel density of the output device. The higher the density, the smaller each pixel is. For printing output on 300- to 600-dpi printers, browsers perform internal scaling calculations to assign more dots per pixel so that a text character sent to the printer approximates the size as viewed on the screen. But don't expect absolutely perfect sizes on all monitors or printers. Allow for scaling approximations for all length value assignments. Absolute length units are intended for output media with constant physical properties (such as a PostScript printer). Although there is nothing preventing you from using absolute or relative units interchangeably, you need to be aware of the consequences given your audience. Absolute length units in CSS are inches (in), centimeters (cm), millimeters (mm), picas (pi), and points (pt). 4.1.2. URI and URL (and IRI)Universal Resource Identifier (URI) is a broad term for an address of content on the Web (while an Internationalized Resource IdentifierIRIis an address that can include Unicode characters to accommodate non-ASCII characters). A Universal Resource Locator (URL) is a type of URI. For most web authoring, you can think of them as one and the same, because most web browsers restrict their focus to URLs. A URL may be complete (including the protocol, host, domain, and the rest) or may be relative to the URL of the current document, with one exception: if the style rule is imported from a .css file (perhaps from a different directory), a relative URL uses the path to the .css file as the base. The CSS property syntax prescribes a special format for specifying a URI property value, as follows: propertyName: url("actualURL") Quotes surrounding the actualURL are optional, but recommended. 4.1.3. ColorsA color value can be assigned either via an RGB (red-green-blue) value or a plain-language equivalent (see Appendix A). For style sheet RGB values, you have a choice of three formats: hexadecimal triplet, decimal values, or percentage values. A hexadecimal triplet consists of three pairs of hexadecimal (base 16) numbers that range between values of 00 and ff, corresponding to the red, green, and blue components of the color. The three pairs of numbers are bunched together and preceded by a pound sign (#). Therefore, the reddest of reds has all red (ff) and none (00) of the other two colors: #ff0000; pure blue is #0000ff. Letters a tHRough f can also be uppercase letters. (An approved notational shortcut allows you to specify one hexadecimal character when the value is intended to be a matching pair of characters. For example, #f0a is interpreted as #ff00aa.) The other types of RGB values require a prefix of rgb( ) with a comma-delimited list of red, green, and blue values in the parentheses. As decimal values, each color can range from 0 through 255, with zero meaning the complete absence of a particular color. You can also specify each value by a percentage. The following examples show four different ways of specifying pure green: color: green color: #00ff00 color: rgb(0, 255, 0) color: rgb(0%, 100%, 0%) If you exceed the maximum allowable values in the last two examples, the browser trims the values back to the maximums. These numbering schemes obviously lead to a potentially huge number of combinations (over 16 million). In the early days of the web, typical PC display settings (throttled by limitations in processing power and memory) limited output to 256 colors, meaning that subtle differences among the 16 million potential colors were lost on visitors who had those settings. As a result, web content authors commonly used what became known as a web-safe palette consisting of 216 distinguishable colors. Although today's computers have sufficient processing power and memory to accommodate millions of colors with ease, some page designers continue to adhere to the more limited palette. A fine online reference of colors that work well on all browsers and PC color display settings can be found at http://www.lynda.com/hex.asp. The CSS2 specification adds another dimension to color naming: you can specify colors that the user has assigned to specific user interface items in the operating system's control panel. Such colors are typically adjustable for items like button label text, scrollbars, 3D shadows, and so on. A color-blind user, for example, may have a carefully crafted set of colors that provide necessary contrast to see screen elements. Use these choices with caution, however, because even the default rendered color can vary widely between browser brands and operating systems. To link those colors to a style, use any of the following keywords in place of the color property value:
|
EAN: 2147483647
Pages: 120