第七章第七章

第7章CSS樣式網(wǎng)頁設計與制作DreamweaverCC標準教程本章學習的主要內(nèi)容：1.CSS樣式構造規(guī)則及意義2.利用CSS設計器創(chuàng)建各種樣式3.利用CSS設計器創(chuàng)建文本導航條4.利用CSS設計器創(chuàng)建CSS過渡效果5.利用CSS設計器創(chuàng)建CSS動畫效果7.1CSS樣式CSS（CascadingStyleSheet）樣式稱為層疊樣式表。CSS樣式是描述網(wǎng)頁元素格式的一組規(guī)則，用于設置和改變HTML語言網(wǎng)頁的外觀。7.1CSS樣式7.1.1CSS樣式標準7.1.2CSS樣式構造規(guī)則7.1.3CSS樣式種類7.1.4CSS樣式應用范圍7.1.1CSS樣式標準CSS樣式是W3C組織定義的HTML語言網(wǎng)頁外觀描述的方法。1996年12月，CSS1.0規(guī)范正式發(fā)布，成為W3C的推薦標準。1998年5月，CSS2.0規(guī)范出版。2001年5月，W3C開始制定CSS3.0規(guī)范的草案，該規(guī)范至今沒有定稿。CSS3.0是最新的CSS標準。采用CSS樣式不僅可以對一個網(wǎng)頁的布局、字體、圖像、

背景及其它元素外觀進行精確控制，還可以對一個網(wǎng)站

的所有網(wǎng)頁進行有效的統(tǒng)一控制。7.1.2CSS樣式構造規(guī)則CSS樣式是由三個要素對象、屬性和屬性值構成的。對象是CSS樣式所作用和控制的網(wǎng)頁元素，屬性是CSS樣式描述和設置對象性質(zhì)的項目，屬性值是屬性的一個實例。Body{font-family：宋體；font-size：15px；color：red；text-decoration：underline；}頁面文字{字體：宋體；大小：15像素；顏色：紅色；裝飾：下劃線}7.1.3CSS樣式種類根據(jù)CSS樣式所控制的網(wǎng)頁元素不同，可以將樣式分為四種形式。當所控制的網(wǎng)頁元素是HTML語言中的某一個特定的標簽時，為此標簽設置的CSS樣式，稱為標簽樣式。當把網(wǎng)頁中或網(wǎng)站中若干元素歸為一類，作為一個整體

來看待，為此類元素設置一個CSS樣式，稱為類樣式。7.1.3CSS樣式種類一個標簽或元素在網(wǎng)站中的不同網(wǎng)頁中，或在一個網(wǎng)頁中的不同位置上，外觀效果不同，則需要先為該特定標簽賦予一個唯一的ID號，然后，再為具有該ID號的標簽設置樣式，稱此樣式為ID樣式。當設置若干個內(nèi)容相同而名稱不同樣式時，或者設置超級

鏈接樣式時，則可以使用復合樣式。7.1.4CSS樣式應用范圍應用CSS樣式涉及3個范圍，在一個標簽中，在一個網(wǎng)頁中，在整個網(wǎng)站中。當CSS樣式寫在一個特定標簽里，只對該標簽發(fā)生作用時，則該樣式被稱為內(nèi)聯(lián)樣式。當CSS樣式只應用于一個網(wǎng)頁時，常常將樣式與網(wǎng)頁存儲在同一個

網(wǎng)頁文檔中，則該樣式僅在一個網(wǎng)頁中起作用，稱為內(nèi)部樣式。由

于這種方法簡單，在平時練習中經(jīng)常使用。7.1.4CSS樣式應用范圍當CSS樣式存在于一個CSS樣式文檔中，獨立于任何一個網(wǎng)頁，為整個網(wǎng)站所擁有，則該樣式在網(wǎng)站中所有的網(wǎng)頁中起作用，稱為外部樣式。當任何一個網(wǎng)頁需要此樣式時，只需將該特定的網(wǎng)頁與CSS文檔鏈接即可。在實際應用中，一般采用外部樣式，保證整個網(wǎng)站外

觀風格和效果的一致性。7.2CSS樣式設計器在DreamweaverCC中，CSS樣式定義和使用有兩種方法。一是應用CSS樣式對話框，二是使用CSS設計器。在CSS設計器中，“源”確定樣式應用范圍，“@媒體“定義媒體查詢，”選擇器”選擇樣式類型和確定樣式名稱，“屬性”定義和選擇

