用HTML製作網頁就象是用畫筆繪製一幅圖畫。只有那些對網頁製作痴迷而執著的人才可能精確地實現預定的結果，這並不是正確的工具和靈活性就可以實現的。
任何使用過HTML一個多星期的人都知道HTML是一種非常好的網頁製作工具。所以有時候我們不得不製作體積相當大的GIF圖象以獲得想要的字體和布局。同樣，有時候也不得不使用各種表格標籤和隱藏的空格GIF圖象以使頁面的布局能達到預想的目的。
的確有些荒唐。我們的編碼實在是太複雜了，GIF用量越來越多，而我們的頁面變得比英吉利海峽還要寬，網際網路有限的帶寬怎麼可能通過這麼寬的信息呢？這種設計並不是網頁設計的最佳形式。
但是，1996年底的時候悄悄誕生了一種叫做樣式表（stylesheets）的技術。全稱應該是串接樣式表（Cascading Stylesheets－簡稱CSS）這位HTML的表弟向世人保證：
將對布局、字體、顏色、背景和其它文圖效果實現更加精確的控制。
- 只通過修改一個文件就改變頁數不定的網頁的外觀和格式。
- 在所有瀏覽器和平臺之間的兼容性。
- 更少的編碼、更少的頁數和更快的下載速度。
除了還不能全面支持我們常用的大多數瀏器之外，CSS在實現其它承諾方面作得相當出色。CSS在改變我們製作樣式表的方法。它為大部分的網頁創新奠定了基石。
之後的5天，我們將漫遊樣式表的世界。你將學到樣式表的基本知識並將其應用於你的網頁中。你還將學到如何處理字體、圖文、色彩、背景及定位等的詳細技巧。
今天，我們先瀏覽一下樣式表的基本內容。第1個問題；樣式表能為我們做什麼？
1.2 樣式表能為我們做什麼？
那麼樣式表有什麼特別之處呢?簡而言之,它能幫你做以下事情:
- 你可以將格式和結構分離。
- 你可以以前所未有的能力控制頁面布局。
- 你可以製作體積更小下載更快的網頁。
- 你可以將許多網頁同時更新，比以前快更容易。
- 瀏覽器將成為你更友好的界面
你可以將格式和結構分離。
HTML從來沒打算控制網頁的格式或外觀。這種語言定義了網頁的結構和個要素的功能，而讓瀏覽器自己決定應該讓各要素以何種模樣顯示。
但是網頁設計者要求的更多。所以當Netscape推出新的可以控制網頁外觀的HTML標籤時，網頁設計者無不歡呼雀躍。我們可以用<FONT FACE>、<I>包在<P>外邊控制文章主體的外觀等等。然後我們將所有東西都放入表格，用隱式GIF空格產生一個20象素的邊距。一切都變得亂七八糟。編碼變得越來越臃腫不堪，要想將什麼內容迅速加到網頁中變得越來越難。
串接樣式表通過將定義結構的部分和定義格式的部分分離使我們能夠對頁面的布局施加更多的控制。HTML仍可以保持簡單明了的初衷。CSS代碼獨立出來從另一角度控制頁面外觀。
你可以以前所未有的能力控制頁面的布局。
<FONT SIZE>能使我們調整字號，表格標籤幫助我們生成邊距，這都沒錯。但是，我們對HTML總體上的控制卻很有限。我們不可能精確地生成80象素的高度，不可能控制行間距或字間距，我們不能在屏幕上精確定位圖象的位置。
但是現在，樣式表使這一切都成為可能。而即將推出的新的CSS功能更令人興奮。以後4天內，你將會明白我所說的意味著什麼。
你可以製作出體積更小下載更快的網頁
還有更好的消息：樣式表只是簡單的文本，就象HTML那樣。它不需要圖象，不需要執行程序，不需要插件，不需要流式。它就象HTML指令那樣快。
有了CSS之後，以前必須求助於GIF的事情現在通過CSS就可以實現。還有，正如我先前提到的，使用串接樣式表可以減少表格標籤及其它加大HTML體積的代碼，減少圖象用量從而減少文件尺寸。
你可以更快更容易地維護及更新大量的網頁。
沒有樣式表時，如果我想更新整個站點中所有主體文本的字體，我必須一頁一頁地修改每張網頁。即便站點用資料庫提供服務，我仍然需要更新所有的模板，而且更新每一模板中每一個實例實例的<FONT FACE>。
樣式表的主旨就是將格式和結構分離。利於樣式表，我可以將站點上所有的網頁都指向單一的一個CSS文件，我只要修改CSS文件中某一行，那麼整個站點都會隨之發生變動。
瀏覽器將成為你更友好的界面。
不象其它的的網絡技術，樣式表的代碼有很好的兼容性，也就是說，如果用戶丟失了某個插件時不會發生中斷，或者使用老版本的瀏覽器時代碼不會出現雜亂無章的情況。
只要是可以識別串接樣式表的瀏覽器就可以應用它。
怎麼樣，樣式表的確是一個很不錯的注意吧？
那麼，現在我們就開始製作一份樣式表。 zzz1.3 你的第1張樣式表
現在我們就開始製作樣式表。
打開你最喜歡的HTML編輯器生成基本的網頁：
| <HTML> <HEAD> <TITLE>My First Stylesheet</TITLE> </HEAD> <BODY> <H1>Stylesheets: The Tool of the Web Design Gods</H1> <P>Amaze your friends! Squash your enemies!</P> </BODY> </HTML> |
很好。現在，讓我們給它加一些樣式表。只需在最初的<HTML>和 <BODY>標籤之間插入以下代碼：
| <STYLE TYPE="text/css"> <!-- H1 { color: green; font-size: 37px; font-family: impact } P { text-indent: 1cm; background: yellow; font-family: courier } --> </STYLE> |
從瀏覽器中打開頁面，你將會看到：
Stylesheets: The Tool of the Web
Design Gods
Amaze your friends! Squash your enemies!
做得很好！你已經製作出了你的第1份樣式表支持的網頁。
（如果「amaze your friends!」一行的背景不是黃色，則說明你需要升級你的瀏覽器，否則你將無法學完整個教程。建議你安裝Netscape Communicator或者Internet Explorer 4）
一些術語
讓我們學習一下這些新的編碼：
串接樣式表的核心是規則。最簡單的規則就象這樣：
整個規則告訴瀏覽器將所有<H1></H1>包圍的文字以綠色顯示。
每一條規則包含一個選擇及說明。在上述例子中，H1就是選擇，它是一個附帶樣式功能的HTML標籤。說明用於定義實際的樣式，包括兩部分：屬性（本例中即color）和參數（green）。
任何HTML標籤都可用作標籤。所以你可以將樣式表的信息附加到任何要素。從通常的<P>到<CODE>及<TABLE>內容。你甚至可以通過將樣式表用於<IMG>將串接樣式表的屬性用於圖象。
從我們的第1個樣式表實例中可以發現，你可以歸類樣式表的規則。我們將3種不同的說明都用於<P>。
與之類似，你也可以歸類選擇：
H1, P, BLOCKQUOTE
{ font-family: arial }
這項規則設定所以位於<H1>、<P>和<BLACKQUOTE>的標籤將用Arial字體顯示。
繼承性
樣式表的規則可從母體延續到子體。下面是一個例子：
這項規則告訴瀏覽器將所有<B>之內的文字用藍色顯示。但是在下列情況下，瀏覽器該如何處理呢？
| <B>All my Web pages will use cascading stylesheets within <I>four</I> weeks.</B> |
對於<I>標籤並沒有設定樣式，但因為<I>位於<B>之中，所以它將繼承母體<B>設定的樣式，也以藍色顯示。
All my Web pages will use cascading stylesheets within four weeks.
現在我們已經明白了串接樣式表的規則如何運作，還看到將樣式表加入網頁的一種方法但還有其它方法，讓我們繼續學習。 zzz1.4 將樣式加到你的網頁中
我們已經學了將樣式表加到網頁的一種方法。實際上你可以使用4種方法。每種方法都有其不同的優點：
- 將樣式表植入HTML文件中。
- 將一個外部樣式表連結到HTML文件上。
- 將一個外部樣式表輸入到HTML文件中。
- 將樣式表加入到HTML文件行中。
植入樣式表：
這就是我們在上一頁中用的方法，所有的樣式表信息都列於HTML文件的頂部，同<BODY>分列，例：
| <HTML> <STYLE TYPE="text/css"> <!-- H1 { color: green; font-family: impact } P { background: yellow; font-family: courier } --> </STYLE> <HEAD> <TITLE>My First Stylesheet</TITLE> </HEAD> <BODY> <H1>Stylesheets: The Tool of the Web Design Gods</H1> <P>Amaze your friends! Squash your enemies!</P> </BODY> </HTML> |
植入樣式表規則後，瀏覽器在整個HTML頁面中都執行該規則。如果你想對網頁一次性加入樣式表，就可採用該方法。
你可能注意到代碼中有兩處很奇怪： TYPE="text/css"屬性和注釋標籤。 TYPE="text/css" 設定採用MIME類型，這樣以來，不支持CSS的瀏覽器可以忽略樣式表。
注釋標籤(<!-- and -->)更為重要。有些老的瀏覽器（如MAC機用的IE 2.0）即使在設定了TYPE="text/css" 屬性時也不能忽略樣式表繼續執行下面的命令，而且還會顯示樣式表的代碼。而使用注釋標籤則可以避免發生這種情況。
連結到樣式表上
這裡是樣式表功能發揮得淋漓盡致的地方。你可以將多個HTML文件都連結到一個中心樣式表文件。這個外部的樣式表文件將設定你所有網頁的規則。如果你改變樣式表文件中的額某一細節，所有頁面都會隨之改變。如果你維護的站點很大，則這項功能絕對會有其用武之地。
它的使用方法：產生一個普通的網頁，但使用<STYLE>規則，而是在<HEAD>內使用<LINK>標籤：
| <HTML> <HEAD> <TITLE>My First Stylesheet </TITLE> <LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css"> </HEAD> <BODY> <H1>Stylesheets: The Tool of the Web Design Gods</H1> <P>Amaze your friends! Squash your enemies!</P> </BODY> </HTML> |
(使用連結的樣式表時，你無須使用注釋標籤。)
現在生成一個單另的文本文件，起名mystyles.css (或者其任何你喜歡的名字)。文件內容如下：
| H1 { color: green; font-family: impact } P { background: yellow; font-family: courier } |
如同發布HTML文件那樣，將這個CSS文件布到你的伺服器中。在瀏覽器中觀看網時，你會發現瀏覽器將依照連結標籤將有連結了的HTML網頁按照樣式表的規則示，在HREF屬性中你可以選擇使用絕對相對URL。
輸入樣式表
輸入外部樣式表的方法同連結的方法類似。不同之處在於連結法不能同其它方法結合使用，但輸入法則可以。例：
| <HTML> |
而其中輸入的 company.css文件內容如下：
| H1 { color: green; font-family: times } P { background: yellow; font-family: courier } |
在本例中，瀏覽器首先輸入 company.css的規則 ( @import 必須打頭), 然後加入移植的規則從而為這個網頁產生規則集合。
請注意，對於H1在外部樣式表文件和植入的樣式表中都設定了規則。在兩者衝突的情況下，瀏覽器應執行哪一項規則呢？植入的規則此時將佔上風。所以文字顯示效果如下：
Stylesheets: The Tool of the Web Design Gods
Amaze your friends! Squash your enemies!
輸入樣式表的靈活性可以使你輸入無數多個樣式表，並可以按照自己的喜好用植入的樣式表凌駕於輸入的樣式表之上。
但是目前只有IE 4.0支持輸入法。
在行內加入樣式
最後，你還可以在HTML行中加入樣式規則，如下：
| <HTML> <HEAD> <TITLE>My First Stylesheet </TITLE> </HEAD> <BODY> <H1 STYLE="color: orange; font-family: impact">Stylesheets: The Tool of the Web Design Gods</H1> <P STYLE="background: yellow; font-family: courier">Amaze your friends! Squash your enemies!</P> </BODY> </HTML> |
在這個例子中，你無須在HTML頂部加入樣表代碼。加入行內的樣式表屬性將使瀏器同樣執行樣式表規則。
該方法不方便之處在於：你必須在每行指中都中加入樣式規則，否則下一行時瀏器將轉回到文件的預設設置。
加入行內的樣式表相比不如植入、連結及輸入的樣式表那樣功能強大，但有時候你會發現它也很有用。
記住，你可以同時使用幾種方法，其實，樣式表的能力就在於綜合你加入網頁的各種樣式。