CSS最佳入門教程

很難想象，如果在一個頁面裡需要頻繁地更替字型的顏色大小，最終產生的HTML代碼的長度一定臃腫不堪。說實話，CSS就是為了簡化這樣的工作誕生的，當然其功能決非這麼簡單。

1、 主題：什麼是CSS?它的能做些什麼?
CSS就是一種叫做樣式表(stylesheet)的技術。也有的人稱之為層疊樣式表(Cascading Stylesheet)。
在首頁製作時採用CSS技術，可以有效地對頁面的布局、字型、顏色、背景和其它效果實現更加精確的控制。
只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。 它的作用可以達到：
(1)在幾乎所有的瀏覽器上都可以使用。
(2)以前一些非得通過圖片轉換實現的功能，現在只要用CSS就可以輕鬆實現，從而更快地下載頁面。
(3)使頁面的字型變得更漂亮，更容易編排，使頁面真正賞心悅目。
(4)你可以輕鬆地控制頁面的布局 。
(5)你可以將許多網頁的風格格式同時更新，不用再一頁一頁地更新了。你可以將網站上所有的網頁風格都使用一個CSS檔案進行控制，只要修改這個CSS檔案中相應的行，那麼整個網站的所有頁面都會隨之發生變動。 想一想，沒有使用CSS前我們是如何控制字型的顏色和大小以及所使用的字型的?我們一般使用HTML標籤來實現，例如實現右側一個簡單的"HELLO"，它的代碼是：
〈b〉〈font face="Arial" size="3" color="#FFFF66"〉HELLO〈/font〉〈/b〉
很難想象，如果在一個頁面裡需要頻繁地更替字型的顏色大小，最終產生的HTML代碼的長度一定臃腫不堪。
說實話，CSS就是為了簡化這樣的工作誕生的，當然其功能決非這麼簡單。
CSS是通過對頁面結構的風格控制的思想，控制整個頁面的風格的。
式樣單放在頁面中，通過瀏覽器的解釋執行，是完全的文本，任何懂得HTML的人都可以掌握，非常的容易。生殖對一些非常老的瀏覽器，頁不會產生頁面混亂的現象。
2、 主題：式樣單的例子
下面是一個式樣單的例子：
===================================================================================
你好!朋友，歡迎光臨阿里西西。
Hello，everybody，welcome in alixixi.com !
=================================================================================== 產生以上效果的HTML原始碼是這樣的：
以下是引用片段：
〈html〉
〈head〉
〈style type= "text/css"〉
〈!--
h2 { font-family: "宋體"; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC}
h1 { font-family: "Arial"; font-size: 12pt; color: #66FF66}
--〉
〈/style〉
〈/head〉
〈body〉
〈h2〉你好!朋友，歡迎光臨阿里西西。〈/h2〉
〈h1〉Hello，everybody，welcome in alixixi.com !〈/h1〉
〈/body〉
〈/html〉
下面做一些簡單的說明：
(1) 在黃色的CSS文法規則中這樣定義了文字的風格，標籤〈h2〉...〈/h2〉間的字元為"宋體"，"大小12pt"，字元是" 傾斜"的，顏色"#ff0033"，字元背景色"#ffcccc"。同理，標籤〈h1〉...〈/h1〉之間的文字字型 "arial"，大小"12pt"，顏色"#66ff66"。
(2)上面的CSS格式裡，h1和h2稱為"選擇對象"，font-size以及color等稱為"屬性"，屬性後面的稱為"參數"。
(3) 通過css可以控制任何HTML標籤的風格。例如〈td〉,〈p〉,〈body〉,〈table〉, 〈tr〉,〈th〉等。只要在HTML的〈head〉區內的〈style type="text/css"〉和〈/style〉之間指定對應標籤的風格(字型，顏色，字型大小)即可，使用"宋體的9磅字型"可 非常的好看啊，許多站用的都是9pt的字型。
(4)如果你需要定義的一些標籤的風格相同，可以這樣做，將他們寫在一起，這樣又可以減少代碼了：
H1, P, TD{ font-family: arial ; font-size: 12pt}
上面的代碼錶示：所有位於〈H1〉、〈P〉和〈TD〉標籤內的字元將用Arial字型，12pt顯示。
(5)通過CSS設定的風格對於javascripts輸出的結果也是有效。你可以看看javascripts指令碼區的一些顯示日期和目前時間指令碼的例子，為了有效地控制輸出的字元大小，我都使用了CSS。
(6) 注意：有的比較老的瀏覽器並不支援式樣單文法，會將〈style type="text/css"〉...〈/style〉間的文本顯示出來，若要避免這種情況的發生，最好加入〈!-- 和 --〉。這一點與javascripts相同。
(7)在〈style type="text/css"〉 中的 TYPE="text/css" 的作用是設定採用何種MIME類型，瀏覽器在執行到這裡就知道了，這樣以來，不支援CSS的瀏覽器可以忽略樣式表。
3、 主題：使用不同的CSS寫法-CSS進階
CSS的寫法可以用以下的幾種方法實現：
(1)使用Embed(內建樣式單)排版樣式：
即將CSS代碼直接插入每個頁面的HTML的〈head〉區，就象上一節看到的。使用〈style〉...〈/style〉標籤。例如：
以下是引用片段：
〈style type="text/css"〉
〈!--
h2 { font-family: "宋體"; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC}
h1 { font-family: "Arial"; font-size: 12pt; color: #66FF66}
--〉
〈/style〉
(2)使用"link(外部樣式單)排版樣式"：
即 你可以將多個頁面的排版風格都用一個樣式單檔案控制。這個外部的樣式單檔案(一個副檔名是css的文字檔)將設定你所有網頁的規則。如果你改變樣式單文 件中的某行，所有頁面風格用這個css檔案定義的頁面都會隨之改變。如果你的網站檔案非常多，則這項功能就非常方便了。
在〈HEAD〉區內使用〈LINK〉標籤(注意：不再是〈style〉標籤了)：
以下是引用片段：
〈HTML〉
〈HEAD〉
〈LINK REL=stylesheet HREF= "http://yoursute.com/my.css" TYPE="text/css"〉
〈/HEAD〉
〈body〉
〈h2〉你好!朋友，歡迎光臨chinahtml.com的教學區。〈/h2〉
〈h1〉Hello，everybody，welcome in chinahtml.com !〈/h1〉
〈/body〉
〈/html〉
★☆★說明：css檔案的路徑用絕對路徑(http://...)表示或者用相對路徑(例如：../csscode/my.css)表示都可以。
然後再單獨產生一個css檔案，叫做my.css (隨便起名)。檔案內容如下：
h2 { font-family: "宋體"; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC}
h1 { font-family: "Arial"; font-size: 12pt; color: #66FF66}
只要將這個CSS檔案上傳到伺服器指定的目錄即可。
(3)使用"inline(行內樣式單)排版樣式"：
inline樣式單採用HTML標籤的"style"屬性，它的特點是"定義某一個標籤的式樣單風格"，只對所定義的標籤起作用，並非對整個頁面起作用。例如：
〈p style="font-size: 14pt ; color: #99ff99 ; font-family: 宋體"〉層疊式樣單〈/p〉
看到的效果：
層疊式樣單
使用行內樣式單，你必須為每行指定樣式規則，否則下一行時瀏覽器將使用頁面的預設設定。 但是：有時候這種方式卻非常有效。
(4)使用"import(輸入的外部式樣單)"--適用於IE瀏覽器。
以下是引用片段：
〈html〉
〈head〉
〈style type= "text/css"〉
〈!--
@import url(my.css);
--〉
〈/style〉
〈/head〉
〈body〉
〈h3〉輸入的外部式樣單〈/h3〉
〈/body〉
〈/html〉
其中my.css樣式單檔案的內容如下：
h3 { font-family: "宋體"; font-size: 12pt color: green }
執行的結果如下：
輸入的外部式樣單
4、主題：需要特別說明的一些問題--CSS進階
★☆★CSS的繼承性問題：
看了下面的例子就知道了，如果定義
h1 { color:yellow }
即，告訴瀏覽器將所有〈B〉標籤內的文字用藍色顯示。
但是，如果使用如下的HTML文法：
〈h1〉層疊〈I〉式樣單〈/I〉的例子〈/h1〉
對於〈I〉標籤並沒有設定樣式，但因為〈I〉位於〈H1〉之中，所以它將繼承〈H1〉設定的樣式，也以黃色顯示。
層疊式樣單的例子
★☆★CSS的優先順序問題：
如果混合使用三種式樣單，優先順序：inline 〉 embed 〉 link 式樣單。
★☆★特別指定的樣式單的優先順序大於繼承的式樣，例：
以下是引用片段：
BODY { color: green }
P { color: yellow}