今天繼續(xù)CSS，上一次我們講了通過在HTML文件中嵌入CSS代碼的方式控制網(wǎng)頁的外觀。這一次我們利用鏈接獨立的CSS文件的形式控制網(wǎng)頁的外觀。
與將CSS代碼相比，利用獨立的CSS文件有幾點好處：
1.有利于保持代碼的整潔。當(dāng)網(wǎng)頁需要大量CSS代碼時，存放于單獨的文件不會影響HTML文件的可讀性，并且做到了表現(xiàn)和結(jié)構(gòu)的分離（HTML負(fù)責(zé)控制網(wǎng)頁的結(jié)構(gòu)，CSS控制網(wǎng)頁的外觀表現(xiàn)）。
2.減少了網(wǎng)頁中的重復(fù)代碼。如果多個網(wǎng)頁采用相同的外觀風(fēng)格，同樣的代碼不必重復(fù)多次，鏈接到同一個（一組）CSS文件即可。
3.有利于保持網(wǎng)站風(fēng)格統(tǒng)一。同一個網(wǎng)站中的網(wǎng)頁往往都采用相同的外觀風(fēng)格（這樣可以保持外觀的整體統(tǒng)一，不會顯得格格不入），所有采用同一個（一組）CSS文件即可。若需要改變網(wǎng)站外觀，直接更改CSS文件即可，即可繼續(xù)保持網(wǎng)站風(fēng)格統(tǒng)一，又提高了工作效率，并能避免遺漏。
下面我們對上一次的代碼做一些修改。首先，建立名為lounge.css的文件，保存到lounge.html同一個文件夾中，將上一講中<style>元素中的代碼復(fù)制過來（不包括<style>標(biāo)記本身，他是HTML中的一個標(biāo)記，不是CSS代碼）。
h1,h2 { font-family: sans-serif; color: gray;}h1 { border-bottom: 1px solid black;}p { color: maroon;}lounge.css代碼然后對lounge.html的代碼做相應(yīng)修改，將<style>元素及其內(nèi)容刪除，并添加一個<link>元素，代碼如下：
<head> <meta charset="utf-8"> <title>Head First Lounge</title> <link type="text/css" rel="stylesheet" href="lounge.css"> <!-- 刪除了<style>元素并增加了<link>元素 --></head>lounge.html的head部分代碼（其余部分沒有改變） 我們可以用瀏覽器看一下，lounge網(wǎng)頁的風(fēng)格和上一次一樣，兩種方法達到了相同的效果。
我們來講一下<link>元素，這個元素用來連接HTML文件以外的信息。首先是type屬性，他說明了要鏈接的文件的類型（“text/css”表示為文本文件），這個屬性到了HTML5以后變成可一個可選屬性，可寫可不寫。rel屬性說明了鏈接的文件與HTML之間的關(guān)系，“stylesheet”說明是一個網(wǎng)頁的樣式表。href指定了要鏈接的具體文件。
現(xiàn)在我們在elixir.html和directions.html文件中分別加入一個<link>元素，位置與lounge.html相同，具體屬性設(shè)置如下：
<link type="text/css" rel="stylesheet" href="../lounge.css"> 僅有href屬性的值不同，“../lounge.css”表明lounge.css文件在elixir.html和directions.html文件的父文件夾中（我們沿用了上幾講中的文件組織結(jié)構(gòu)）。
好，我們看一下網(wǎng)站的整體效果，是不是保持了一致。一級二級標(biāo)題字體為sans-serif、顏色為灰色，一級標(biāo)題帶有下劃線（通過設(shè)置下邊框?qū)崿F(xiàn)），內(nèi)容的字體為棕色。
新聞熱點
疑難解答