屬性值。7.2CSS樣式設計器7.2.1CSS樣式選擇器7.2.2課堂案例-美好攝影7.2.3CSS樣式的使用7.2.4CSS樣式的編輯7.2.1CSS樣式選擇器1.重建HTML標簽樣式，自動更新2.創(chuàng)建類樣式3.創(chuàng)建ID樣式4.復合樣式7.2.2課堂案例-美好攝影案例學習目標：學習使用各種CSS樣式。案例知識要點：在【CSS設計器】面板中，點擊【源】選項卡中的按鈕，選定樣式的存儲位置；點擊【選擇器】選項卡中的按鈕，設置標簽樣式、ID樣式、類樣式和復合樣式等；點擊【屬性】選項卡中的按鈕，完成屬性的設置。素材所在位置：案例素材/ch07/課堂案例-美好攝影。案例效果如圖7-9和圖7-10所示。7.2.3CSS樣式的使用1.定義內(nèi)部樣式2.移動CSS規(guī)則3.定義外部樣式文件4.附加樣式表文件7.2.4CSS樣式的編輯編輯樣式有2種方法。（1）使用CSS設計器（2）使用【代碼】視圖7.3CSS屬性CSS屬性是CSS樣式的主要內(nèi)容，它控制和改變網(wǎng)頁元素的格式和外觀。本節(jié)以CSS設計器為參照，將CSS屬性分為包括4類：布局、文字、邊框和背景。7.3CSS屬性7.3.1課堂案例-走進臺灣7.3.2用<ul>和<li>設置導航條7.3.3布局7.3.4文字7.3.5邊框7.3.6背景7.3.1課堂案例-走進臺灣案例學習目標：學習設置CSS文字導航條。案例知識要點：在【CSS設計器】面板中，靈活使用【選擇器】，【屬性】中的分類【布局】、【文字】、【邊框】和【背景】，完成CSS樣式屬性的設置。素材所在位置：案例素材/ch07/課堂案例-臺灣之旅。案例效果如圖7-39所示。7.3.2用<ul>和<li>設置導航條<ul>和<li>標簽不僅可以用于無序列表，還可以通過設計CSS樣式完成導航條的制作。在網(wǎng)頁代碼中，<div>標簽之間部分是由<ul>、<li>和<a>標簽構成的導航條結(jié)構，<style>之間的部分是由CSS樣式#nav、#navul、#navli、#navlia和#navlia:hover組成，分別用于完成導航條大小、

去項目列表符號、菜單項目大小、項目鏈接內(nèi)容和鼠標翻

轉(zhuǎn)效果的設置。7.4

CSS過渡效果當頁面元素從一種樣式轉(zhuǎn)換到另一種樣式時所添加的動態(tài)效果，稱為CSS過渡效果。這種效果是由CSS3規(guī)范中的transition屬性實現(xiàn)的。7.4

CSS過渡效果7.4.1CSS樣式私有屬性7.4.2課堂案例-墻體裝飾7.4.3CSS過渡屬性7.4.1CSS樣式私有屬性1.瀏覽器內(nèi)核或引擎瀏覽器內(nèi)核就是瀏覽器所采用的渲染引擎，它決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面的格式信息。當前，主流瀏覽器內(nèi)核包括：Mozilla，WebKit，Opera和Trident等4種。不同的瀏覽器采用不同的內(nèi)核或多個內(nèi)核，如Firefox（火狐）

瀏覽器采用Mozilla內(nèi)核，Safari（蘋果）和Chrome（谷歌）等

瀏覽器采用WebKit內(nèi)核，Opera瀏覽器采用Opera內(nèi)核，IE瀏覽

