時間：2015-06-28 00:00:00 來源：IT貓撲網(wǎng) 作者：網(wǎng)管聯(lián)盟 我要評論(0)
用HTML制作網(wǎng)頁就象是用畫筆繪制一幅圖畫。只有那些對網(wǎng)頁制作癡迷而執(zhí)著的人才可能精確地實現(xiàn)預定的結果，這并不是正確的工具和靈活性就可以實現(xiàn)的。
任何使用過HTML一個多星期的人都知道HTML是一種非常好的網(wǎng)頁制作工具。所以有時候我們不得不制作體積相當大的GIF圖象以獲得想要的字體和布局。同樣，有時候也不得不使用各種表格標簽和隱藏的空格GIF圖象以使頁面的布局能達到預想的目的。
的確有些荒唐。我們的編碼實在是太復雜了，GIF用量越來越多，而我們的頁面變得比英吉利海峽還要寬，互聯(lián)網(wǎng)有限的帶寬怎么可能通過這么寬的信息呢？這種設計并不是網(wǎng)頁設計的最佳形式。
但是，1996年底的時候悄悄誕生了一種叫做樣式表（stylesheets）的技術。全稱應該是串接樣式表（Cascading Stylesheets－簡稱CSS）這位HTML的表弟向世人保證：
將對布局、字體、顏色、背景和其它文圖效果實現(xiàn)更加精確的控制。
除了還不能全面支持我們常用的大多數(shù)瀏器之外，CSS在實現(xiàn)其它承諾方面作得相當出色。CSS在改變我們制作樣式表的方法。它為大部分的網(wǎng)頁創(chuàng)新奠定了基石。
之后的5天，我們將漫游樣式表的世界。你將學到樣式表的基本知識并將其應用于你的網(wǎng)頁中。你還將學到如何處理字體、圖文、色彩、背景及定位等的詳細技巧。
今天，我們先瀏覽一下樣式表的基本內容。第1個問題；樣式表能為我們做什么？
1.2?樣式表能為我們做什么？
那么樣式表有什么特別之處呢?簡而言之,它能幫你做以下事情:
你可以將格式和結構分離。
HTML從來沒打算控制網(wǎng)頁的格式或外觀。這種語言定義了網(wǎng)頁的結構和個要素的功能，而讓瀏覽器自己決定應該讓各要素以何種模樣顯示。
但是網(wǎng)頁設計者要求的更多。所以當Netscape推出新的可以控制網(wǎng)頁外觀的HTML標簽時，網(wǎng)頁設計者無不歡呼雀躍。我們可以用、包在 外邊控制文章主體的外觀等等。然后我們將所有東西都放入表格，用隱式GIF空格產(chǎn)生一個20象素的邊距。一切都變得亂七八糟。編碼變得越來越臃腫不堪，要想將什么內容迅速加到網(wǎng)頁中變得越來越難。 串接樣式表通過將定義結構的部分和定義格式的部分分離使我們能夠對頁面的布局施加更多的控制。HTML仍可以保持簡單明了的初衷。CSS代碼獨立出來從另一角度控制頁面外觀。 你可以以前所未有的能力控制頁面的布局。 能使我們調整字號，表格標簽幫助我們生成邊距，這都沒錯。但是，我們對HTML總體上的控制卻很有限。我們不可能精確地生成80象素的高度，不可能控制行間距或字間距，我們不能在屏幕上精確定位圖象的位置。 但是現(xiàn)在，樣式表使這一切都成為可能。而即將推出的新的CSS功能更令人興奮。以后4天內，你將會明白我所說的意味著什么。 你可以制作出體積更小下載更快的網(wǎng)頁 還有更好的消息：樣式表只是簡單的文本，就象HTML那樣。它不需要圖象，不需要執(zhí)行程序，不需要插件，不需要流式。它就象HTML指令那樣快。 有了CSS之后，以前必須求助于GIF的事情現(xiàn)在通過CSS就可以實現(xiàn)。還有，正如我先前提到的，使用串接樣式表可以減少表格標簽及其它加大HTML體積的代碼，減少圖象用量從而減少文件尺寸。 你可以更快更容易地維護及更新大量的網(wǎng)頁。 沒有樣式表時，如果我想更新整個站點中所有主體文本的字體，我必須一頁一頁地修改每張網(wǎng)頁。即便站點用數(shù)據(jù)庫提供服務，我仍然需要更新所有的模板，而且更新每一模板中每一個實例實例的。 樣式表的主旨就是將格式和結構分離。利于樣式表，我可以將站點上所有的網(wǎng)頁都指向單一的一個CSS文件，我只要修改CSS文件中某一行，那么整個站點都會隨之發(fā)生變動。 瀏覽器將成為你更友好的界面。 不象其它的的網(wǎng)絡技術，樣式表的代碼有很好的兼容性，也就是說，如果用戶丟失了某個插件時不會發(fā)生中斷，或者使用老版本的瀏覽器時代碼不會出現(xiàn)雜亂無章的情況。 只要是可以識別串接樣式表的瀏覽器就可以應用它。 怎么樣，樣式表的確是一個很不錯的注意吧？ 那么，現(xiàn)在我們就開始制作一份樣式表。 zzz1.3 你的第1張樣式表 現(xiàn)在我們就開始制作樣式表。 打開你最喜歡的HTML編輯器生成基本的網(wǎng)頁： 很好?，F(xiàn)在，讓我們給它加一些樣式表。只需在最初的和 標簽之間插入以下代碼：
從瀏覽器中打開頁面，你將會看到：
Amaze your friends! Squash your enemies!
做得很好！你已經(jīng)制作出了你的第1份樣式表支持的網(wǎng)頁。
（如果"amaze your friends!"一行的背景不是黃色，則說明你需要升級你的瀏覽器，否則你將無法學完整個教程。建議你安裝Netscape Communicator或者Internet Explorer 4）
一些術語
讓我們學習一下這些新的編碼：
串接樣式表的核心是規(guī)則。最簡單的規(guī)則就象這樣：?
| H1 { color: green } |
整個規(guī)則告訴瀏覽器將所有包圍的文字以綠色顯示。 到 。 H1, P, BLOCKQUOTE 這項規(guī)則設定所以位于 和 相關閱讀
熱門文章
人氣排行
DIV CSS完美兼容IE6/IE7/FF的通用方法
CSS實例：list-style-type在IE與FF中奇怪的現(xiàn)象解析-CSS布局實例
CSS實例:通過定義漸變邊框給圖片加陰影
CSS常用技巧之一 禁止文字自動換行
網(wǎng)頁頁面設計中CSS十大注意
解決用CSS控制DIV居中失效的問題
css div設置float后高度不能自動增加
讓CSS兼容IE和Firefox的技巧集合
每一條規(guī)則包含一個選擇及說明。在上述例子中，H1就是選擇，它是一個附帶樣式功能的HTML標簽。說明用于定義實際的樣式，包括兩部分：屬性（本例中即color）和參數(shù)（green）。
任何HTML標簽都可用作標簽。所以你可以將樣式表的信息附加到任何要素。從通常的及內容。你甚至可以通過將樣式表用于
將串接樣式表的屬性用于圖象。
從我們的第1個樣式表實例中可以發(fā)現(xiàn)，你可以歸類樣式表的規(guī)則。我們將3種不同的說明都用于
與之類似，你也可以歸類選擇：
{ font-family: arial }、
關鍵詞標簽：第一,樣式,精通,可以,
DIV+CSS網(wǎng)頁布局常用的一些基礎知識整理
完美解決CSS網(wǎng)頁水平居中
XHTML+CSS兼容解決方案
CSS網(wǎng)頁布局困擾新手的八個問題
相關下載