《Web應(yīng)用開發(fā)》課件-08 CSS樣式

本章簡(jiǎn)介：通過(guò)CSS的樣式定義，可以將網(wǎng)頁(yè)制作得更加絢麗多彩。本章主要對(duì)CSS的技術(shù)應(yīng)用進(jìn)行了講解。通過(guò)這些內(nèi)容的學(xué)習(xí)，可以使設(shè)計(jì)者輕松、有效地對(duì)頁(yè)面的整體布局、顏色、字體、鏈接、背景以及同一頁(yè)面的不同部分、不同頁(yè)面的外觀和格式等效果進(jìn)行精確的控制。08CSS樣式課堂學(xué)習(xí)目標(biāo)了解CSS樣式掌握CSS屬性的應(yīng)用方法和技巧熟練運(yùn)用CSS過(guò)濾器8.1CSS樣式概述“CSS樣式”面板

CSS樣式的類型8.1.1“CSS樣式”面板“CSS設(shè)計(jì)器”面板，按Ctrl+Shift+Alt+P組合鍵切換到“CSS樣式”面板?！癈SS樣式”面板由樣式列表和底部的按鈕組成。樣式列表用于查看與當(dāng)前文檔相關(guān)聯(lián)的樣式定義以及樣式的層次結(jié)構(gòu)?！癈SS樣式”面板可以顯示自定義CSS樣式、重定義的HTML標(biāo)簽和CSS選擇器樣式的樣式定義。“CSS樣式”面板8.1.2CSS樣式的類型層疊樣式表是一系列格式規(guī)則，它們控制網(wǎng)頁(yè)各元素的定位和外觀，實(shí)現(xiàn)HTML無(wú)法實(shí)現(xiàn)的效果。1.

HTML標(biāo)簽樣式2.CSS選擇器樣式8.2CSS屬性類型背景區(qū)塊方框邊框列表定位擴(kuò)展過(guò)渡課堂案例—打印機(jī)網(wǎng)頁(yè)8.2.1類型“類型”分類主要是定義網(wǎng)頁(yè)中文字的字體、字號(hào)、顏色等?！邦愋汀边x項(xiàng)面板8.2.2背景 “背景”分類用于在網(wǎng)頁(yè)元素后加入背景圖像或背景顏色?！氨尘啊边x項(xiàng)面板8.2.3區(qū)塊“區(qū)塊”分類用于控制網(wǎng)頁(yè)中塊元素的間距、對(duì)齊方式和文字縮進(jìn)等屬性。塊元素可以是文本、圖像和層等?！皡^(qū)塊”選項(xiàng)面板8.2.4方框CSS將網(wǎng)頁(yè)中所有的塊元素可被看成包含在盒子中，這個(gè)盒子分成4部分?！胺娇颉睂傩耘c“邊框”屬性都是針對(duì)盒子中的各部分的?！胺娇颉边x項(xiàng)面板8.2.5邊框 “邊框”分類主要針對(duì)盒子邊框?！斑吙颉边x項(xiàng)面板8.2.6列表“列表”分類用于設(shè)置項(xiàng)目符號(hào)或編號(hào)的外觀?！傲斜怼边x項(xiàng)面板8.2.7定位“定位”分類用于精確控制網(wǎng)頁(yè)元素的位置，主要針對(duì)層的位置進(jìn)行控制。“定位”選項(xiàng)面板8.2.8擴(kuò)展“擴(kuò)展”分類主要用于控制鼠標(biāo)指針形狀、控制打印時(shí)的分頁(yè)以及為網(wǎng)頁(yè)元素添加濾鏡效果，但它僅支持IE瀏覽器4.0或更高的版本?！皵U(kuò)展”選項(xiàng)面板8.2.9過(guò)渡“過(guò)渡”分類主要用于控制動(dòng)畫屬性的變化，以響應(yīng)觸發(fā)器事件，如懸停、單擊和聚焦等?！斑^(guò)渡”選項(xiàng)面板8.2.10課堂案例—打印機(jī)網(wǎng)頁(yè)

使用“表格”按鈕，插入表格效果；使用“屬性”面板，為文字添加空鏈接；使用“CSS樣式”命令，設(shè)置翻轉(zhuǎn)效果的鏈接。效果圖8.3過(guò)濾器CSS的靜態(tài)過(guò)濾器課堂案例—愛插畫網(wǎng)頁(yè)8.3.1CSS的靜態(tài)過(guò)濾器CSS中有靜態(tài)過(guò)濾器和動(dòng)態(tài)過(guò)濾器兩種過(guò)濾器。靜態(tài)過(guò)濾器使被施加的對(duì)象產(chǎn)生各種靜態(tài)的特殊效果。8.3.2課堂案例—愛插畫網(wǎng)頁(yè)

使用“Alpha濾鏡”命令，把圖像設(shè)定為透透明效果。效果圖課堂練習(xí)—優(yōu)選購(gòu)物網(wǎng)頁(yè)使用“項(xiàng)目列表”按鈕，創(chuàng)建無(wú)序列表；使用“屬性”面板，創(chuàng)建空白鏈接；使用“CSS樣