HTML and CSS Reference
In-Depth Information
In some situations, the keyword may be part of a functional style notation. For example,
in CSS the specification of a URL as a value is marked by
url(
address
)
, where
address
is
the actual value of the resource to be linked to:
body {background: url(stars.png);}
#div1 {background: url(http://democompany.com/images/tile.gif);}
Newer color formats like
rgb()
,
rgba()
,
hsl()
, and
hsla()
are set with similar
notation, and other functional notation style values may emerge over time such as
calc()
(see Chapter 6 for a brief discussion). For example, there is discussion of CSS potentially
including variables which allows values to be set in one place and used in various rules. For
example,
@variables {
primaryBackground: #F8D;
primaryColor: #000;
defaultMargin: 2em;
}
p {color: var(primaryColor); background-color: var(primaryBackground);
margin: var(defaultMargin);}
So far such ideas are still uncommon, so if a value is not found within quotes or followed by
a measurement, it is likely a keyword or counter. If it isn't or is simply not an understood
value, it will be ignored by CSS-conforming user agents anyway.
Counters
Counters demonstrate the possibility of variable-like values in CSS. They are defined as
alphanumeric names that correspond to some current counter value in a document. In some
cases, the
counter( )
functional notation is used and in some cases it is not, as shown by
these rules:
ol.cT {
counter-reset: counter1;
list-style-type: none;}
ol.cT li:before {
counter-increment: counter1;
content:
counter(counter1) " - " ;}
Interestingly, the ambiguity of allowing the
counter1
value to appear in a keyword-like
fashion is somewhat troubling. It is likely that the
counter( )
style syntax will eventually
be applied everywhere.
CSS Color Values
Style sheets support a variety of color measurement values, as shown in Table 5-4. Appendix C
provides a greater discussion of possible color values and names.
