1、網(wǎng)站規(guī)劃與網(wǎng)頁設計,理工部 楊彩霖,5.1 CSS的特點和用途 5.2 CSS與HTML文檔的結(jié)合方法 5.3 樣式表語法 5.4 多重CSS的層疊 5.5 CSS的屬性單位 5.6 CSS在網(wǎng)頁中的應用,第5章 CSS樣式的應用,CSS（Cascading Style Sheets）中文翻譯為層疊樣式表單，簡稱樣式表，是用于（增強）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。樣式就是格式，在網(wǎng)頁中，文字的大小、色彩及圖片位置等，都是設置顯示內(nèi)容的樣式。層疊是指在HTML文檔中引用多個定義樣式的樣式文件（CSS文件）時，若多個樣式文件間所定義的樣式發(fā)生沖突，將依據(jù)層次順序處理。

2、 它的主要用途如下所述。 使頁面的字體變得更漂亮，更容易編排，使頁面效果真正達到賞心悅目。 用戶可以輕松地控制頁面的整體風格和布局。 如果站點上所有的頁面都使用同一個CSS文件進行控制，那么可以對許多網(wǎng)頁的風格格式同時進行更新，不用再一頁一頁地更新了。只要修改這個CSS文件中相應的代碼，整個站點的所有頁面都會隨之發(fā)生變動。,5.1 CSS的特點和用途,CSS控制網(wǎng)頁內(nèi)容顯示格式的方式是通過許多定義好的樣式屬性（如字號、段落控制等）來實現(xiàn)的，并將多個樣式屬性定義為一組可供調(diào)用的選擇符（selector）。其實，選擇符就是某一個樣式的名稱。當HTML文檔中某個元素要使用該樣式時，必須使用該名稱選擇

3、樣式。在這里使用選擇符這個名詞的原因，是為了與W3C標準統(tǒng)一，其實可以直接把它當成樣式名稱，這樣會比較好理解。 要想在瀏覽器中顯示出樣式表的效果，就要讓瀏覽器識別并調(diào)用。當瀏覽器讀取樣式表時，要依照文本格式來讀。這里介紹4種在頁面中插入樣式表的方法：內(nèi)部樣式、行內(nèi)樣式、鏈入外部樣式和導入外部樣式。,5.2 CSS與HTML文檔的結(jié)合方法,5.2.1 內(nèi)部樣式 內(nèi)部樣式（embedded styles）是把樣式表放到頁面的區(qū)內(nèi)，這些定義的樣式就可以應用到頁面中了。樣式表是用標記插入的。定義的樣式可以在整個HTML文檔中調(diào)用?？梢栽贖TML文檔的和標記之間插入一個標記對，在其中定義樣式。其格式為：

4、 ,5.2.2 行內(nèi)樣式 行內(nèi)樣式（inline styles）也稱內(nèi)嵌樣式，是指在HTML標記中插入style屬性，再定義要顯示的樣式，而style屬性的內(nèi)容就是CSS的屬性和值。用這種方法，可以很簡單地對某個標記單獨定義樣式。它的特點是“定義某一個標記的樣式風格”，即只對所定義的標記起作用，并非對整個頁面起作用。有時候這種方式非常有效，其格式為： style屬性可以應用于除basefont，param和script之外的任意標記（包括本身）。,5.2.3 鏈入外部樣式 鏈入外部樣式（linked styles）就是當瀏覽器讀取到HTML文檔的樣式表鏈接標記時，將向所鏈接的外部樣式表索取樣式

