免費AI編程助手
1.2 樣式表能為我們做什么？
那么樣式表有什么特別之處呢?簡而言之,它能幫你做以下事情:
你可以將格式和結構分離。
你可以以前所未有的能力控制頁面布局。
你可以制作體積更小下載更快的網(wǎng)頁。
你可以將許多網(wǎng)頁同時更新，比以前快更容易。
瀏覽器將成為你更友好的界面
你可以將格式和結構分離。
HTML從來沒打算控制網(wǎng)頁的格式或外觀。這種語言定義了網(wǎng)頁的結構和個要素的功能，而讓瀏覽器自己決定應該讓各要素以何種模樣顯示。
但是網(wǎng)頁設計者要求的更多。所以當Netscape推出新的可以控制網(wǎng)頁外觀的HTML標簽時，網(wǎng)頁設計者無不歡呼雀躍。我們可以用<FONT
FACE>、<I>包在<P>外邊控制文章主體的外觀等等。然后我們將所有東西都放入表格，用隱式GIF空格產(chǎn)生一個20象素的邊距。一切都變得亂七八糟。編碼變得越來越臃腫不堪，要想將什么內(nèi)容迅速加到網(wǎng)頁中變得越來越難。
串接樣式表通過將定義結構的部分和定義格式的部分分離使我們能夠?qū)撁娴牟季质┘痈嗟目刂啤TML仍可以保持簡單明了的初衷。CSS代碼獨立出來從另一角度控制頁面外觀。
你可以以前所未有的能力控制頁面的布局。
<FONT
SIZE>能使我們調(diào)整字號，表格標簽幫助我們生成邊距，這都沒錯。但是，我們對HTML總體上的控制卻很有限。我們不可能精確地生成80象素的高度，不可能控制行間距或字間距，我們不能在屏幕上精確定位圖象的位置。
但是現(xiàn)在，樣式表使這一切都成為可能。而即將推出的新的CSS功能更令人興奮。以后4天內(nèi)，你將會明白我所說的意味著什么。
你可以制作出體積更小下載更快的網(wǎng)頁
還有更好的消息：樣式表只是簡單的文本，就象HTML那樣。它不需要圖象，不需要執(zhí)行程序，不需要插件，不需要流式。它就象HTML指令那樣快。
有了CSS之后，以前必須求助于GIF的事情現(xiàn)在通過CSS就可以實現(xiàn)。還有，正如我先前提到的，使用串接樣式表可以減少表格標簽及其它加大HTML體積的代碼，減少圖象用量從而減少文件尺寸。
你可以更快更容易地維護及更新大量的網(wǎng)頁。
沒有樣式表時，如果我想更新整個站點中所有主體文本的字體，我必須一頁一頁地修改每張網(wǎng)頁。即便站點用數(shù)據(jù)庫提供服務，我仍然需要更新所有的模板，而且更新每一模板中每一個實例實例的<FONT
FACE>。
樣式表的主旨就是將格式和結構分離。利于樣式表，我可以將站點上所有的網(wǎng)頁都指向單一的一個CSS文件，我只要修改CSS文件中某一行，那么整個站點都會隨之發(fā)生變動。
瀏覽器將成為你更友好的界面。
不象其它的的網(wǎng)絡技術，樣式表的代碼有很好的兼容性，也就是說，如果用戶丟失了某個插件時不會發(fā)生中斷，或者使用老版本的瀏覽器時代碼不會出現(xiàn)雜亂無章的情況。
只要是可以識別串接樣式表的瀏覽器就可以應用它。
怎么樣，樣式表的確是一個很不錯的注意吧？
那么，現(xiàn)在我們就開始制作一份樣式表。
zzz1.3 你的第1張樣式表
現(xiàn)在我們就開始制作樣式表。
打開你最喜歡的HTML編輯器生成基本的網(wǎng)頁：
<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>
很好?，F(xiàn)在，讓我們給它加一些樣式表。只需在最初的<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!
如果你的瀏覽器不支持CSS，請點擊這里觀看CSS的效果。
做得很好！你已經(jīng)制作出了你的第1份樣式表支持的網(wǎng)頁。
（如果“amaze
your friends!”一行的背景不是黃色，則說明你需要升級你的瀏覽器，否則你將無法學完整個教程。建議你安裝Netscape
Communicator或者Internet Explorer
4）
一些術語
讓我們學習一下這些新的編碼：
串接樣式表的核心是規(guī)則。最簡單的規(guī)則就象這樣：
H1 { color: green }整個規(guī)則告訴瀏覽器將所有<H1></H1>包圍的文字以綠色顯示。
每一條規(guī)則包含一個選擇及說明。在上述例子中，H1就是選擇，它是一個附帶樣式功能的HTML標簽。說明用于定義實際的樣式，包括兩部分：屬性（本例中即color）和參數(shù)（green）。
任何HTML標簽都可用作標簽。所以你可以將樣式表的信息附加到任何要素。從通常的<P>到<CODE>及<TABLE>內(nèi)容。你甚至可以通過將樣式表用于<IMG>將串接樣式表的屬性用于圖象。
從我們的第1個樣式表實例中可以發(fā)現(xiàn)，你可以歸類樣式表的規(guī)則。我們將3種不同的說明都用于<P>。
與之類似，你也可以歸類選擇：
H1, P, BLOCKQUOTE
{ font-family: arial }這項規(guī)則設定所以位于<H1>、<P>和<BLACKQUOTE>的標簽將用Arial字體顯示。
繼承性
樣式表的規(guī)則可從母體延續(xù)到子體。下面是一個例子：
B { color: blue }這項規(guī)則告訴瀏覽器將所有<B>之內(nèi)的文字用藍色顯示。但是在下列情況下，瀏覽器該如何處理呢？
<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.
現(xiàn)在我們已經(jīng)明白了串接樣式表的規(guī)則如何運作，還看到將樣式表加入網(wǎng)頁的一種方法但還有其它方法，讓我們繼續(xù)學習。
zzz1.4 將樣式加到你的網(wǎng)頁中
我們已經(jīng)學了將樣式表加到網(wǎng)頁的一種方法。實際上你可以使用4種方法。每種方法都有其不同的優(yōu)點：
將樣式表植入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>植入樣式表規(guī)則后，瀏覽器在整個HTML頁面中都執(zhí)行該規(guī)則。如果你想對網(wǎng)頁一次性加入樣式表，就可采用該方法。
你可能注意到代碼中有兩處很奇怪： TYPE="text/css"屬性和注釋標簽。 TYPE="text/css" 設定采用MIME類型，這樣以來，不支持CSS的瀏覽器可以忽略樣式表。
注釋標簽(<!-- and -->)更為重要。有些老的瀏覽器（如MAC機用的IE
2.0）即使在設定了TYPE="text/css"
屬性時也不能忽略樣式表繼續(xù)執(zhí)行下面的命令，而且還會顯示樣式表的代碼。而使用注釋標簽則可以避免發(fā)生這種情況。
鏈接到樣式表上
這里是樣式表功能發(fā)揮得淋漓盡致的地方。你可以將多個HTML文件都鏈接到一個中心樣式表文件。這個外部的樣式表文件將設定你所有網(wǎng)頁的規(guī)則。如果你改變樣式表文件中的額某一細節(jié)，所有頁面都會隨之改變。如果你維護的站點很大，則這項功能絕對會有其用武之地。
它的使用方法：產(chǎn)生一個普通的網(wǎng)頁，但使用<STYLE>規(guī)則，而是在<HEAD>內(nèi)使用<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>
(使用鏈接的樣式表時，你無須使用注釋標簽。)
現(xiàn)在生成一個單另的文本文件，起名mystyles.css
(或者其任何你喜歡的名字)。文件內(nèi)容如下：
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }如同發(fā)布HTML文件那樣，將這個CSS文件布到你的服務器中。在瀏覽器中觀看網(wǎng)時，你會發(fā)現(xiàn)瀏覽器將依照鏈接標簽將有鏈接了的HTML網(wǎng)頁按照樣式表的規(guī)則示，在HREF屬性中你可以選擇使用絕對相對URL。
輸入樣式表
輸入外部樣式表的方法同鏈接的方法類似。不同之處在于鏈接法不能同其它方法結合使用，但輸入法則可以。例：
<HTML>
<STYLE TYPE="text/css">
<!--
@import url(company.css);
H1 { color: orange; font-family: impact }
-->
</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>而其中輸入的 company.css文件內(nèi)容如下：
H1 { color: green; font-family: times }
P { background: yellow; font-family: courier }在本例中，瀏覽器首先輸入 company.css的規(guī)則 ( @import 必須打頭),
然后加入移植的規(guī)則從而為這個網(wǎng)頁產(chǎn)生規(guī)則集合。
請注意，對于H1在外部樣式表文件和植入的樣式表中都設定了規(guī)則。在兩者沖突的情況下，瀏覽器應執(zhí)行哪一項規(guī)則呢？植入的規(guī)則此時將占上風。所以文字顯示效果如下：
Stylesheets: The Tool of the Web Design Gods
Amaze your friends! Squash your enemies!
如果你的瀏覽器不支持CSS請點擊這里觀看顯示效果。
輸入樣式表的靈活性可以使你輸入無數(shù)多個樣式表，并可以按照自己的喜好用植入的樣式表凌駕于輸入的樣式表之上。
但是目前只有IE 4.0支持輸入法。
在行內(nèi)加入樣式
最后，你還可以在HTML行中加入樣式規(guī)則，如下：
<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頂部加入樣表代碼。加入行內(nèi)的樣式表屬性將使瀏器同樣執(zhí)行樣式表規(guī)則。
該方法不方便之處在于：你必須在每行指中都中加入樣式規(guī)則，否則下一行時瀏器將轉(zhuǎn)回到文件的缺省設置。
加入行內(nèi)的樣式表相比不如植入、鏈接及輸入的樣式表那樣功能強大，但有時候你會發(fā)現(xiàn)它也很有用。
記住，你可以同時使用幾種方法，其實，樣式表的能力就在于綜合你加入網(wǎng)頁的各種樣式。
更多建議：