1、JavaScript程序設計教程軟件學院軟件學院 胡胡 沛沛 2016年年11月月第九章第九章 JavaScript控制頁面樣式控制頁面樣式 CSS基礎基礎9.1 樣式編程基礎樣式編程基礎9.2 樣式編程示例樣式編程示例9.3n9.1 CSS基礎基礎nCSS（Cascading Style Sheets）層疊樣式表。n它是W3C組織定義和維護的標準，其目的是為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）。n可以使用CSS來控制文件的顏色、字體、排版等顯示特性。nCSS將網頁的結構與呈現分隔開來，它帶來了許多好處：n（1）頁面代碼的可讀性增強；n（2）頁面代碼結構更加靈

2、活；n（3）作者和讀者都可以控制網頁的顯示樣式；n（4）代碼文件的組織結構簡化。n每一條樣式規則具有3個必備的要素：n（1）選擇器：它決定了哪些頁面元素受到樣式規則的影響。n（2）樣式屬性：如color，background；n（3）樣式值：如red，white。n樣式屬性和樣式值是成對出現的，它們指定了元素的呈現樣式。np color: red; background: white; n這條樣式規則所表達的含義就是：頁面中所有的元素，其背景色為白色，前景色為紅色。n9.1.1 選擇器選擇器n1常用選擇器常用選擇器n（1）類型選擇器）類型選擇器n類型選擇器用來尋找特定類型的元素，例如：np c

3、olor: red; background: white; /* 段落元素 */na font-family: Verdana; color: Aqua; /* 鏈接或錨 */n在類型選擇器中只需指定希望應用樣式的元素名稱。類型選擇器又叫做為元素選擇器或簡單選擇器。n（2）后代選擇器后代選擇器n后代選擇器可用來尋找特定元素或元素組的后代。后代選擇器由多個選擇器構成，之間用空格分隔。 ndiv pbackgroud:yellown其中的“div p就是關聯選擇器，它表示div中的標簽對的背景為黃色，而其它地方出現的標簽對則不受影響。n（3）class選擇器選擇器nclass屬性用來定義一組有共同

4、功能或格式的HTML元素。n要將一種HTML標簽所創建的各個網頁元素分成幾類，需要將這個HTML標簽的class屬性設置為不同的值。nparagraph1nparagraph2nparagraph3n（4）ID選擇器選擇器nID屬性用來定義某一個特定的HTML元素，一個網頁文件中只能有一個元素能使用某一ID屬性值，ID selector就是為樣式規則定義語句選擇具有某一ID屬性值的HTML元素。ntext herenn#yellowonecolor:yellownn（5）偽元素選擇器）偽元素選擇器n偽元素選擇器是指對同一個HTML元素的各種狀態和其所包括的部分內容的一種定義方式。n如：對于超鏈

5、接的正常狀態，訪問過的狀態，選中狀態、光標移動到超鏈接文本上的狀態；段落的首字母和首行，都可以使用偽元素選擇器來定義。nHTML元素:偽元素屬性:值nA:active屬性:值 選中超鏈接時的狀態nA:hover屬性:值 標移動到超鏈接上的狀態nA:link屬性:值 超鏈接時的正常狀態nA:visited屬性:值 訪問過超鏈接時的正常狀態n（6）組合選擇器）組合選擇器n為了減少樣式表的重復聲明，可以在一條樣式規則定義語句中組合若干個選擇器，每個選擇器之間用逗號隔開。nH1,H2,H3,TDcolor:red;n2 2高級選擇器高級選擇器n（1 1）通用選擇器）通用選擇器n通用選擇器可能是所有選擇

6、器中最強大而使用頻率卻是最低的。 n* margin:0 0 0 0; color: black;（2 2）子選擇器）子選擇器n子選擇器與后代選擇器比較類似，不同之處在于：后代選擇器選擇一個元素的所有后代，而子選擇器只選擇元素的直接后代，即子元素。nul li background-color : red; n（3）相鄰同胞選擇器）相鄰同胞選擇器n如果希望根據一個元素與另一個元素的相鄰關系對它應用樣式，則可以使用相鄰同胞選擇器。nh1 + p font-style : italic;n（4）屬性選擇器）屬性選擇器n屬性選擇器可以根據某個屬性是否存在或屬性的值來尋找元素，它能夠實現一些非常有趣的