5、。先將樣式表保存為一個樣式表文件（.css），然后在網(wǎng)頁中用標記鏈接這個樣式表文件，這個標記必須放到頁面的區(qū)內(nèi)，其格式為： rel=stylesheet屬性定義在網(wǎng)頁中使用外部的樣式表，type=text/css屬性定義文件的類型為樣式表文本，href屬性用于定義.css文件的URL。,5.2.4 導入外部樣式 導入外部樣式（imported styles）就是當瀏覽器讀取HTML文件時，復制一份樣式表到這個HTML文件中，即在內(nèi)部樣式表的標記對里導入一個外部樣式表文件。其格式為： 導入外部樣式表輸入方式上更有優(yōu)勢，實質(zhì)上它相當于內(nèi)部樣式。,5.3.1 用類（class）選擇符定義樣式 用類選

6、擇符能夠把相同的標記分類定義為不同的樣式。例如，希望同一種標記（如）在不同的地方使用不同的樣式（一個段落向右對齊，一個段落居中），就可以先定義兩個類，在應用時只要在標記中指定它屬于哪一個類，就可以使用該類的樣式了。其格式為： ,5.3 樣式表語法 class與id類選擇符,5.3.1 用類（class）選擇符定義樣式 還有一種用法，是在選擇符中省略HTML“標記”名，這樣可以把幾個不同的元素定義成相同的樣式。其格式為： 有無“標記”的區(qū)別在于，若在定義類選擇符前加上HTML標記，其適用范圍將只限于該標記所包含的內(nèi)容。這種省略HTML標記的類選擇符是最常用的定義方法，使用這種方法，可以很方便地在

7、任意標記上套用預先定義好的類樣式。,5.3 class與id類選擇符,5.3.2 用id選擇符定義樣式 id選擇符用來對某個單一元素定義單獨的樣式。定義id選擇符時要在id名稱前加上一個“#”號。與類選擇符相同，定義id選擇符也有兩種方法。 第一種方法是用id選擇符定義樣式，格式為： ,5.3 class與id類選擇符,5.3.2 用id選擇符定義樣式 還有一種方法，是在選擇符中加上HTML“標記”名，其格式為： “標記”是HTML的標記名稱。若在id選擇符前加上HTML的標記，其適用范圍將只限于該標記所包含的內(nèi)容。id選擇符局限性很大，只能單獨定義某個元素的樣式，一般只在特殊情況下使用。,5

8、.3 class與id類選擇符,1 使用標記 標記用來定義網(wǎng)頁上的一個特定區(qū)域，在該區(qū)域的范圍內(nèi)可包含文字、圖片、表格、窗體及其他標記等。在標記內(nèi)的所有內(nèi)容都將調(diào)用此標記所定義的樣式，且區(qū)域與區(qū)域之間是彼此獨立的。在定義區(qū)域間使用不同樣式時，可使用標記。標記的格式為： . 或 . 2 使用標記 標記主要用來定義網(wǎng)頁上的區(qū)域，通常用于比較大的范圍；而標記也可以用來定義區(qū)域，但一般用于網(wǎng)頁中某一個小問題段落，其格式為： . 或 .,5.3 樣式表語法 與標記,前面介紹了在網(wǎng)頁中插入樣式表的4種方法，那么，當這4種方法同時出現(xiàn)時，瀏覽器會以哪種方法定義的規(guī)則為準呢？這就涉及了樣式表的優(yōu)先級別和疊加。

9、一般原則是，最接近目標的樣式定義優(yōu)先級最高。高優(yōu)先級樣式將繼承低優(yōu)先級樣式的未重疊定義，但覆蓋重疊的定義。根據(jù)規(guī)定，樣式表的優(yōu)先級別從高到低為：行內(nèi)樣式、內(nèi)部樣式、鏈接樣式、導入樣式和默認瀏覽器樣式。瀏覽器將按照上述順序執(zhí)行樣式表的規(guī)則。 樣式表的層疊性就是繼承性，樣式表的繼承規(guī)則是：外部的元素樣式會保留下來，由這個元素所包含的其他元素繼承；所有在元素中嵌套的元素都會繼承外層元素指定的屬性值，有時會把很多層嵌套的樣式疊加在一起，除非另外更改；遇到?jīng)_突的地方會以最后定義的為準。,5.4 多重CSS的層疊,5.5.1 長度、百分比單位 進行文字、排版、邊界等設置時，常常會在屬性值后加上長度單位或者

