前    言

從目前國內互聯網的發展趨勢來看，Web前端開發已經成為一門廣泛應用的技術，各行各業對網站的要求越來越高，對網頁設計開發人纔的需求也大大增加。Web標準和CSS技術已經成為一種潮流和趨勢。

作者結合自己多年積累的相關課程教學經驗和Web開發經驗，編寫了本書。本書是為計算機相關專業的學生以及對網站前端開發感興趣的讀者編寫的，旨在培養讀者的網站開發能力，以適應網絡社會對這方面人纔的需求，讓讀者通過學習，成為一名精通Web前端開發的能手。

本書以作者參與的院級科研項目“校園電子商務網站開發研究”為案例參考背景，將構建商務網站時需要的典型應用作為書中的案例，引入網站前端開發所需要的關鍵技術和開發語言。

本書合理安排了基礎知識和實戰訓練的比例，基礎知識以“夠用”為度，用簡明清晰的語言闡述，結合圖表來表達，符合學生的學習特點和認知規律。

本書重點放在專業技能的訓練上。幾乎每個重要的知識點都有實例供讀者參考練習，並且采用的是人們熟悉的電商網站的精彩部分作為案例。

本書包含三大核心技術，分別是HTML 5、CSS 3和JavaScript。在內容組織方面，共分為9個教學模塊和1個綜合應用案例模塊。

第1章 介紹網站前端設計需要的知識，包括Web基礎知識、網站開發的基本流程及關鍵技術、網站開發人纔需求，以及網站開發工具。

第2章 屬於HTML 5部分，介紹HTML 5的新功能、新增標記和屬性、廢棄標記，以及HTML 5文檔中的常用標記素和HTML 5新增的素。

第3~5章 屬於CSS部分，主要介紹CSS基礎、布局方法和樣式屬性，對主流瀏覽器都支持的也比較成熟的CSS 3的部分屬性做了講解。

第6~8章 屬於JavaScript部分，主要介紹JavaScript語法基礎、函數及其應用、常用的內置對像、常用的文檔對像、常用的窗口對像、事件處理等內容。

第9章 利用JavaScript實現Canvas功能，包括使用Canvas繪制基本圖形、變換圖形及繪制文本等。

第10章 綜合應用案例，主要通過商品購物車功能設計，繫統地介紹HTML 5、CSS樣式和JavaScript腳本編程三項技術的綜合運用。

本書由王黎任主編，張希文、段炬霞、劉軍玲、郭洪榮任副主編，其中王黎編寫第2、3、4、7、8、9、10章，張希文編寫第1章，劉軍玲編寫第5章，段炬霞編寫第6章，邱鼕副教授、呂殿基副教授審稿，編寫過程中參考了很多相關技術資料及經典案例，吸取了許多同仁的寶貴經驗，在此深表謝意！

由於作者水平有限，雖然對內容進行了反復斟酌和修改，但書中不足與疏漏之處在所難免，懇請各位專家和廣大讀者批評指正。作者E-mail：。

編  者

第3章  CSS基礎

 本章要點

* CSS的組成。

* HTML文檔如何調用CSS。

* CSS 3簡介。

學習目標

* 理解CSS的語法規則。

* 掌握選擇符的使用。

* 學會在HTML文檔中使用CSS。

* 初步了解CSS 3。

3.1 
CSS概述

3.1.1 
什麼是CSS

CSS(Cascading Style Sheet，層疊樣式表或級聯樣式表，簡稱樣式表)是一種用來表現HTML文件樣式的計算機語言，是網頁文件的重要組成部分。

網頁的內容由HTML語言決定，利用CSS修飾HTML各個標記的風格，對網素進行精確的格式化控制。

CSS是一種非常靈活的工具，可以實現網頁結構和表現完全分離，CSS樣式類型除了通用的顏色、字體、背景外，還可以控制字符間距、填充距離、大小等大約50種樣式。

CSS樣式表的功能大致可以歸納為以下幾點。

(1)    控制頁面中文字的字體、顏色、大小、間距、風格及位置。

(2)    設置文本塊的行高、縮進，及具有三維效果的邊框。

(3)    可以方便地定位網頁中素，設置不同的背景顏色和背景圖片。

(4)    精確控制網素的位置。

(5)    與素結合布局網頁。

3.1.2 
CSS的發展史

CSS的發展歷史分為4個階段。

(1)    CSS 1。1996年12月，CSS 1正式推出，在這個版本中，已經包含了font的相關屬性、顏色與背景的相關屬性、box的相關屬性等。

