Cascading style sheets and Dynamic HTML Cascading Style Sheets (CSS) are criteria for specifying the performance of an HTML document or XML document. using CSS and JavaScript, you can create a variety of visual effects that can be collectively referred to as Dynamic HTML (DHTML)CSS styles are specified by a name/value attribute list, separated by semicolons, separated by a colon between the name attribute and the value attribute. 1. Apply style rules to document elements (two methods)A, use them in the Style property of the HTML tag. such as: <p Style=margin-left:lin;margin-right:lin; " />B. Using style sheet stylesheet fileCSS style sheets are composed of a collection of style rules. Each rule begins with a selector, which specifies a document element followed by a set of style attributes and their values enclosed in curly braces 2. Associating style sheets and documentsA. Place the stylesheet between <style></style> in the document B, save the stylesheet in a style sheet file, and then in the Note: You can import a style into <style></style> or another style sheet file by @import "file name". 3. Cascadethe C in CSS represents cascading. This term describes the style rules that are applied to the specified elements in the document from a different cascade. Precedence Rules The user style sheet overrides the default browser style sheet (defined in the CSS file), and the author style sheet overrides the user style sheet (the style that is placed in the .Inline styles override all style sheets (placed in the style attribute of the HTML tag). A special of this general rule is that the value includes!importantThe user-style property of the modifier overrides the author style, and in a style sheet, if more than one style rule is applied on an element, the most detailed rule definitionthe style overrides the less detailed rule definition of the conflicting sample. The rule that specifies the element ID is the most detailed, followed by the rule that specifies the class attribute, the least detailed rule specifying only one tag name, specifying multiple nested tagsthe rule of the name is more detailed than the rule that specifies a tag name. 4. DHTML CSS4.1 Most critical: Positioning position only: Absoulte fixed relative can be positioned with top left and other attributes static positioned elements are not DHTML elements and cannot be positioned with top left. This is also the element default value. 4.2 z-index Stacking is only available for sibling elements (sibling elements in the same container, if two elements that are not siblings overlap, these two elements must be set in a windowof the Z-index is effective, of course, these two windows is a sibling element. ) 4.3 css properties in JavaScript Scripting Inline Styleselement. Style.css Property name = value (all strings) General CSS Property names the first word is lowercase, the first letter of each subsequent word is capitalized, and the remaining lowercase. ase.style.left= "30px";e.style.fontfamily= "Sans-serif"; Note: Units are required when setting modern properties in JavaScript 4.4 DHTML AnimationsEssence and principle: change one or more style attributes of an element periodically, using the Setinerval () and settimeout () functions. all DHTML animations require the use of these two functions. 5. Scripted CSS Classesscripting the value of the HTML class attribute by changing the ClassName property of any HTML element (dynamically setting a style class name) classname may contain a string of multiple classes, separated by a space between the class names. When set, you can control the new class by re-setting the stringor a class list. 6. Scripted style sheetsThe HTML Level 2 DOM standard defines a disabled attribute for <link> <script> elements. The disabled value of the element can be set in JavaScript, and if true, the style associated with the <link> and script element is closed .and will be ignored by the browser. style sheet objects and style sheet rulesThe Level 2 DOM defines a complete API for querying, traversing, and manipulating the style sheet itself. a style sheet that is applied to a document, stored in a stylesheets[] array of document objects. In this array, eachelement is a Cssstylesheet object. A Cssstylesheet object has a rule that contains a style sheetarray of cssrules[]. Cssrules[] Each object in the array is a Cssrule object that represents a CSS rule. There are two properties that can be ported to use Selectortext styleusing the styles and selectortext above, you can manipulate any style in a style sheet or add a new style. not two browsers may be slightly different the Cssstylesheet interface defines the Insertrule () method and the DeleteRule () method to add and remove rules. IE's forAddRule () and Removerule () functions.
JavaScript client JavaScript stylesheet Operations (one of the DOM API supply modules)