第三章 為一個(gè)HTML文檔應(yīng)用CSS
第三章 為一個(gè)HTML文檔應(yīng)用CSS
為HTML文檔應(yīng)用CSS，有三種方法可供選擇。下面對(duì)這三種方法進(jìn)行了概括。我們建議你對(duì)第三種方法（即外部樣式表）予以關(guān)注。
方法1：行內(nèi)樣式表（style屬性）
為HTML應(yīng)用CSS的一種方法是使用HTML屬性style。我們?cè)谏侠幕A(chǔ)之上，通過(guò)行內(nèi)樣式表將頁(yè)面背景設(shè)為紅色：
<html>
<head>
<title>例子</title>
</head>
<body style="background-color: #FF0000;">
<p>這個(gè)頁(yè)面是紅色的</p>
</body>
</html>
方法2：內(nèi)部樣式表（style元素）
為HTML應(yīng)用CSS的另一種方法是采用HTML元素style。比如像這樣：
<html>
<head>
<title>例子</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>這個(gè)頁(yè)面是紅色的</p>
</body>
</html>
方法3：外部樣式表（引用一個(gè)樣式表文件）CSS方法
我們推薦采用這種引用外部樣式表的方法。在本教程之后的例子中，我們將全部采用該方法。
外部樣式表就是一個(gè)擴(kuò)展名為css的文本文件。跟其他文件一樣，你可以把樣式表文件放在Web服務(wù)器上或者本地硬盤(pán)上。
例如，比方說(shuō)你的樣式表文件名為style.css，它通常被存放于名為style的目錄中。就像下面這樣：
現(xiàn)在的問(wèn)題是：如何在一個(gè)HTML文檔里引用一個(gè)外部樣式表文件（style.css）呢？答案是：在HTML文檔里創(chuàng)建一個(gè)指向外部樣式表文件的鏈接（link）即可，就像下面這樣：
<link rel="stylesheet" type="text/css" href="style/style.css" />
注意要在href屬性里給出樣式表文件的地址。
這行代碼必須被插入HTML代碼的頭部（header），即放在標(biāo)簽<head>和標(biāo)簽</head>之間。就像這樣：
<html>
<head>
<title>我的文檔</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
這個(gè)鏈接告訴瀏覽器：在顯示該HTML文件時(shí)，應(yīng)使用給出的CSS文件進(jìn)行布局。
這種方法的優(yōu)越之處在于：多個(gè)HTML文檔可以同時(shí)引用一個(gè)樣式表。換句話(huà)說(shuō)，可以用一個(gè)CSS文件來(lái)控制多個(gè)HTML文檔的布局。
這一方法可以令你省去許多工作。例如，假設(shè)你要修改某網(wǎng)站的所有網(wǎng)頁(yè)（比方說(shuō)有100個(gè)網(wǎng)頁(yè)）的'背景顏色，采用外部樣式表可以避免你手工一一修改這100個(gè)HTML文檔的工作。采用外部樣式表，這樣的修改只需幾秒鐘即可搞定——修改外部樣式表文件里的代碼即可。
讓我們來(lái)實(shí)踐剛剛所學(xué)到的知識(shí)。
自己試試看
打開(kāi)記事本（或其他文本編輯器），創(chuàng)建兩個(gè)文件——一個(gè)HTML文件，一個(gè)CSS文件——它們的內(nèi)容如下：
default.htm
<html>
<head>
<title>我的文檔</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>我的第一個(gè)樣式表</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
然后，把這兩個(gè)文件放在同一目錄下。記得在保存文件時(shí)使用正確的擴(kuò)展名（分別為“htm”和“css”）。
用瀏覽器打開(kāi)default.htm，你所看到的頁(yè)面應(yīng)該具有紅色背景。恭喜！你已經(jīng)完成了自己的第一個(gè)樣式表！
歡迎進(jìn)入下一課，在那里你會(huì)學(xué)到CSS屬性。
【第三章 為一個(gè)HTML文檔應(yīng)用CSS】相關(guān)文章：
1.Sun之html，css，php教程之開(kāi)卷聲明
3.網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)—html、css、javascript實(shí)例教程（鄭婭峰著）課