第1課：CSS是什么？
也許你曾聽說過CSS，但并不真正清楚CSS到底是什么。在這一課，你將學(xué)到更多CSS的知識，并了解CSS可以做些什么。CSS是Cascading Style Sheets（級聯(lián)樣式表）的縮寫。
可以用CSS做什么？
CSS是一種樣式表語言，用于為HTML文檔定義布局。例如，CSS涉及字體、顏色、邊距、高度、寬度、背景圖像、高級定位等方面。拭目以待吧！
HTML可以用于為網(wǎng)站添加布局效果，但有可能被誤用。而CSS則提供了更多選擇，而且更為精確、完善?，F(xiàn)在所有瀏覽器都支持CSS。
經(jīng)過下面若干課的學(xué)習(xí)之后，你將能夠制作自己的CSS樣式表，為自己的網(wǎng)站增添花樣了。
CSS跟HTML的區(qū)別在哪里？
HTML用于結(jié)構(gòu)化內(nèi)容；CSS用于格式化結(jié)構(gòu)化的內(nèi)容。
嗯，這聽上去有點(diǎn)技術(shù)性并令人疑惑。不過沒關(guān)系，我們繼續(xù)學(xué)習(xí)。過會兒你就明白了。
在Tim Berners-Lee發(fā)明萬維網(wǎng)（World Wide Web）的那個年代，HTML語言是唯一用于給文本添加結(jié)構(gòu)的語言。作者可以通過聲明“這是一個標(biāo)題”（利用h1標(biāo)簽）或“這是一個段落”（利用p標(biāo)簽）的方式來標(biāo)記文本。
隨著Web逐漸流行起來，網(wǎng)頁設(shè)計者們開始尋求為網(wǎng)頁增添布局的可能性。為此，當(dāng)時的瀏覽器廠商們（網(wǎng)景公司和微軟公司）發(fā)明了一些新的HTML標(biāo)簽（比如<font>等），以引入了新的布局——而非新的結(jié)構(gòu)。
這也導(dǎo)致了原本用于進(jìn)行文本的結(jié)構(gòu)化的標(biāo)簽（比如<table>等）越來越多地被誤用于進(jìn)行頁面的布局。許多新的布局標(biāo)簽（比如<blink>）只有一種瀏覽器支持。“您需要使用某某瀏覽器來瀏覽本頁面”成為當(dāng)時常見于許多網(wǎng)站的聲明。
CSS的發(fā)明正是為了改善這一狀況，它為Web設(shè)計師們提供了完善的、所有瀏覽器都支持的布局能力。而且，文檔的表現(xiàn)樣式與內(nèi)容的分離，也令網(wǎng)站維護(hù)容易了許多。
采用CSS有哪些好處？
CSS是Web設(shè)計界的一次革命。CSS的具體優(yōu)點(diǎn)包括：
•通過單個樣式表控制多個文檔的布局；
•更精確的布局控制；
•為不同的媒體類型（屏幕、打印等）采取不同的布局；
•無數(shù)高級、先進(jìn)的技巧。
第2課：CSS的工作原理
在這一課，你將學(xué)習(xí)如何制作自己的第一個樣式表。你將了解基本的CSS模型，以及在HTML文檔里使用CSS所必需的代碼。
級聯(lián)樣式表（CSS）里用到的許多CSS屬性都與HTML屬性相似，所以，假如你熟悉采用HTML進(jìn)行布局的話，那么這里的許多代碼你都不會感到陌生。
基本的CSS語法
比方說，我們要用紅色作為網(wǎng)頁的背景色：
用HTML的話，我們可以這樣：
<body bgcolor="#FF0000">
用CSS的話，我們可以這樣獲得同樣的效果：
body {background-color: #FF0000;}
你會注意到，HTML和CSS的代碼頗有幾分相似。上例也向你展示了基本的CSS模型：
但是把CSS代碼放在哪里呢？這正是我們下面要講的。
為一個HTML文檔應(yīng)用CSS
為HTML文檔應(yīng)用CSS，有三種方法可供選擇。下面對這三種方法進(jìn)行了概括。
方法1：行內(nèi)樣式表（style屬性）
為HTML應(yīng)用CSS的一種方法是使用HTML屬性style。我們在上例的基礎(chǔ)之上，通過行內(nèi)樣式表將頁面背景設(shè)為紅色：
<html>
<head>
<title>例子<title>
</head>
<body style="background-color: #FF0000;">
<p>這個頁面是紅色的</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>這個頁面是紅色的</p>
</body>
</html>
方法3：外部樣式表（引用一個樣式表文件）
我們推薦采用這種引用外部樣式表的方法。在本教程之后的例子中，我們將全部采用該方法。
外部樣式表就是一個擴(kuò)展名為css的文本文件。跟其他文件一樣，你可以把樣式表文件放在Web服務(wù)器上或者本地硬盤上。
例如，比方說你的樣式表文件名為style.css，它通常被存放于名為style的目錄中。就像下面這樣：
現(xiàn)在的問題是：如何在一個HTML文檔里引用一個外部樣式表文件（style.css）呢？答案是：在HTML文檔里創(chuàng)建一個指向外部樣式表文件的鏈接（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>
...
這個鏈接告訴瀏覽器：在顯示該HTML文件時，應(yīng)使用給出的CSS文件進(jìn)行布局。這種方法的優(yōu)越之處在于：多個HTML文檔可以同時引用一個樣式表。換句話說，可以用一個CSS文件來控制多個HTML文檔的布局。
這一方法可以令你省去許多工作。例如，假設(shè)你要修改某網(wǎng)站的所有網(wǎng)頁（比方說有100個網(wǎng)頁）的背景顏色，采用外部樣式表可以避免你手工一一修改這100個HTML文檔的工作。采用外部樣式表，這樣的修改只需幾秒鐘即可搞定——修改外部樣式表文件里的代碼即可。
例子:
打開記事本（或其他文本編輯器），創(chuàng)建兩個文件——一個HTML文件，一個CSS文件——它們的內(nèi)容如下：
default.htm
<html>
<head>
<title>我的文檔</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>我的第一個樣式表</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
然后，把這兩個文件放在同一目錄下。記得在保存文件時使用正確的擴(kuò)展名（分別為“htm”和“css”）。
用瀏覽器打開default.htm，你所看到的頁面應(yīng)該具有紅色背景。恭喜！你已經(jīng)完成