器采用Trident內(nèi)核，360極速瀏覽器采用WebKit和Trident內(nèi)核。7.4.1CSS樣式私有屬性2.CSS樣式屬性前綴在CSS3規(guī)范中，有些CSS屬性還不能被所有瀏覽器內(nèi)核所采納，尚未成為W3C標準，但在各種瀏覽器內(nèi)核中以其私有屬性前綴方式獲得支持，就構成了CSS樣式的私有屬性。Mozilla內(nèi)核的css前綴為-moz-，WebKit內(nèi)核的css前綴為-webkit-，Opera內(nèi)核的css前綴為-o-，Trident內(nèi)核的css前綴為–ms-。7.4.2課堂案例-墻體裝飾案例學習目標：學習使用CSS過渡效果。案例知識要點：在【CCS過渡效果】面板中，打開【新建過渡效果】對話框，完成新建CSS過渡效果的設置。素材所在位置：案例素材/ch07/課堂案例-養(yǎng)生美容。案例效果如圖7-62所示。7.4.3CSS過渡屬性transition屬性規(guī)定了過渡效果的相關特性，包括4個過渡屬性：transition-property，transition-duration，transition-timing-function和transition-delay。transition-property（過渡屬性）規(guī)定設置過渡效果的CSS屬性名稱，transition-duration（過渡時長）規(guī)定完成過渡效果的時間，transition-timing-function（過渡調(diào)速函數(shù)）規(guī)定過渡

效果的速度曲線，不同的速度曲線具有不同過渡速度效果，transition-delay（過渡延時）定義過渡效果開始時間。7.5

CSS動畫CSS動畫實現(xiàn)元素從一種樣式逐漸變化為另一種樣式的效果。CSS動畫由animation屬性和@keyframes規(guī)則共同完成的。7.5

CSS動畫7.5.1課堂案例—校園統(tǒng)一認證7.5.2animation屬性和@keyframes規(guī)則7.5.1課堂案例—校園統(tǒng)一認證案例學習目標：學習使用CSS動畫效果。案例知識要點：在【CCS設計器】面板中，選擇【屬性】下方按鈕，打開【更多】列表，完成CSS動畫效果的設置。在【代碼】視圖框中，在樣式文檔中建立@keyframes規(guī)則。素材所在位置：案例素材/ch07/課堂案例-校園統(tǒng)一認證。案例效果如圖7-70所示。7.5.2animation屬性和@keyframes規(guī)則animation屬性規(guī)定了動畫的相關特性，包括6個動畫屬性：animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count和animation-direction。animation-name（動畫名稱）規(guī)定與選擇器綁定的keyframe名稱，animation-duration（動畫時長）規(guī)定動畫所花費的時間（秒或毫秒），animation-timing-function（動畫調(diào)速函數(shù)）規(guī)定動畫的速度曲線，animation-delay（動畫延時）規(guī)定在動畫開始的時間，

animation-iteration-count（動畫重復次數(shù)）規(guī)定動畫應該

播放的次數(shù)，animation-direction（動畫方向）規(guī)定是否應

該輪流反向播放動畫。7.5.2animation屬性和@keyframes規(guī)則一般地，該屬性以簡寫格式描述為animation:namedurationtiming-functiondelayiteration-countdirection。與animation屬性配合使用，@keyframes規(guī)則規(guī)定若干CSS樣式位于不同的時間點上，實現(xiàn)不同CSS樣式隨著時間的推移，由當前樣式逐漸改為新樣式的動畫效果。通常用百分比來規(guī)定樣式變化發(fā)生的時間，或用關鍵詞"from"和"to"，等同于0%和100%。7.6練習案例7.6.1練習案例-航空旅游7.6.2練習案例-狗狗俱樂部7.6.3練習案例-養(yǎng)生美容7.6.1練習案例-航空旅游案例練習目標：練習使用各種CSS樣式。案例操作要點：1.打開文檔index1.html。2.將標題“》推薦旅游景點”所在<div>標簽的ID設置為#t1，設置#t1樣式，字體為仿宋體，大小19px，顏色為#597FB4，

字體粗細bolder。3.設置類.m1樣式，字體大小12px，顏色#666。將標題

“》推薦旅游景點”下方的兩段文字應用.m1樣式。7.6.1練習案例-航空旅游4.將文檔index1.html的內(nèi)部樣式移動到樣式表文件travel中。5.再將外部樣式附加到文檔index2.html中，并完成樣式的應用。素材所在位置：案例素材/ch07/練習案例-航空旅游，效果如圖7-74所示。7.6.2練習案例-狗狗俱樂部案例練習目標：練習CSS使用文字導航條。案例操作要點：1.創(chuàng)建樣式表文件dogclub并將所有CSS樣式存放其中。2.在頁面指定位置單插入<div>標簽，其ID為nav，設置#nav樣式，高度為30px，長度與網(wǎng)頁為同寬，上外邊距為372px，位置屬性為絕對。