第11章CSS層疊樣式表_第1頁
第11章CSS層疊樣式表_第2頁
第11章CSS層疊樣式表_第3頁
第11章CSS層疊樣式表_第4頁
第11章CSS層疊樣式表_第5頁
已閱讀5頁，還剩10頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

第11章

CSS層疊樣式表

（6課時）了解CSS概念、作用和優(yōu)點(diǎn)掌握CSS的類型及CSS沖突的處理掌握使用CSS控制頁面布局教學(xué)目標(biāo)：教學(xué)重難點(diǎn)：要將頁面整體布局好，必須熟悉使用CSS控制頁面布局1、CSS的概念：CSS是CascadingStyleSheets(層疊樣式表)的簡稱.利用它可以對網(wǎng)頁中的文本內(nèi)容進(jìn)行精確的格式化控制.2、為什么要應(yīng)用CSS：彌補(bǔ)HTML對網(wǎng)頁格式化功能的不足，例如：段落間距，行距等；字體變化和大??；頁面格式的動態(tài)更新；排版定位等。一、CSS的介紹3、應(yīng)用CSS樣式的優(yōu)點(diǎn)：

將格式和結(jié)構(gòu)分離；以前所未有的能力控制頁面布局；制作體積更小、下載更快的網(wǎng)頁；將許多網(wǎng)頁同時更新，比以前更快更容易；瀏覽器將成為更友好的界面。二、CSS的類型：1、類樣式：用戶可以在文檔的任何區(qū)域或文本中應(yīng)用類樣式。如果將類樣式應(yīng)用于一整段文字，那么會在相應(yīng)的標(biāo)簽中出現(xiàn)Class屬性，該屬性值即為類樣式名稱。如果將類樣式表應(yīng)用于部分文字上，那么會出現(xiàn)<Span>和</Span>標(biāo)簽，并且其中包含有Class屬性。

2、標(biāo)簽樣式：定義的層疊樣式表將只應(yīng)用于選擇的標(biāo)簽。3、高級樣式：為特殊的組合標(biāo)簽定義層疊樣式表，使用ID作為屬性，以保證文檔具有惟一可用的值。常用的有4種：a:link：設(shè)定正常狀態(tài)下鏈接文字的樣式。a:active：設(shè)定鼠標(biāo)單擊時鏈接的外觀。a:visited：設(shè)定訪問過的鏈接文字的樣式。a:hover：設(shè)定鼠標(biāo)放置在鏈接文字之上時，文字的外觀。三、創(chuàng)建CSS樣式表文件及基本寫法：在<Head></Head>內(nèi)的實現(xiàn)并以<Style>開始</Style>束。在Body內(nèi)的實現(xiàn)在文件外的調(diào)用，是一個單獨(dú)的文件：<linkrel=“stylesheet

href=“style.css”type=“text/css”>四、CSS的屬性1、類型屬性、背景屬性、區(qū)塊屬性、邊框?qū)傩?、方框?qū)傩?、列表屬性、定位屬性、擴(kuò)展屬性2、CSS濾鏡的使用：1、Alpha濾鏡：用來設(shè)置對象的透明度。Alpha(Opacity=?,Finishopacity=?,Style=?,StartX=?,StartY=?,FinishX=?,FinishY=?)Opacity:設(shè)置透明度的級別范圍是0--100FinishOpacity:設(shè)置漸變的透明的效果，用來指定結(jié)束時的透明度，范圍是0—100

Style:設(shè)置漸變透明的樣式0(統(tǒng)一形狀)1(線形)2(放射狀)3(長方形)

StartX和StartY代表漸變透明效果的開始X和Y坐標(biāo)

FinishX和FinishY代表漸變透明效果結(jié)束X和Y坐標(biāo)2、Blur濾鏡用來設(shè)置對象的模糊程度

Blur(Add=?,Direction=?,Strength=?)

Add設(shè)置是否單方向模糊，此參數(shù)是布爾值，true(1)或false(0)Direction設(shè)置模糊的方向0:代表垂直向上，然后每45度為一個單位,默認(rèn)為270度.

Strength代表模糊的像素值

3、Chroma濾鏡

將指定的顏色設(shè)置為透明

Chroma(color=?)color指要設(shè)置為透明的顏色4、DropShadow濾鏡產(chǎn)生陰影效果

DropShadow(color=?,offx=?,offY=?,Positive=?)color指定陰影的顏色

offx指定陰影相對于元素在水平方向的偏移量

offY指定陰影相對于元素在垂直方向的偏移量

Positive是布爾值0表示建立內(nèi)陰影1表示建立外陰影7、Gray濾鏡作用是去掉圖象的色彩，顯示灰度圖象

8、Invert濾鏡反轉(zhuǎn)(Intert)圖象的顏色，產(chǎn)生類似底片的效果9、shadow濾鏡該濾鏡可以建立對象的陰影效果

shadow(Color=?,Direction=?)color為陰影的顏色，

Direction是設(shè)置投影的方向,0代表向上,45為一個單位,默認(rèn)值為225.10、Wave濾鏡產(chǎn)生波紋效果Wave(Add=?,Freq=?,LightStrength=?,Phase=?,Strength=?)Add表示是否顯示對象0表示不顯示非0表示顯示對象

Freq用來設(shè)置波動的個數(shù)

LightStrength設(shè)置波浪效果的光照強(qiáng)度，從0--1000表示最弱，100表示最強(qiáng)總結(jié)：

本章重點(diǎn)介紹了在Dreamweaver中CSS樣式的使用方法，CSS在網(wǎng)頁制作方面是一項非常重要的技術(shù)，請同學(xué)們根據(jù)不同的需要將CSS技術(shù)應(yīng)用到網(wǎng)頁頁面中更進(jìn)一步地對頁面美化及文本格式進(jìn)行精確定制。課堂作業(yè)：打開CSS樣式面板的快捷鍵是________。下列關(guān)于CSS樣式與HTML樣式的不同之處說法正確的是_____。A、HTML樣式格式只影響應(yīng)用它的文本或使用所選HTML樣式創(chuàng)建的文本。B、CSS樣式只可以設(shè)置文本字體樣式C、HTML可以設(shè)置網(wǎng)頁背

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論