現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中，講究“內(nèi)容、樣式和動(dòng)作”相分離，其中的樣式部分即由CSS進(jìn)行控制。將網(wǎng)頁(yè)樣式分離到CSS中，可大大提高網(wǎng)頁(yè)的可維護(hù)性和可修改性。CSS是制作網(wǎng)頁(yè)的重要基礎(chǔ)，本章我們將介紹有關(guān)CSS的有關(guān)知識(shí)。隨著HTML5的發(fā)展，CSS也進(jìn)入了CSS3時(shí)代。2.1CSS的概念

CSS稱(chēng)為層疊樣式表，即CascadingStyleSheet的簡(jiǎn)稱(chēng)。用于指定HTML網(wǎng)頁(yè)中的一個(gè)元素或一組元素的顯示樣式，如顏色、位置和大小等。在HTML中引入CSS的意義在于實(shí)現(xiàn)內(nèi)容和樣式的分離，HTML文檔只包含當(dāng)前網(wǎng)頁(yè)要顯示的內(nèi)容，而CSS文檔則包含這些內(nèi)容的顯示樣式。獨(dú)立的CSS文檔可顯著提高工作效率，使得樣式的修改和擴(kuò)充變得容易?，F(xiàn)在主流的CSS版本是CSS3。CSS3是在CSS2的基礎(chǔ)上增加了一些新特性，如圓角、動(dòng)畫(huà)、動(dòng)態(tài)字體等，可以使我們的網(wǎng)頁(yè)更酷更炫，但瀏覽器對(duì)CSS3的支持并不完全相同，各瀏覽器之間存在一定的差異，這一點(diǎn)需要特別注意。那么CSS是何應(yīng)用到HTML網(wǎng)頁(yè)的呢？或者說(shuō)，HTML網(wǎng)頁(yè)是如何使用CSS的呢？下面我們來(lái)回答這個(gè)問(wèn)題。HTML應(yīng)用CSS有3種方式，分別是行內(nèi)樣式表、內(nèi)聯(lián)樣式表和外部樣式表。2.1.1行內(nèi)樣式表行內(nèi)樣式表也稱(chēng)為內(nèi)聯(lián)樣式表，就是通過(guò)HTML元素的style屬性指定元素樣式的方式，如下所示。<pstyle=”border:1pxsolidgreen;”>這是行內(nèi)樣式</p>樣式屬性也可以有多個(gè)，如下所示：<pstyle=”border:1pxsolidgreen;color:gray;”>這是行內(nèi)樣式</p>根據(jù)“內(nèi)容、樣式和動(dòng)作相分離”的原則，不推薦使用這種樣式表。2.1.2內(nèi)部樣式表

內(nèi)聯(lián)樣式表就是通過(guò)HTML的style標(biāo)記，在網(wǎng)頁(yè)中編寫(xiě)CSS樣式表的方式，格式如下：<styletype="text/css">

/*CSS的內(nèi)部樣式表*/</style>type屬性指定style標(biāo)記的MIME類(lèi)型，表示其中是CSS樣式表。同樣，根據(jù)“內(nèi)容、樣式和動(dòng)作相分離”的原則，也不推薦使用這種樣式。因?yàn)闃邮胶途W(wǎng)頁(yè)內(nèi)容仍然在同一文件中，如果修改網(wǎng)頁(yè)的樣式，仍然要修改每個(gè)網(wǎng)頁(yè)文件，這種做法是不可取的。但在本章的例子中，為了使讀者看清楚CSS樣式和它選擇元素的對(duì)應(yīng)關(guān)系，主要使用這種CSS樣式表，但要記住，這樣做是不符合設(shè)計(jì)原則的。2.1.3外部樣式表外部樣式表是指通過(guò)HTML的link標(biāo)記，指定網(wǎng)頁(yè)要使用的CSS文件，將文件中的樣式應(yīng)用于當(dāng)前網(wǎng)頁(yè)的方式，格式如下：<linkrel="stylesheet"type="text/css"href="mystyle.css"/>或者<styletype="text/css"><!--@importurl(mystyle.css);--></style>其中，rel屬性規(guī)定當(dāng)前文與被連接文檔（即css文件）之間的關(guān)系；stylesheet表示被連接文檔是當(dāng)前網(wǎng)頁(yè)的樣式表；需要說(shuō)明的是目前只有stylesheet這個(gè)值得到了所有瀏覽器的支持；type規(guī)定被連接文檔的MIME類(lèi)型；href屬性指定被連接文檔的位置。在實(shí)際應(yīng)用中必須注意被連接文檔的路徑要正確，否則無(wú)法應(yīng)用樣式。第二種方式是通過(guò)@import指令引入外部的CSS文件，功能與第一種相同。還有需要說(shuō)明的就是，HTML5不支持charset屬性、rev屬性和target屬性，這些屬性在實(shí)際應(yīng)用中最好不要寫(xiě)入link標(biāo)記。這么多類(lèi)型的樣式表，如果共同出現(xiàn)在同一網(wǎng)頁(yè)中，到底應(yīng)該采用哪一個(gè)呢？這就是CSS樣式優(yōu)先級(jí)問(wèn)題，我們將在2.3節(jié)討論這一話(huà)題。2.2CSS單位和顏色

2.2.1CSS單位

為了描述網(wǎng)頁(yè)元素的顏色、大小和位置，離不開(kāi)單位和顏色。CSS主要單位如表2-1所示。表2-1CSS主要單位單位意義單位意義%百分比ex一個(gè)ex是一個(gè)字體的x-height，x-height通常是字體尺寸的一半。in英寸pt磅(1pt=1/72英寸)cm厘米pc12點(diǎn)活字(1pc等于12點(diǎn))為單位mm毫米px像素(計(jì)算機(jī)屏幕上的一個(gè)點(diǎn))em以當(dāng)前字體大小為單位。

以上單位需要說(shuō)明的是：◆%是相對(duì)于父容器來(lái)說(shuō)的，占父容器的百分之幾。◆em以當(dāng)前字體的大小為單位，不是一個(gè)固定的值。如果某個(gè)元素的大小是12pt的話(huà)，那1em就是12pt，2em就是24pt?！鬳x類(lèi)似于em，和當(dāng)前字體大小有關(guān)，約為當(dāng)前字體大小的一半，也不是一個(gè)固定的值?！魀x以一個(gè)像素大小為單位，以px為單位的話(huà)，元素的大小會(huì)隨著分辨率的增大而減小，也就是說(shuō)，px的大小與設(shè)備的分辨率是相關(guān)的。其他的單位意義比較明確，不再贅述。2.2.2顏色

在CSS中可以用以下幾種方式描述顏色：十六進(jìn)制色。RGB顏色。RGBA顏色。HSL顏色。HSLA顏色。預(yù)定義/跨瀏覽器顏色名。這里只介紹前面的三種顏色表示方法。其實(shí)十六進(jìn)制顏色就是RGB顏色，只不過(guò)表示方法不同。RGB顏色表示法如表2-2所示。表2-2CSS的RGB顏色表示法顏色意義顏色名用英語(yǔ)單詞指定顏色。CSS定義了147種顏色名字。rgb(x,x,x)r：紅色；g綠色；b藍(lán)色。每個(gè)x表示0~255之間的一個(gè)數(shù)值。rgb(x%,x%,x%)同上。只不過(guò)這里用3個(gè)百分?jǐn)?shù)表示紅綠藍(lán)三基色的比例。#rrggbb十六進(jìn)制數(shù)(比如#ff0000)，前兩位表示紅色，中間兩位表示綠色，最后兩位表示藍(lán)色。如果