(2)    CSS 2。1998年5月，CSS 2正式推出，在這個版本中開始使用樣式表結構。

(3)    CSS 2.1。2004年2月，CSS 2.1正式推出，它在CSS 2的基礎上略微有所改動，刪除了許多諸如text-shadow等不被瀏覽器所支持的屬性。現在使用的CSS基本上都是在1998年推出的CSS 2的基礎上發展而來的。

(4)    CSS 3。2010年開始，CSS 3逐步發布，2011年6月成為W3C推薦標準。

3.1.3 
CSS 3簡介

2001年，W3C就著手進行CSS 3標準的制定了。CSS 3的一個新特點是規範被分為若干個相互獨立的模塊，這有利於及時更新和發布、及時調整模塊的內容。同時，由於受支持設備和瀏覽器廠商的限制，可以有選擇地支持一部分模塊，即支持CSS 3的一個子集。以前網頁中很多效果隻有通過圖片和腳本纔能實現，而利用CSS 3，隻需短短幾行代碼就能完成，如圓角、圖片邊框、文字陰影和盒陰影等效果。

目前，主流瀏覽器如Chrome、Safari、Firefox、Opera，甚至360，都已經支持CSS 3的大部分功能了，IE10也開始全面支持CSS 3。除了HTML 5，CSS 3將是互聯網發展的另一個趨勢。

CSS 3規範並不是獨立的，它重復了CSS的部分內容，在CSS 2的基礎上增加了很多強大的新功能。CSS 3與先前的幾個版本相比，其變化是革命性的，是一個不斷演化和完善的標準，在目前已經完成的部分中，CSS 3新增了很多功能。

(1)    強大的CSS 3選擇符。

通過CSS 3選擇符可以直接指定需要的H素，而不需要在HTML中添加不必要的類名、id等。使用CSS 3選擇符，能夠更完美地實現結構和表現分離，從而設計出簡潔、輕量級的Web頁面。

(2)    可以輕松實現比如圓角、圖片邊框、文字陰影、盒陰影、過渡、動畫等效果。

(3)    盒模型變化。

盒模型在CSS中起著非常重要的作用，過去CSS中的盒模型隻能實現一些基本的功能，但一些特殊的功能需要借助JavaScript來實現。而在CSS 3中，這一點得到了很大的改善，例如，CSS 3中的彈性盒子、實現多列布局等。

(4)    CSS 3支持更多的顏色和更廣泛的顏色，如HSL、CMYK、HSLA和RGBA。其中HSLA和RGBA還增加了透明通道，能輕松地改變任素的透明度。

(5)    輕松定制個性化字體。

瀏覽器對Web字體有諸多限制，CSS 3重新引入了@font-face。@font-face是連接服務器上字體的一種方式，這些嵌入的字體能變成瀏覽器的安全字體而得到正常顯示。

(6)    可以對H素進行旋轉、縮放、傾斜、移動等。

3.2 
CSS的組成

3.2.1 
基本語法規則

CSS是一個純文本文件，可以“.CSS”為擴展名作為單獨文件來使用，它的內容包含了一組告訴瀏覽器如何安排和顯示HTML標簽中內容的規則。CSS規則由3個部分構成：選擇符、屬性和屬性的取值。

語法：

選擇符{屬性1:屬性值; 屬性2:屬性值;}

(1)    選擇符是CSS的核心，可以是需要改變樣式的HTML標記。將HTML標記作為選擇符定義後，則在HTML頁面中，該標記下的內容都會按照CSS定義的規則顯示在瀏覽器中。

(2)    屬性和值的組合稱為聲明，表示選擇符中要改變的規則。例如：

p{font-size:18px;font-old:18px; font-family:"宋體";}

其中p為選擇符，而介於{}中的所有內容為屬性聲明塊。上述代碼表示

 注意：CSS樣式表中的注釋語句是以“/*”開頭，以“*/”結尾的。

3.2.2 
選擇符的分類

CSS通過選擇符對不同的HTML標記賦予各種樣式的聲明，來實現各種網頁效果。CSS選擇符根據功能可以分為基礎選擇符、偽類選擇符、層次選擇符和屬性選擇符。

1．基礎選擇符

基礎選擇符是CSS中基礎、常用的選擇符，從CSS誕生開始就一直存在，供Web前端開發者快速地進行素的查找和定位。CSS基礎選擇符主要包括通配符選擇符、標記選擇符、類選擇符及id選擇符。

(1)    通配符選擇符(*)。

