DOM启蒙：CSS样式表与CSS规则

1.CSS样式表概览

     （1） 添加样式表到HTML文档的方式：

• 使用HTMLLinkElement节点（<link href='stylesheet.css' rel='stylesheet' type='text/css'>）引入外部样式表
• 使用HTMLStyleElement（<style></style>）来定义内联样式表

     （2）一有样式表添加到HTML文档中，它即表示为CSSStyleSheet对象。

     （3）样式表里每条CSS规则都表示一个CSSStyleRule对象

     （4）选取引入样式表的元素与访问表示样式表本身的实际对象（CSSStyleSheet）是不同的 

 

2.访问DOM中所有样式表

• document.styleSheets：

           提供了一个包含HTML文档中所有样式表对象列表的访问方式，包括显式链接和内嵌。

• element.sheet:

           访问HTML单个样式表。

           先选取DOM中的元素，再使用.sheet属性取得CSSStyleSheet对象的访问。

 

3.CSSStyleSheet属性与方法

      属性：

• href
• media
• title
• type
• cssRules：获取样式表内的CSS规则列表
• disabled：使样式表失效/生效
• ownerNode
• ownerRule
• parentStyleSheet

      方法：（CSS规则从0开始按数字顺序索引）

• deleteRule（index）：删除样式表中的CSS规则
• insertRule（'rule',index）：插入样式表中的CSS规则

    

4.创建新的内联CSS样式表

• 创建一个<style>节点
• 使用innerHTML添加CSS规则到此节点
• 然后附加这个<style>节点到HTML文档中

5.添加外部样式表到HTML文档

• 创建一个<link>元素节点
• 给它合适的值
• 然后附加该<link>元素节点到DOM

6.CSSStyleRule概览

     CSSStyleRule对象代表了样式表中所含的每条CSS规则。基本上，CSSStyleRule即附加到某个选择器的CSS属性与值的接口。

 

7.CSSStyleRule属性与方法

      属性：

• parentStyleSheet
• parentRule
• type
• style：修改CSSStyleRule的值
• cssText：查看CSSStyleRule的值