10、百分比單位。 1長度單位 長度單位有相對長度單位和絕對長度單位兩種類型。相對長度單位是指以該屬性前一個屬性的單位值為基礎，來完成目前的設置。絕對長度單位，將不會隨著顯示設備的不同而改變。換句話說，屬性值使用絕對長度單位時，不論在哪種設備上顯示都是一樣的，例如，屏幕上的1cm與打印機上的1cm是一樣長的。 由于相對長度單位確定的是一個相對于另一個長度屬性的長度，因而它能更好地適應不同的媒體，所以它是首選的。,5.5 CSS的屬性單位,5.5.1 長度、百分比單位 2百分比單位 百分比單位也是一種常用的相對類型。百分比值總是相對于另一個值來說的，該值可以是長度單位或其他單位。每一個可以使用百分比值

11、單位指定的屬性，同時也自定義了這個百分比值的參照值。在大多數(shù)情況下，這個參照值是該元素本身的字體尺寸。并非所有屬性都支持百分比單位。 一個百分比值由可選的正號“+”或負號“”，接著一個數(shù)字，后跟百分號“%”組成。如果百分比值是正的，正號可以不寫。正負號、數(shù)字與百分號之間不能有空格。例如， p line-height: 150% /* 本段文字的高度為標準行高的1.5倍 */ hr width: 80% /* 線段長度是相對于瀏覽器窗口的80% */,5.5 CSS的屬性單位,5.5.2 色彩單位 1用十六進制數(shù)表示色彩值 在HTML中，要使用RGB概念指定色彩時，前面是一個“#”號，再加上6個

12、十六進制的數(shù)字表示，表示方法為：#RRGGBB。其中，前兩個數(shù)字代表紅光強度（Red），中間兩個數(shù)字代表綠光強度（Green），后兩個數(shù)字代表藍光強度（Blue）。以上三個參數(shù)的取值范圍為：00ff，參數(shù)必須是兩位數(shù)。對于只有一位的參數(shù)，應在前面補0。這種方法共可表示256256256種色彩，即16M種色彩。而紅色、綠色、藍色、黑色、白色對應的十六進制數(shù)分別為：#ff0000、#00ff00、#0000ff、#000000、#ffffff。例如， div color: #ff0000 如果每個參數(shù)各自在兩位上的數(shù)字都相同，也可縮寫為#RGB的方式。例如：#ff8800可以縮寫為#f80。,5.

13、5 CSS的屬性單位,5.5.2 色彩單位 2用rgb函數(shù)表示色彩值 在CSS中，可以用rgb函數(shù)設置出所要的色彩，語法格式為：rgb(R,G,B)。其中，R為紅色值，G為綠色值，B為藍色值。三個參數(shù)可取正整數(shù)值或百分數(shù)值，正整數(shù)值的取值范圍為0255，百分數(shù)值的取值范圍為色彩強度的百分比0.0%100.0%。例如， div color: rgb(132,20,180) div color: rgb(12%,200,50%) 3用色彩名稱表示色彩值 在CSS中也提供了與HTML一樣的用色彩英文名稱表示色彩的方式。CSS只提供了16種色彩名稱。例如， div color: red ,5.6 CSS的屬性單位,1用CSS創(chuàng)建一個布局居中的頁面，如圖5-7所示。 2將段落p分成3部分，每一部分應用不同的樣式表。請把下面代碼補全，編寫完整的HTML文件。CSS可設置為外部或內(nèi)部樣式表文件。 樣式規(guī)則為： p.first color: green p.second color: purple p.third color: gray p b color: red /* 之內(nèi)加粗顯示的文字以紅色顯示 */ p font-size: 10pt b font-size: 1.5 em /* 所有包含在