武林網(wǎng)(www.survivalescaperooms.com)文章簡介：初學(xué)CSS的基礎(chǔ)教程:在網(wǎng)頁中使用CSS.
教程說明：
本教程系個人抽工作之余所作，按照我個人的想法我是想將一些基本的東西以較為輕松的語言描述出來，做成一個系列教程（這需要時間，我會努力抽空更新的），爭取讓每一個看這個東東的人都能有所收獲，但是因作者本人水平有限，不妥當(dāng)之處敬請留言批評指正。
------------------------------------------------------分割線----------------------------------------------------------
1、正式開始學(xué)習(xí)之前的幾句啰嗦話：
2、本小結(jié)您將學(xué)習(xí)的內(nèi)容：
-------------------------------------------------華麗的分割線------------------------------------------------------
第一個問題：CSS到底是什么東東，有何作用？
在解決這個問題之前，我們先來看看網(wǎng)站中一個頁面的基本組成：通常，一個頁面（前臺）由一下三個部分組成：結(jié)構(gòu)，表現(xiàn)和行為。
注：
注：上面的代碼如果看不懂也沒關(guān)系，后面我們會深入的講解。
---------------------------------------------更加華麗的分割線--------------------------------------------------
第二個問題：在網(wǎng)頁制作中運用CSS技術(shù)的幾種方法：
•內(nèi)嵌樣式
•內(nèi)部樣式
•外部樣式
Inline Style是寫在標(biāo)簽里面的，內(nèi)嵌樣式只對所在的標(biāo)簽有效。
看如下例子：
<html>
<head><title>內(nèi)嵌式樣式(Inline Style)</title></head>
<body>
<P style="font-size:20pt; color:red">這個內(nèi)嵌樣式(Inline Style)定義段落
里面的文字是20pt字體，字體顏色是紅色。</p>
<P>這段文字沒有使用內(nèi)嵌樣式。</p>
</body>
</html>
本例在瀏覽器中顯示效果如下：
如上圖，我們可以看到，這種方式使用CSS是將style作為HTML標(biāo)簽的一個屬性加入的，也就是說，它還是沒有真正的把結(jié)構(gòu)和表現(xiàn)分開，所以，這種方法用的比較少。下面我們來看第二種方法：
內(nèi)部樣式是寫在網(wǎng)頁的<head></head>標(biāo)簽對中的，內(nèi)部樣式只對當(dāng)前運用該樣式的網(wǎng)頁有效，在網(wǎng)頁中使用內(nèi)部樣式的基本語法如下：
注：上圖綠色部分就是CSS代碼，注意它是如何加入到頁面中的，至于具體這些CSS代碼如何書寫，這個是我們后面要學(xué)習(xí)的內(nèi)容，現(xiàn)在可以先不管它。下面我們來看第三種方法：
如果很多網(wǎng)頁需要用到同樣的樣式（回想我們以前在DREAMWEAVER中學(xué)習(xí)的模板），用什么方法呢？我們可以將樣式寫在一個以.css為擴(kuò)展名的文件中，然后在每個需要用到這些樣式的網(wǎng)頁中引用該文件就可以了，這種方法就是外部樣式表方法。那么，我們?nèi)绾尾拍茉谝粋€頁面中引用事先準(zhǔn)備好的樣式表文件呢？通常我們有2種方法，一種稱為“鏈接”，另一種稱為“導(dǎo)入”，這里我們先介紹“鏈接”的方法，另一種在后面的學(xué)習(xí)中再去理會。在一個頁面中“鏈接”一個樣式表文件的語法格式如下：
注意：上圖中的URL是指的被引用的CSS文件的URL，而且LINK語句還有別的屬性，這里暫時先不加以說明，后面我們學(xué)習(xí)到的時候再詳細(xì)討論。
補充說明：被引用的CSS樣式文件中應(yīng)該只有基本的CSS語句，不要其他任何東東。例如我們要實現(xiàn)和第一個例子一樣的效果，我們可以新建一個記事本文件，輸入如下代碼：p{font-size:20pt;color:red}然后將這個文件的擴(kuò)展名改為"css"，這樣就做好這個樣式文件了。至于這條語句究竟是什么意思，相信聰明的你已經(jīng)猜到了，對的，沒錯，它的意思是將所有的P標(biāo)簽（段落）中的文本外觀變?yōu)樽痔枺?0PT，顏色：紅色，當(dāng)然了，如果實在不明白也沒關(guān)系，后面我們會一一介紹。
---------------------------------------------本小節(jié)最后一條分割線--------------------------------------------------
3種樣式表使用方法對比：
使用外部(Extenal)樣式表，相對于內(nèi)嵌(Inline)和內(nèi)部式(Internal)的，有以下優(yōu)點 ：
a.樣式代碼可以復(fù)用。一個外部CSS文件，可以被很多網(wǎng)頁共用。
b.便于修改。如果要修改樣式，只需要修改CSS文件，而不需要修改每個網(wǎng)頁 。
c.提高網(wǎng)頁顯示的速度。如果樣式寫在網(wǎng)頁里 ，會降低網(wǎng)頁顯示的速度，如果網(wǎng)頁引用一個CSS文件，這個CSS文件多半已經(jīng)在緩存區(qū)(其它網(wǎng)頁早已經(jīng)引用過它)，網(wǎng)頁顯示的速度就比較快。
---------------------------------------------SORRY，還有一條分割線，哇哈哈哈-------------------------------
課外練習(xí)：
將上面介紹的幾種方法逐一實現(xiàn)，理解每種方法的原理，腦袋里面多問自己幾個問題，想想每種方法各自有什么優(yōu)缺點。
新聞熱點
疑難解答
