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