Color, Filters, and Other Style Sheet Properties
(Page 1 of 4 )
Continuing with our multi-part series on style sheet properties, this fourth part of the series covers color, filters, and more. It is excerpted from chapter four of
Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.
Alphabetical Property Reference: Color
color
IE 4 NN 4 Moz all Saf all Op all CSS 1
Inherited: Yes
Defines the foreground text color of the element. For some graphically oriented elements, such as form controls, the color property may also be applied to element edges, checkmarks, or other features. Such extracurricular behavior is browser-specific and may not be the same across browsers.
CSS Syntax
color: color
Value
See the discussion of color property values at the beginning of this chapter.
Initial Value black
Example th {color: darkred}
Applies To All elements .
Object Model Reference
[window.]document.getElementById("elementID").style.color
content
IE n/a NN n/a Moz all Saf all Op all CSS 2
Inherited: No
Defines the actual content or source of content to be displayed before and/or after the current element. In CSS jargon, this kind of content is called generated content. This property may be set only with the :before and :after pseudo-elements associated with a real element. For example, as a result of the following style sheet rule:
blockquote:after {content:"(Reprinted by permission.)"}
a permissions phrase is appended to the end of every blockquote element, although the content does not become a member of the document tree. HTML tags in the content text are not interpreted, but if the situation warrants it, an external document can be assigned to the content property.
CSS Syntax
content: string | uri | counter | attr(attrName) | open-quote | close-quote |
no-open-quote | no-close-quote | none | normal
Value
The purpose of the “no” quote types is to let you specify the effect of a quote (as far as quote nesting goes) without displaying a quote symbol. Multiple space-delimited strings may follow the content: property name.
Another value ( counter ) is not yet supported by all browsers (see counter-increment ), but its potential is significant for documents that would benefit from client-side section number generation. A CSS counter offers a way for a style sheet to control numbering schemes for sequences of elements (such as sections, illustrations, and the like). The assumption is that the numbering is not part of the actual content, but is determined solely by the rendered context of the element within the document. Therefore, if you remove a numbered paragraph from a document in the edit phase, the paragraph numbering of the document adjusts itself automatically when the page is rendered.
The basic operation of a counter entails assigning an identifier to it (thus allowing multiple counters to exist in the same document, such as one for sections, another for subsections). Other CSS properties ( counter-increment and counter-reset ) require values that point to an identified counter to control the numbering sequence. The following style sheet rule inserts a section label and number in front of every h1 element, and increments the counter number each time the style is applied to an h1 element while the document renders:
h1:before {counter-increment: secNum ;
content: "Section " counter(secNum) ". "}
When counters are implemented in mainstream browsers, they will provide substantial power to highly structured, long documents.
Initial Value "" (empty string)
Example p.note:before {content: "==>"}
Applies To All elements plus a :before and/or :after pseudo-element.
counter-increment, counter-reset
IE n/a NN n/a Moz 1.8 Saf n/a Op 7 CSS 2
Inherited: No
These properties control the numbering sequence of a CSS counter used for generated content (see the content property). The counter-increment property sets the amount (and direction) of change each time the counter is accessed during rendering. The counter-reset property lets you set the counter to a specific number (default of zero).
CSS Syntax
counter-increment: counterID [ posOrNegInteger ] | none
counter-reset: counterID [ posOrNegInteger ] | none
Value
A counterID is an identifier assigned to a content: counter(counterID) style property. The optional integer value is space-delimited after the counterID . You can combine multiple counter IDs in the same style property by stringing together space-delimited pairs of ID and integer values.
Initial Value none
Example h1 {counter-reset: subSection}
Applies To All elements.
cue
IE n/a NN n/a Moz n/a Saf n/a Op n/a CSS 2
Inherited: No
For aural style sheets only, this property provides a shorthand for setting cue-before and cue-after property settings. A cue is a sound (also known as an auditory icon) that can be used to aurally delimit the reading of document content. Cue properties are URIs to sound resources.
CSS Syntax
cue: cue-before || cue-after
Value
If there are two values, the first is applied to the cue-before property and the second to the cue-after property. If there is only one value, the same auditory icon is applied to both cue-before and cue-after .
Initial Value none
Applies To All elements.
cue-after, cue-before
IE n/a NN n/a Moz n/a Saf n/a Op n/a CSS 2
Inherited: No
For aural style sheets only, a cue is a sound (also known as an auditory icon) that can be used to aurally delimit the reading of document content. The cue-before and cue-after properties are URIs to sound files that are to be played before and after the content is rendered via text-to-speech or another aural medium.
CSS Syntax
cue-after: uri | none
cue-before: uri | none
Value
Any valid complete or relative URL (in CSS format) to a sound file in a MIME type supported by the browser. You may apply the same values to both properties for the same style selector if it makes aural sense for the listener.
Initial Value none
Example li {cue-before: url(ding.wav); cue-after: url(dong.wav)}
Applies To All elements.
Next: Alphabetical Property Reference: Cursor >>
More DHTML Articles
More By O'Reilly Media
|
 This article is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Check it out today at your favorite bookstore. Buy this book now.
|
|
