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