Units
Units
Length units
The format of a length value is an optional sign character ('+' or '-',
with '+' being the default) immediately followed by a number (with or without a
decimal point) immediately followed by a unit identifier (a two-letter
abbreviation). After a '0' number, the unit identifier is optional.
Some properties allow negative length units, but this may complicate the
formatting model and there may be implementation-specific limits. If a negative
length value cannot be supported, it should be clipped to the nearest value that
can be supported.
There are two types of length units: relative and absolute. Relative units
specify a length relative to another length property. Style sheets that use
relative units will more easily scale from one medium to another (e.g. from a
computer display to a laser printer). Percentage units (described below) and
keyword values (e.g. 'x-large') offer similar advantages.
These relative units are supported:
H1 { margin: 0.5em } /* ems, the height
of the element's font */
H1 { margin: 1ex } /* x-height, ~ the
height of the letter 'x' */
P { font-size: 12px } /* pixels, relative
to canvas */
The relative units 'em' and 'ex' are relative to the font size of the
element itself. The only exception to this rule in CSS1 is the 'font-size'
property where 'em' and 'ex' values refer to the font size of the parent
element.
Pixel units, as used in the last rule, are relative to the resolution of
the canvas, i.e. most often a computer display. If the pixel density of the
output device is very different from that of a typical computer display, the UA
should rescale pixel values. The suggested reference pixel is the visual
angle of one pixel on a device with a pixel density of 90dpi and a distance from
the reader of an arm's length. For a nominal arm's length of 28 inches, the
visual angle is about 0.0227 degrees.
Child elements inherit the computed value, not the relative value:
BODY {
font-size: 12pt;
text-indent: 3em; /* i.e. 36pt
*/
}
H1 { font-size: 15pt }
In the example above, the 'text-indent' value of 'H1' elements will be
36pt, not 45pt.
Absolute length units are only useful when the physical properties of the
output medium are known. These absolute units are supported:
H1 { margin: 0.5in } /* inches, 1in =
2.54cm */
H2 { line-height: 3cm } /* centimeters
*/
H3 { word-spacing: 4mm } /* millimeters
*/
H4 { font-size: 12pt } /* points, 1pt =
1/72 in */
H4 { font-size: 1pc } /* picas, 1pc = 12pt
*/
In cases where the specified length cannot be supported, UAs should try to
approximate. For all CSS1 properties, further computations and inheritance
should be based on the approximated value.
Percentage units
The format of a percentage value is an optional sign character ('+' or '-',
with '+' being the default) immediately followed by a number (with or without a
decimal point) immediately followed by '%'.
Percentage values are always relative to another value, for example a
length unit. Each property that allows percentage units also defines what value
the percentage value refer to. Most often this is the font size of the element
itself:
P { line-height: 120% } /* 120% of the
element's 'font-size' */
In all inherited CSS1 properties, if the value is specified as a
percentage, child elements inherit the resultant value, not the percentage
value.
Color units
A color is a either a keyword or a numerical RGB specification.
The suggested list of keyword color names is: aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and
yellow. These 16 colors are taken from the Windows VGA palette, and their RGB
values are not defined in this specification.
BODY {color: black; background: white
}
H1 { color: maroon }
H2 { color: olive }
The RGB color model is being used in numerical color specifications. These
examples all specify the same color:
EM { color: #f00 } /* #rgb
*/
EM { color: #ff0000 } /* #rrggbb
*/
EM { color: rgb(255,0,0) } /* integer
range 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* float range
0.0% - 100.0% */
The format of an RGB value in hexadecimal notation is a '#' immediately
followed by either three or six hexadecimal characters. The three-digit RGB
notation (#rgb) is converted into six-digit form (#rrggbb) by replicating
digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This makes
sure that white (#ffffff) can be specified with the short notation (#fff) and
removes any dependencies on the color depth of the display.
The format of an RGB value in the functional notation is 'rgb(' followed by
a comma-separated list of three numerical values (either three integer values in
the range of 0-255, or three percentage values in the range of 0.0% to 100.0%)
followed by ')'. Whitespace characters are allowed around the numerical values.
Values outside the numerical ranges should be clipped. The three rules
below are therefore equivalent:
EM { color: rgb(255,0,0) } /* integer
range 0 - 255 */
EM { color: rgb(300,0,0) } /* clipped to
255 */
EM { color: rgb(110%, 0%, 0%) } /* clipped to
100% */
RGB colors are specified in the sRGB color space UAs may vary in the
fidelity with which they represent these colors, but use of sRGB provides an
unambiguous and objectively measurable definition of what the color should be,
which can be related to international standards
UAs may limit their efforts in displaying colors to performing a
gamma-correction on them. sRGB specifies a display gamma of 2.2 under specified
viewing conditions. UAs adjust the colors given in CSS such that, in combination
with an output device's "natural" display gamma, an effective display gamma of
2.2 is produced.
URL
A Uniform Resource Locator (URL) is identified with a functional notation:
BODY { background:
url(http://www.bg.com/pinkish.gif) }
The format of a URL value is 'url(' followed by optional white space
followed by an optional single quote (') or double quote (") character followed
by the URL itself followed by an optional single quote (') or double quote (")
character followed by optional whitespace followed by ')'. Quote characters that
are not part of the URL itself must be balanced.
Parentheses, commas, whitespace characters, single quotes (') and double
quotes (") appearing in a URL must be escaped with a backslash: '\(', '\)',
'\,'.
Partial URLs are interpreted relative to the source of the style sheet, not
relative to the document:
BODY { background: url(yellow)
}
|
