Javascript [Electronic resources] : The Definitive Guide (4th Edition) نسخه متنی

Chapter 18. Cascading Style Sheets and Dynamic HTML

Cascading Style Sheets
(CSS) is a standard for specifying the visual presentation[1] of HTML (or XML) documents. In theory, you use HTML
markup to specify the structure of your document, resisting the
temptation to use deprecated HTML tags such as
<font> to specify how the document should
look. Instead, you use CSS to define a style sheet that specifies how
the structured elements of your document should be displayed. For
example, you can use CSS to specify that the level-one headings
defined by <h1> tags should be displayed in
bold, sans-serif, centered, uppercase, 24-point letters.

[1] And, in the CSS2 standard, also the aural presentation.

CSS is a technology intended for use by graphic designers or anyone
concerned with the precise visual display of HTML documents. It is of
interest to client-side JavaScript programmers because the document
object model allows the styles that are applied to the individual
elements of a document to be scripted. Used together, CSS and
JavaScript enable a variety of visual effects loosely referred to as

Dynamic HTML
(DHTML).[2]

[2] Many advanced DHTML effects also involve the
event-handling techniques we'll see in Chapter 19.

The ability to script CSS styles allows you to dynamically change
colors, fonts, and so on. More importantly, it allows you to set and
change the position of elements and even to hide and show elements.
This means that you can use DHTML techniques to create animated
transitions where document content "slides in" from the
right, for example, or an expanding and collapsing outline list in
which the user can control the amount of information that is
displayed.

This chapter begins with an overview of CSS style sheets and the use
of CSS styles to specify the position and visibility of document
elements. It then explains how CSS styles can be scripted using the
API defined by the DOM Level 2 standard. Finally, it demonstrates the
nonstandard, browser-specific APIs that can be used to achieve DHTML
effects in Netscape 4 and Internet Explorer 4.