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的值