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