用CSS建網站的使用各種樣式優缺點!-做網站教程
作者:佚名 時間:2014-03-27 分享到:
對網站使用樣式表
在對建的網站文檔和文檔集使用CSS樣式之前、使用中和使用后,有幾個問題是你必須考慮的。首先,最主要的問題是,是否必須使用它們。坦白地說,只有很少幾種樣式效果是獨一無二的;大部分效果可以通過自然和基于內容的樣式標簽如<i>和<em>以及各種不同的標簽屬性,如顏色和背景等,盡管可能不是很容易,兼容性也較差。
網站是否用樣式表才是最好的?
我們認為css標準是一個贏家,它不僅適用于基于JavaScript的標準,而且能提高所有標記文檔,包括HTML, XHTML和大部分其他XML兼容文檔的方便性和有效性。目前使用的大部分瀏覽器都支持CSS2樣式。益處是顯而易見的。那么,你為什么不用樣式呢?
雖然我們強烈建議你學習并在文檔中使用CSS2樣式表,我們也認識到網站應用樣式表最終要付出大量的時間和精力。為一頁或兩頁文檔設計一個樣式表很可能會花費大量的時間,特別是不會在其他頁上重新使用這些樣式時。然而,總的說來,我們相信需要選擇的不是是否使用CSS2樣式表,而是什么時候使用它才是合適的。
使用何種樣式表類型及何時使用?
一旦已經決定使用css(想受苦或是好玩),下一個問題是,應該使用哪一種樣式表類型—內聯、文檔級或外部,以及什么時候使用?每一種各有優缺點;每一種都最適用于特定的環境。
外部樣式的優缺點
由于樣式表可以給文檔的顯示提供一致性,外部樣式表是最好、最簡單的管理整個文檔集樣式的方法。只要把需要的樣式規則放在一個樣式表中,然后把這些樣式應用到需要的文檔中即可。由于所有文檔都只受一個樣式表的影響,轉換整個文檔為一種新樣式,只需要簡單地在相應的外部樣式表中改變一條規則。
即使在文檔樣式不同的情況下,也有可能收集一些基本樣式規則到一個樣式表中這樣這個樣式表可以被幾個不同的文檔共享,包括:
背景顏色
背景圖像
字體大小和外觀
邊界
文本對齊
外部樣式表的另一個優點是,那些需要拷貝樣式的其他網頁制作者可以容易地訪問那個樣式表,并使得他們的頁面看起來和你的一樣。模仿是對你最真誠的贊揚,所以當有人選擇模仿你的頁面的外觀時,你不必覺得厭煩。除此之外,你不能阻止他們鏈接到你的樣式表,所以你最好是學會喜歡這種做法。像常規HTML文檔一樣,加密或隱藏你的樣式表以便其他人不能看到和使用它們是不可能的。外部樣式表最大的問題是,它們增加了訪問頁面的時間。瀏覽器不僅必須下載頁面本身,還必須在頁面顯示給用戶前下載樣式表。雖然大部分樣式表相對比較小,但在一個慢速連接上訪問網絡時,用戶肯定能感覺到樣式表的存在。
如果沒有合適的規定,外部樣式表可能變得很大、很笨重。創建樣式表時,記住應只包括使用這個樣式表的頁面共有的樣式。如果一組樣式只適用于一兩個頁面,最好把它們放在另外一個樣式表中,或者把它們加入到文檔使用的文檔級樣式中。否則,你會發現自己必須花費大量的精力來應付外部樣式對很多單獨文檔的影響。
文檔級樣式的優缺點
文檔級樣式在創建自定義文檔時最有用。它們允許你改寫外部定義的樣式的一條或多條規則,創建一個略有不同的文檔。你也可能需要在把新樣式規則移到樣式表之前使用文檔級樣式來試驗新樣式規則。通過用文檔級樣式來加入和修改規則,你就不用冒險加不合適的樣式到樣式表中,不會破壞使用那個樣式表的文檔的外觀。文檔樣式的最大問題是,在創建一個格式化外部樣式表來管理文檔集時,不能使用文檔級樣式。文檔級樣式只是在給每個文檔加規則時容易。不幸的是,用文檔級樣式管理一個文檔集是很繁瑣且容易出錯的事情。哪怕是一個簡單的改動也可能導致需要幾小時的編輯,還可能引起潛在的錯誤。作為基本規則,任何影響到三個或三個以上的文檔的樣式規則應該移到樣式表,并把它們應用到使用<link>標簽或import規則的文檔中。創建文檔集時,如果堅持使用這條規則,那么當要改變樣式時你就會發現它的優點。
內聯樣式的優缺點
在網站級聯的最后,內聯樣式改寫了更多的一般樣式。從現在起養成習慣盡量少使用內聯樣式。內聯樣式不能重新使用,這使得樣式管理很困難。更有甚者,這種改變可以傳遍整個文檔,使得查找和改變內聯樣式容易出錯。(那就是為什么我們首先要避開使用基于標簽和屬性的樣式的原因,不是嗎?)
任何時候使用內聯樣式時,仔細想想同樣的效果是否可以通過使用一個樣式類定義來得到。例如,你最好定義以下代碼:
<style type="text/css”>
<!--
P.centered(text-align:center}
em.blue (color:blue}
-->
</style>
以后使用:
<p class=centered>
<em class=blue>
來代替:
<P style=”text-align:center">
style=”color:blue”>
你的網站樣式就會更易于查找和制作管理,并且可以方便地在整個網站中重復使用。-聯楷CSS網站制作教程