5日精通CSS層疊樣式表之第一天
http://www.inspirr.com
用HTML制作網頁就象是用畫筆繪制一幅圖畫。只有那些對網頁制作癡迷而執著的人才可能精確地實現預定的結果，這并不是正確的工具和靈活性就可以實現的。
任何使用過HTML一個多星期的人都知道HTML是一種非常好的網頁制作工具。所以有時候我們不得不制作體積相當大的GIF圖象以獲得想要的字體和布局。同樣，有時候也不得不使用各種表格標簽和隱藏的空格GIF圖象以使頁面的布局能達到預想的目的。
的確有些荒唐。我們的編碼實在是太復雜了，GIF用量越來越多，而我們的頁面變得比英吉利海峽還要寬，互聯網有限的帶寬怎么可能通過這么寬的信息呢？這種設計并不是網頁設計的最佳形式。
但是，1996年底的時候悄悄誕生了一種叫做樣式表的技術。全稱應該是串接樣式表這位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份樣式表支持的網頁。
一些術語
讓我們學習一下這些新的編碼：
串接樣式表的核心是規則。最簡單的規則就象這樣：
H1 { color: green }
整個規則告訴瀏覽器將所有<H1></H1>包圍的文字以綠色顯示。
每一條規則包含一個選擇及說明。在上述例子中，H1就是選擇，它是一個附帶樣式功能的HTML標簽。說明用于定義實際的樣式，包括兩部分：屬性和參數。
任何HTML標簽都可用作標簽。所以你可以將樣式表的信息附加到任何要素。從通常的<P>到<CODE>及<TABLE>內容。你甚至可以通過將樣式表用于<IMG>將串接樣式表的屬性用于圖象。
從我們的第1個樣式表實例中可以發現，你可以歸類樣式表的規則。我們將3種不同的說明都用于<P>。
與之類似，你也可以歸類選擇：
H1, P, BLOCKQUOTE
{ font-family: arial }
這項規則設定所以位于<H1>、<P>和<BLACKQUOTE>的標簽將用Arial字體顯示。
繼承性
樣式表的規則可從母體延續到子體。下面是一個例子：
B { color: blue }
這項規則告訴瀏覽器將所有<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的瀏覽器可以忽略樣式表。
注釋標簽更為重要。有些老的瀏覽器即使在設定了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>
<STYLE TYPE="text/css">
<!--
@import
url;
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文件內容如下：
H1 { color: green; font-family: times }
P { background: yellow;
font-family: courier }
在本例中，瀏覽器首先輸入 company.css的規則 , 然后加入移植的規則從而為這個網頁產生規則集合。
請注意，對于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頂部加入樣表代碼。加入行內的樣式表屬性將使瀏器同樣執行樣式表規則。
該方法不方便之處在于：你必須在每行指中都中加入樣式規則，否則下一行時瀏器將轉回到文件的缺省設置。
加入行內的樣式表相比不如植入、鏈接及輸入的樣式表那樣功能強大，但有時候你會發現它也很有用。
記住，你可以同時使用幾種方法，其實，樣式表的能力就在于綜合你加入網頁的各種樣式。
編輯整理
文章定位：
人氣(52) | 回應(0)| 推薦 (
0)| 收藏 (
0)|
轉寄
全站分類:
不分類
