當(dāng)今的世界已經(jīng)全面進入了網(wǎng)絡(luò)時代，可以說，我們?nèi)粘Ｉ钪忻刻於茧x不開網(wǎng)絡(luò)：通過即時通訊工具，比如MSN、QQ等，人們彼此可以方便地溝通；利用Outlook、Foxmail等，學(xué)生和白領(lǐng)可以自如地處理自己的電子郵件，讓工作效率大為提高；在大大小小的電子商務(wù)網(wǎng)站上選購自己喜歡的商品，用網(wǎng)上支付的方式，時尚一族可以迅速的得到自己心儀的商品；特別是，每一個網(wǎng)民都會通過網(wǎng)絡(luò)來快速地獲取世界上最新發(fā)生的新聞和動態(tài)。正是網(wǎng)絡(luò)把我們拉得更近，讓世界更小?？墒?，在享受網(wǎng)絡(luò)社會的便利的同時，你有沒有想過，在網(wǎng)上沖浪瀏覽網(wǎng)頁的時候，我們的眼睛看到了什么？而又是什么讓這些豐富多彩的網(wǎng)頁呈現(xiàn)出來？
1.1 CSS是什么
設(shè)想這樣一個場景：我們要用Word寫一篇文檔。首先，打開Word，然后，輸入內(nèi)容，再跟據(jù)需要把內(nèi)容的題目居中、字體變大，最后還會調(diào)整各段的字體、大小、顏色甚至每行之間的距離。修改完成，我們會把這篇文檔保存，形成一個后綴名為doc或者docx的文件。這個Word文件可以說是由兩大部分：內(nèi)容和格式組成。同樣的，我們?yōu)g覽網(wǎng)頁所看到的Html文件也是由內(nèi)容和格式組成的。網(wǎng)頁上的文字和圖片是內(nèi)容，文字的字體、大小、顏色等等都是格式。樣式表就是控制網(wǎng)頁格式的技術(shù)。
樣式表，英文名稱叫做Style Sheet，也有的人稱之Cascading Style Sheet，把這三個單詞的首字母連起來，就是樣式表的英文簡稱CSS，這正是本章名字中那三個大寫字母的來歷。 在網(wǎng)頁制作的時候采用CSS技術(shù)，可以有效地對網(wǎng)頁的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。
1.1.1 什么是Cascade
我們看到，CSS的全稱英文中有一個單詞Cascading，應(yīng)該是Cascade的分詞形式，那么這個詞是什么意思呢？讓我們首先查一下英文詞典。
Cascade
名詞：小瀑布， 噴流，層疊
動詞：成瀑布落下
取名詞的含義，所以樣式表又叫做層疊樣式表。關(guān)于層疊在電腦世界中的含義。我們先來看一個小實驗。
窗口的層疊（Cascad e）排列方式
1.1.2 層疊的樣式
前文解釋了層疊在電腦世界中的意思，對于樣式表，為什么要在前面加上層疊兩字呢？原來，這和樣式表的生效方式有關(guān)系。
我們知道，網(wǎng)頁由內(nèi)容本身以及內(nèi)容的樣式組成。對內(nèi)容樣式的設(shè)置可以在某一段內(nèi)容前面進行；也可以是整個網(wǎng)頁的開頭部分 – 這樣可以控制整個網(wǎng)頁的樣式；更可以是單獨的一個樣式表文件 – 這樣可以控制很多網(wǎng)頁的樣式。當(dāng)我們用瀏覽器打開這個網(wǎng)頁的時候，瀏覽器負(fù)責(zé)把內(nèi)容加上樣式顯示給我們的肉眼。在給內(nèi)容應(yīng)用樣式的過程中，瀏覽器首先查看這段內(nèi)容前面有沒有樣式的設(shè)置，如果沒有就會查看網(wǎng)頁的開頭部分有否樣式的設(shè)置，如果還沒有就最后查看單獨的樣式表文件是否存在。這個過程好比一個流水線，也好像我們查找桌面上很多層疊窗口從而發(fā)現(xiàn)所需要的窗口的過程，因此，樣式表也就叫做層疊樣式表。
1.1.3 表的作用
我們大概都見過或者使用過微軟的Excel，用它來記錄財務(wù)上的消費支出真是很方便。比如，某一天，我的個人帳本會記載，早飯吃一個肉夾饃，3元；一碗小米粥，1元。這樣就形成了一張表格，當(dāng)我過了幾天回來查看這個文檔，我就能對當(dāng)時的情況有所了解。實際上，類似Excel軟件所處理的這類文檔統(tǒng)稱為Spread Sheet。
層疊樣式表也是一樣，在它里邊記錄了網(wǎng)頁這一段內(nèi)容該用什么樣式來顯示，而那一段內(nèi)容要用什么樣式來顯示，這樣最終也形成了一個表格，當(dāng)我們看到這個樣式表文件時，腦海里也能浮現(xiàn)出網(wǎng)頁顯示時候的大致樣子。
講到這里，我們基本明白了CSS是什么的問題，讓我們來溫習(xí)一下：層疊樣式表，又叫做CSS，是在網(wǎng)頁制作的時候采用的一種技術(shù)，利用它可以有效、靈活地對網(wǎng)頁的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。
1.2 CSS的發(fā)展歷程
有句外國諺語說的好：“羅馬不是一天建立起來的”。CSS也是一樣，而且它和互聯(lián)網(wǎng)上的主要文檔格式 --- HTML語言密不可分，因此，了解CSS的發(fā)展歷程，首先要從互聯(lián)網(wǎng)和HTML的產(chǎn)生說起。讓我們回到互聯(lián)網(wǎng)誕生初期。
1.2.1 關(guān)于HTML
HTML，英文全稱Hypertext Markup Language，中文意思也就是超文本鏈接標(biāo)示語言。是WWW（Word Wide Web）的通用描述語言。
互聯(lián)網(wǎng)的基本組成部分就是Web頁面，而Web頁面一般都是由HTML來書寫的。舉個比方，我們所生存的世界上生活著很多種民族，但是聯(lián)合國開會的時候標(biāo)準(zhǔn)語言只有那么幾種：英語，漢語等等，這是大家共同交流的基礎(chǔ)。HTML就起到了類似這種標(biāo)準(zhǔn)的溝通方式的作用。
HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結(jié)構(gòu)包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內(nèi)容。
1.2.2 設(shè)計HTML的目的
HTML產(chǎn)生的原因很簡單。當(dāng)年，歐洲粒子物理研究中心（簡稱CERN，如果你看過丹?布朗的小說《達(dá)芬奇密碼》，應(yīng)該對這個縮寫有所耳聞）的一位研究員為了能把存放在一臺電腦中的文本或圖形與另一臺電腦中的文本或圖形方便地聯(lián)系在一起，形成有機的整體，使得使用者不用考慮具體信息是在當(dāng)前電腦上還是在網(wǎng)絡(luò)的其它電腦上，設(shè)計了HTML語言。在瀏覽HTML代碼編寫成的網(wǎng)頁時，只需使用鼠標(biāo)在文檔中單擊一個圖標(biāo)或者鏈接，馬上就會轉(zhuǎn)到與此圖標(biāo)相關(guān)的網(wǎng)頁內(nèi)容，這些信息很可能存放在網(wǎng)絡(luò)的另一臺電腦中。
1.2.3 HTML的特點
HTML很簡單，因此易于學(xué)習(xí)。它允許網(wǎng)頁制作人用簡單的文字標(biāo)記，不需要復(fù)雜的邏輯處理就可以建立文本與圖片相結(jié)合的復(fù)雜頁面，制作網(wǎng)頁不需要了解過程、類、繼承、堆棧等等高深的計算機知識，非常適合普通人來學(xué)習(xí)。
HTML語言還需有通用性，用HTML書寫的網(wǎng)頁可以被網(wǎng)上任何其他人瀏覽到，無論瀏覽者使用的是什么系統(tǒng)的電腦或什么版本的瀏覽器。編輯HTML頁面可以用一般的文字處理器（如Microsoft Word\記事本\寫字板等等）以及HTML的語法知識?，F(xiàn)在還有很多的專業(yè)HTML編輯工具，比如Adobe公司的Dreamweaver等等。有了以上這些工具，你甚至不用手工敲入任何代碼，就可以獲得一個非常漂亮的網(wǎng)頁框架（當(dāng)然，文字內(nèi)容還是需要手工輸入的）。
1.2.4 CSS的傳奇歷程
CSS的傳奇開始于1994年。當(dāng)時，由CERN發(fā)明的互聯(lián)網(wǎng)已經(jīng)有了一些電子出版方面的應(yīng)用。但是，既然作為一個可以發(fā)布電子出版物的平臺，互聯(lián)網(wǎng)還是缺少一個很重要的部分，那就是文檔的格式如何規(guī)范的問題。傳統(tǒng)的印刷文檔都有各自的格式，比如報紙，大標(biāo)題用什么字體，大小多少，圖片的位置，都有章可循?；ヂ?lián)網(wǎng)上的牡迪勻換共瘓弒剛廡└袷。因此，互聯(lián)網(wǎng)的早期發(fā)明人之一，Hakon看到了這樣的一種需求，他決定在已經(jīng)有的成果基礎(chǔ)上，朝這個方向努力。
1.3 建立網(wǎng)站和瀏覽網(wǎng)站
在具體介紹層疊樣式表之前，先了解電腦世界中的幾個基本概念以及建立網(wǎng)站、瀏覽網(wǎng)站的基本過程，將有利于加深對CSS的理解。
下面通過到飯館吃飯的類比，來熟悉服務(wù)的概念。
1.3.1 什么是服務(wù)
我們?nèi)蘸缶庉嫷木W(wǎng)頁文件與Word文檔等其他類型的文件一樣，都存放在電腦的硬盤上。但是，和供自己使用的文檔不同，網(wǎng)頁絕大部分是提供給別人看的。如果讓其它人通過網(wǎng)絡(luò)能夠看到我們辛辛苦苦編寫出來的網(wǎng)頁，則必須把自己的電腦變成一臺能夠提供網(wǎng)頁瀏覽服務(wù)的服務(wù)器。
通俗的說，電腦世界里的服務(wù)和我們?nèi)粘Ｉ钪兴龅降姆?wù)二字在含義上沒有什么區(qū)別。假設(shè)我們要請自己的朋友吃飯，那么有兩種選擇：在家里自己動手或者去外面的飯館。下面分別分析這兩種選擇，看看我們能否通過這樣的類比來深入地了解電腦中服務(wù)的概念。
1.3.2 服務(wù)的場所
無論日常生活還是在電腦世界里，服務(wù)總是有個請求->反饋的過程，這個過程構(gòu)成了服務(wù)這個詞的具體內(nèi)容。
還是拿吃飯來舉例子。請朋友到家里吃飯，可能不如請朋友到外面的飯館去吃，這是因為飯館的服務(wù)更專業(yè)：專業(yè)的廚師進行烹飪，專業(yè)的服務(wù)員端茶送水上菜，還有更適合用餐的專業(yè)環(huán)境等等。同樣地，編寫提供給別人閱覽的網(wǎng)頁，也要專業(yè)、到位的服務(wù)。在IT行業(yè)里，類似“飯館”來提供專業(yè)服務(wù)的設(shè)備，就是服務(wù)器。
1.3.3 創(chuàng)建服務(wù)場所---建立網(wǎng)站
建立網(wǎng)站就是一個創(chuàng)建服務(wù)場所的過程。還是以前文中舉過的飯館為類比，我們知道，開飯館需要考慮很多種要素：要考慮市場（價位如何），面對的群體（商務(wù)宴請還是小區(qū)居民），菜系（四川還是廣東），場所（租金地段），廚師服務(wù)員（工資）等等。建立網(wǎng)站也是一樣的，要考慮網(wǎng)站要做什么的（建立大而全的門戶網(wǎng)站，還是小而精的專業(yè)信息網(wǎng)站），面對的群體（個人網(wǎng)絡(luò)購物，個人交友社區(qū)還是建立單位的一個窗口，讓感興趣的潛在客戶獲得有用的信息），菜系（是用什么技術(shù)來實現(xiàn)這個網(wǎng)站？），場所（網(wǎng)頁存放的服務(wù)器性能如何，用戶流量大不大，方便不方便用戶訪問？），技術(shù)人員等等。當(dāng)然，對于普通的員工來說，用不著考慮那么多的方方面面，但必須需要知道的是技術(shù)方面一個網(wǎng)站是如何建立的。
1.3.4 創(chuàng)建服務(wù)內(nèi)容---網(wǎng)頁的上傳
編輯好的網(wǎng)頁從本地電腦中轉(zhuǎn)移到服務(wù)器空間的過程就是上傳。上傳可以通過多種方式，比如FTP，共享文件夾等。其中最常用的則是FTP方式。
FTP，全稱是File Transfer Protocol，文件傳輸協(xié)議。我們將在下一部分講述協(xié)議的故事，這里讀者只需要知道它是一個可以用來上傳文件的國際標(biāo)準(zhǔn)就可以了。而且我們不需要了解它的具體內(nèi)容，因為有很多支持這個標(biāo)準(zhǔn)的軟件可以供我們使用。比如LeapFTP、CuteFTP等等。利用這些軟件的功能，我們就可以實現(xiàn)網(wǎng)頁的上傳。下面以CuteFTP為例進行介紹。
1.3.5 開啟網(wǎng)頁發(fā)布服務(wù)
服務(wù)器上有了網(wǎng)頁文件，相當(dāng)于飯館有了做好的飯菜，還需要服務(wù)進行客戶的服務(wù)。這個服務(wù)員就是運行在服務(wù)器上的網(wǎng)頁發(fā)布服務(wù)程序。這樣的程序有很多，比如Windows平臺下的Internet Information Services（簡稱IIS）。圖顯示了在Windows服務(wù)器版中打開IIS管理器后的界面。當(dāng)然，也可以直接單擊開始?運行，在輸入框中鍵入inetmgr來啟動它。
IIS管理器界面
1.3.6 用戶瀏覽網(wǎng)站的過程
網(wǎng)站是架設(shè)好了，那么用戶瀏覽網(wǎng)站的過程又是怎樣的呢?
圖顯示了用戶瀏覽某網(wǎng)站的基本過程。
用戶瀏覽網(wǎng)站的基本過程
1.4 CSS在網(wǎng)站開發(fā)框架中的地位
前面講了那么多背景知識，在本節(jié)終于可以開始講述CSS了。首先讀者需要了解的是CSS在網(wǎng)站開發(fā)框架中的地位。表1-1描述了整個網(wǎng)站開發(fā)的基本框架。
1.5 制作CSS需要考慮的問題
從下一章開始，我們就要正式的學(xué)習(xí)編寫CSS來控制網(wǎng)頁的顯示效果了。在具體做每一件事情之前，最好的方法之一就是對其有個總體的把握，另外對可能出問題的地方有所了解。
以下幾個小節(jié)列出了是需要在具體的編寫過程中時常想起的要點。
網(wǎng)站開發(fā)中的基本框架
網(wǎng)站開發(fā)技術(shù)層次
主要技術(shù)
前提條件
產(chǎn)生的結(jié)果
頁面設(shè)計
平面設(shè)計以及工具
客戶的需求，上級的要求
頁面效果圖
頁面制作
HTML、CSS、DOM知識
頁面設(shè)計基本完成
HTML頁面，
或者叫做靜態(tài)頁面
頁面開發(fā)
服務(wù)器端程序開發(fā)知識，比如C#，Java，數(shù)據(jù)庫知識
靜態(tài)頁面基本完成
可以部署到服務(wù)器上的動態(tài)程序，一般以aspx，jsp等為文件名后綴
1.5.1 對于不同用戶的照顧
瀏覽網(wǎng)站的用戶可能來自各個地域，甚至遍布世界各地，因此要充分考慮到他們上網(wǎng)時的習(xí)慣。要知道我們制作的網(wǎng)站絕大部分的目的是為了他們?yōu)g覽的方便，獲得有用的信息。
在這一點上，這幾年也是有相反的案例的。比如，某網(wǎng)站上關(guān)于中國的地圖，臺灣被標(biāo)成了單獨的國家。比如某電子商務(wù)網(wǎng)站的價格誤標(biāo)為一個非常的價格，用戶定購后，網(wǎng)站又不承認(rèn)導(dǎo)致產(chǎn)生了官司等等。
用戶的習(xí)慣包括他們使用的語言，風(fēng)俗，貨幣單位等等。在網(wǎng)頁制作方面，語言相對需要考慮的多一些。如果一個進出口貿(mào)易公司的網(wǎng)站只有中文，是不夠的。而特別的，如果該網(wǎng)站的瀏覽用戶中來自中東國家的比較多，阿拉伯版本網(wǎng)站頁面上的文字就要從右到左邊排列。
1.5.2 對于不同瀏覽器的照顧
這一點也可以是對不同用戶照顧的延伸，因為不同的用戶會使用不同的瀏覽器上網(wǎng)。但是由于這常常被很多的網(wǎng)頁和CSS制作者所忽略，有必要單獨列為一點以表示重要。由于不同的瀏覽器對于我們編寫的HTML頁面處理的結(jié)果是不同的，同樣的代碼，在IE下和在Firefox下可能有一些區(qū)別，有的時候，這點點小區(qū)別可能造成大的問題。
對于目前世界上主流瀏覽器的市場占有率情況，可以查看下面的網(wǎng)址：
http://www.w3schools.com/browsers/browsers_stats.asp1.5.3 對于網(wǎng)站瀏覽速度的關(guān)注
除了上面所說的兩點之外，用戶瀏覽網(wǎng)站時的速度也是非常重要的一點。通俗的說，響應(yīng)時間就是用戶輸入網(wǎng)址直到網(wǎng)頁主要部分顯現(xiàn)出來的時間。試想一個效果豐富的網(wǎng)站，如果讓我們等待1分鐘才能打開，這些效果給我們留下的印象也會大打折扣。據(jù)專家介紹，在瀏覽網(wǎng)站的時候，用戶比較滿意的響應(yīng)時間大致在8.6秒之內(nèi)。
造成網(wǎng)站響應(yīng)時間比較慢的原因多種多樣，有用戶本身機器的問題，不過那樣的話，一般來說，用戶瀏覽所有的網(wǎng)站都會有同樣的問題，因此和網(wǎng)頁制作本身無關(guān)。也有服務(wù)器和數(shù)據(jù)庫相應(yīng)的問題，那是程序員等需要考慮的問題。最后一點，就是也和網(wǎng)頁制作以及CSS有關(guān)系。如果我們在頁面中應(yīng)用了很大的圖片，太多的內(nèi)聯(lián)樣式表，導(dǎo)致文件長度變大，在同樣的網(wǎng)絡(luò)條件下，從服務(wù)器端發(fā)送到用戶的瀏覽器這個過程中需要的時間就相應(yīng)延長，從而導(dǎo)致相應(yīng)時間變長，用戶體驗變差。
1.6 小結(jié)
本章首先介紹了HTML的簡單歷史和CSS的一些背景知識，重點是介紹服務(wù)的概念、建立網(wǎng)站的過程、用戶瀏覽網(wǎng)站的一般過程。
所謂服務(wù)，是一些程序，運行在服務(wù)器上，為別的程序、或者最終用戶提供所需要的信息。
建立網(wǎng)站就是一種實現(xiàn)服務(wù)的過程。瀏覽網(wǎng)站則主要包括以下兩個步驟：
用戶請求網(wǎng)頁。
服務(wù)反饋網(wǎng)頁。
本章最后在總體上介紹了CSS制作需要注意的一些問題，主要有如下3點：
對于不同用戶的照顧。
對于不同瀏覽器的照顧。
對于網(wǎng)站瀏覽速度的關(guān)注。