如果想讓一個頁面中所有的HTML標記使用同一種樣式，可以使用通配符選擇符，這樣定義的樣式對所有的HTML標記都起作用。其語法格式如下：

*{property:value;}

其中的“*”在CSS中代表“所有”，用來選擇所有的HTML標記。例如：

*{font-size:18px;font-old:16px;}

表示將網頁素的字體定義為16像素。在實際應用中，一般需要進行樣式的初始設置，如素的外邊距和內邊距定義為0，代碼如下：

*{margin:0; padding:0;}

(2)    標記選擇符。

標記選擇符是CSS選擇符中常見且基本的選擇符，HTML頁面中的所有標記都可以作為標記選擇符，例如定義網頁裡素中的文字大小、顏色和行高，用於聲明頁面中所有

標簽的樣式。代碼如下：

p{font:12px; color:#000; line-height:18px;}

(3)    類選擇符。

標記選擇符一旦聲明，則頁面中的所有該標記都相應地產生變化，所以隻依賴標記選擇符不能滿足開發者的需要，這時可以使用類選擇符，把素分類定義成不同的樣式。在定義類選擇符時，在自定義名稱的前面需要加一個點號(.)，例如：

.header{color:#ff0000; text-align:center;}

調用時隻須在標記內使用class屬性進行引用，例如：

類選擇符

由

標記的class屬性引用類選擇符。該

標記中的文字為紅色居中對齊。

另外，類選擇符也可以被其他標記多次引用。

 注意：類選擇符名稱的個字符不能使用數字，否則，該樣式就無法在瀏覽器中起作用。

【例3-1】使用類選擇符，代碼如下：

   

類選擇符1

類選擇符2

類選擇符3

IE瀏覽器中的預覽效果如圖3-1所示。

圖3-1  用類選擇符來定義樣式

該例中，定義了三個類選擇符，分別是one、two和three。類選擇符的具體名稱自行命名，可以是任意英文字符串，或以英文開頭的與數字的組合，一般情況下，采用具有語義的縮寫。

(4)    id選擇符。

id選擇符用來對某素定義。一個網頁文件中，隻能有一個標記使用某個id選擇符。定義id選擇符的語法格式如下：

#idvalue{property:value;}

idvalue是選擇符名稱，在定義名稱的前面加一個井號(#)，由HTML標記的id屬性引用。id屬性在文檔中具有性。例如：

#main{background-color:#ccc;}

調用方法：

這表示該

【例3-2】使用id選擇符，代碼如下：

 

This is a paragraph of
introduction.

This
is a paragraph.

This is a paragraph.

IE瀏覽器中的預覽效果如圖3-2所示。

圖3-2  用id選擇符定義樣式

 說明：與類選擇符相比，使用id選擇符定義樣式是有一定局限性的，類選擇符和id選擇符的主要區別如下。

①
類選擇符可給任意多個標記定義樣式，但id選擇符在頁面標記中隻能使用一次。

② id選擇符比類選擇符具有更高的優先級，即當id選擇符與類選擇符發生衝突時，優先使用id選擇符定義的樣式。

2．偽類選擇符

偽類選擇符也是選擇符的一種，偽類是以“:”來表示的，但是用偽類定義的CSS樣式並不是作用在HTML標記上，而是作用在標記的某種狀態上。偽類選擇符與類選擇符的區別是：類選擇符可以自由命名，而偽類選擇符是CSS中已經定義好的選擇符，不能隨便命名和定義。其語法格式如下：

:偽類選擇符{屬性1:值; 屬性2:值;}

由於很多瀏覽器支持不同類型的偽類，並且沒有統一的標準，所以很多偽類都不常用。偽類包括如下幾種。

(1)    :first-child—&mdash素的個子對像的樣式。

(2)    :link——設置a對像未被訪問時的樣式。

(3)    :visited——設置a對像在其鏈接地址已被訪問過時的樣式。

(4)    :hover——設置a對像在鼠標懸停時的樣式。

(5)    :active——設置a對像在被用戶激活(鼠標單擊與釋放之間發生的事件)時的樣式。

(6)    :focus—&mdash素獲取焦點時的樣式。

(7)    :lang——設置對像使用特殊語言時的內容的樣式。

有些偽類是主流瀏覽器都支持的，就是超鏈接的偽類：:link、:visited、:hover和:active。這些偽類常用在標記上，表示超鏈接4種不同的狀態。:link為未訪問超鏈接、:visited為已訪問超鏈接、:hover為鼠標停留在超鏈接上和:active為激活超鏈接。