7、效果。 ndivtitle border-bottom-style : dashed;ndivtitle:hover cusor:help;n9.1.2 繼承繼承n應用樣式的元素的后代會繼承樣式的某些屬性，比如顏色或字號。 n繼承是CSS中非常有用的概念，它使開發人員不必在元素的每個后代上添加相同的樣式。n恰當地使用繼承可以減少代碼中選擇器的數量和復雜性。n9.1.3 層疊與特殊性層疊與特殊性n在同一個頁面上應用多個樣式規則，那么就有可能有兩個或者更多的樣式規則應用與同一個元素，那么就需要一種機制來決定這些樣式規則的優先級。n這種機制在CSS中稱作層疊（Cascade），它為每個樣式分配了一個

8、重要度。作者的樣式表被認為是最重要的，其次是用戶的樣式表，最后是瀏覽器或用戶代理使用的默認樣式表。n可以通過!important來提高CSS規則的重要度，讓它 優 先 于 任 何 規 則 ， 甚 至 優 先 于 作 者 加上!important標志的規則。n層疊采用以下的重要度次序：n（1）標為!important的用戶樣式；n（2）標為!important的作者樣式；n（3）作者樣式；n（4）用戶樣式；n（5）瀏覽器/用戶代理應用的樣式。n選擇器的特殊性分為4個等級，由高到低分別為：n（1）行內樣式；n（2）ID選擇器；n（3）類、偽類和屬性選擇器；n（4）類型選擇器和偽元素選擇器。n如果兩

9、個規則的特殊性相同，那么后定義的規則優先。n9.2 樣式編程基礎樣式編程基礎n9.2.1 訪問樣式訪問樣式n1內聯樣式內聯樣式n直接設置HTML中style屬性。n需要在頁面加上如下內容nn使用style對象需要注意幾個問題:n（1）樣式設置必須符合CSS規范，否則該樣式會被忽略。n（2）如果樣式屬性名稱中不帶“-”號，例如color，直接使用style.color即可獲得該屬性值；如果樣式屬性名稱中帶有“-”號，例如font-size，對應的style對象屬性名稱為fontSize。（3）如果需要訪問float樣式屬性，不能使用style.float，因為float是JavaScript的保

10、留字，不能用作屬性名稱，應該使用style.cssFloat訪問該樣式屬性。（4）使用style對象獲取的屬性與元素最終顯示效果并不一定相同，因為除了內聯樣式聲明之外，還可以通過元素以及鏈接樣式表的方式改變元素的顯示效果。 在網頁中除了使用內聯方式設置CSS樣式之外，還可以通過其他方式（例如元素等）將所有CSS規則和內聯樣式綜合在一起得到元素的最終樣式。 在IE和DOM兼容瀏覽器中獲取最終樣式的方式是不同的：（1）IE：使用元素的currentStyle屬性即可獲取最終樣式；（2）DOM兼容瀏覽器：使用document.defaultView.getComputeStyle方法獲取最終樣式。n

11、2. 嵌入樣式表嵌入樣式表n /media 設置在哪些媒介上才起作用npFONT-SIZE:20pt;COLOR:blue;FONT-FAMILY:宋體nn3. 外部樣式表外部樣式表n將定制的樣式規則放到一個專門的外部文件當中。n擴展名一般為.css，通過HTML文件link標簽鏈接過來。nn一個樣式表可以用到多個HTML頁面中。n9.2.2 訪問樣式表n通過document.styleSheets可以訪問當前頁面中所有的樣式表，對樣式表中某些CSS規則的修改，可以改變所有應用了該CSS規則的元素，從而實現對元素樣式的“批量”修改。n在某個樣式表中，CSS規則的集合對象是rules（IE）或者cssRules（DOM）屬性。n9.3 樣式編程示例樣式編程示例n nCSS使HTML頁面的表現力得到大大增強，而JavaScript的動態編程特性與CSS相結合，使得Web開發人員可以自由地操縱頁面及其元素的顯示風格。小小 結結n使用JavaScript進行樣式編程可以在很大程度上彌補靜態CSS在進行頁面渲染時存在的局限性，改善Web應用的用戶體驗，提高其易用性。n樣式編程的技術可以分為對樣式和樣式表的訪問兩大部分，當然最常用的仍然是直接對樣式對象style的操作。n實驗實驗n1. 實驗名稱：頁面風格切換。實驗名稱：頁面風格切換。n2. 實驗目的：掌握用區域、