1.1 第1日
用HTML制作網(wǎng)頁就象是用畫筆繪制一幅圖畫。只有那些對網(wǎng)頁制作癡迷而執(zhí)著的人才可能精確地實(shí)現(xiàn)預(yù)定的結(jié)果,這并不是正確的工具和靈活性就可以實(shí)現(xiàn)的。
任何使用過HTML一個多星期的人都知道HTML是一種非常好的網(wǎng)頁制作工具。所以有時候我們不得不制作體積相當(dāng)大的GIF圖象以獲得想要的字體和布局。同樣,有時候也不得不使用各種表格標(biāo)簽和隱藏的空格GIF圖象以使頁面的布局能達(dá)到預(yù)想的目的。
的確有些荒唐。我們的編碼實(shí)在是太復(fù)雜了,GIF用量越來越多,而我們的頁面變得比英吉利海峽還要寬,互聯(lián)網(wǎng)有限的帶寬怎么可能通過這么寬的信息呢?這種設(shè)計(jì)并不是網(wǎng)頁設(shè)計(jì)的最佳形式。
但是,1996年底的時候悄悄誕生了一種叫做樣式表(stylesheets)的技術(shù)。全稱應(yīng)該是串接樣式表(Cascading
Stylesheets-簡稱CSS)這位HTML的表弟向世人保證:
將對布局、字體、顏色、背景和其它文圖效果實(shí)現(xiàn)更加精確的控制。
只通過修改一個文件就改變頁數(shù)不定的網(wǎng)頁的外觀和格式。
在所有瀏覽器和平臺之間的兼容性。
更少的編碼、更少的頁數(shù)和更快的下載速度。
除了還不能全面支持我們常用的大多數(shù)瀏器之外,CSS在實(shí)現(xiàn)其它承諾方面作得相當(dāng)出色。CSS在改變我們制作樣式表的方法。它為大部分的網(wǎng)頁創(chuàng)新奠定了基石。
之后的5天,我們將漫游樣式表的世界。你將學(xué)到樣式表的基本知識并將其應(yīng)用于你的網(wǎng)頁中。你還將學(xué)到如何處理字體、圖文、色彩、背景及定位等的詳細(xì)技巧。
今天,我們先瀏覽一下樣式表的基本內(nèi)容。第1個問題;樣式表能為我們做什么?
1.2 樣式表能為我們做什么?
那么樣式表有什么特別之處呢?簡而言之,它能幫你做以下事情:
你可以將格式和結(jié)構(gòu)分離。
你可以以前所未有的能力控制頁面布局。
你可以制作體積更小下載更快的網(wǎng)頁。
你可以將許多網(wǎng)頁同時更新,比以前快更容易。
瀏覽器將成為你更友好的界面
你可以將格式和結(jié)構(gòu)分離。
HTML從來沒打算控制網(wǎng)頁的格式或外觀。這種語言定義了網(wǎng)頁的結(jié)構(gòu)和個要素的功能,而讓瀏覽器自己決定應(yīng)該讓各要素以何種模樣顯示。
但是網(wǎng)頁設(shè)計(jì)者要求的更多。所以當(dāng)Netscape推出新的可以控制網(wǎng)頁外觀的HTML標(biāo)簽時,網(wǎng)頁設(shè)計(jì)者無不歡呼雀躍。我們可以用
FACE>、包在
外邊控制文章主體的外觀等等。然后我們將所有東西都放入表格,用隱式GIF空格產(chǎn)生一個20象素的邊距。一切都變得亂七八糟。編碼變得越來越臃腫不堪,要想將什么內(nèi)容迅速加到網(wǎng)頁中變得越來越難。
串接樣式表通過將定義結(jié)構(gòu)的部分和定義格式的部分分離使我們能夠?qū)撁娴牟季质┘痈嗟目刂啤TML仍可以保持簡單明了的初衷。CSS代碼獨(dú)立出來從另一角度控制頁面外觀。
你可以以前所未有的能力控制頁面的布局。
能使我們調(diào)整字號,表格標(biāo)簽幫助我們生成邊距,這都沒錯。但是,我們對HTML總體上的控制卻很有限。我們不可能精確地生成80象素的高度,不可能控制行間距或字間距,我們不能在屏幕上精確定位圖象的位置。
但是現(xiàn)在,樣式表使這一切都成為可能。而即將推出的新的CSS功能更令人興奮。以后4天內(nèi),你將會明白我所說的意味著什么。
你可以制作出體積更小下載更快的網(wǎng)頁
還有更好的消息:樣式表只是簡單的文本,就象HTML那樣。它不需要圖象,不需要執(zhí)行程序,不需要插件,不需要流式。它就象HTML指令那樣快。
有了CSS之后,以前必須求助于GIF的事情現(xiàn)在通過CSS就可以實(shí)現(xiàn)。還有,正如我先前提到的,使用串接樣式表可以減少表格標(biāo)簽及其它加大HTML體積的代碼,減少圖象用量從而減少文件尺寸。
你可以更快更容易地維護(hù)及更新大量的網(wǎng)頁。
沒有樣式表時,如果我想更新整個站點(diǎn)中所有主體文本的字體,我必須一頁一頁地修改每張網(wǎng)頁。即便站點(diǎn)用數(shù)據(jù)庫提供服務(wù),我仍然需要更新所有的模板,而且更新每一模板中每一個實(shí)例實(shí)例的
FACE>。
樣式表的主旨就是將格式和結(jié)構(gòu)分離。利于樣式表,我可以將站點(diǎn)上所有的網(wǎng)頁都指向單一的一個CSS文件,我只要修改CSS文件中某一行,那么整個站點(diǎn)都會隨之發(fā)生變動。
瀏覽器將成為你更友好的界面。
不象其它的的網(wǎng)絡(luò)技術(shù),樣式表的代碼有很好的兼容性,也就是說,如果用戶丟失了某個插件時不會發(fā)生中斷,或者使用老版本的瀏覽器時代碼不會出現(xiàn)雜亂無章的情況。
只要是可以識別串接樣式表的瀏覽器就可以應(yīng)用它。
怎么樣,樣式表的確是一個很不錯的注意吧?
那么,現(xiàn)在我們就開始制作一份樣式表。
zzz1.3 你的第1張樣式表
現(xiàn)在我們就開始制作樣式表。
打開你最喜歡的HTML編輯器生成基本的網(wǎng)頁:
全國職稱計(jì)算機(jī)考試速成過關(guān)系列套裝:W .. 定價:¥133 優(yōu)惠價:¥133.0 更多書籍 | |
全國職稱計(jì)算機(jī)考試速成過關(guān)系列套裝:W .. 定價:¥124 優(yōu)惠價:¥124.0 更多書籍 |