|
|
|
Chapter 18. Cascading Style Sheets and Dynamic HTMLCascading 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.
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]
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. |
|
|
|