在網(wǎng)頁中加及動(dòng)態(tài)效果課件

7層疊樣式表（CSS）什么是CSSCSS的基本概念CSS（CascadingStyleSheet）就是層疊樣式表。是一種可以精確控制頁面元素樣式的技術(shù)。CSS樣式表的主要優(yōu)點(diǎn)是提供便利的更新功能；通過使用CSS可以實(shí)現(xiàn)改變一個(gè)文件就可以自動(dòng)更新數(shù)百個(gè)使用該樣式的網(wǎng)頁外觀。CSS有以下特點(diǎn)（1）將格式和結(jié)構(gòu)分離HTML語言定義了網(wǎng)頁的結(jié)構(gòu)和各對象的功能，而層疊樣式表通過將定義結(jié)構(gòu)的部分和定義格式的部分分離，使我們能夠?qū)撁娴牟季质┘痈嗟目刂?。?）很強(qiáng)的控制頁面布局的能力HTML語言對網(wǎng)頁對象的控制很有限，如精確定位、行間距、字間距等，這些都可以通過CSS完成。（3）同時(shí)更新許多網(wǎng)頁，比以前更快更容易（4）制作體積更小、下載更快的網(wǎng)頁CSS的類型與基本寫法CSS層疊樣式表的三種類型自定義CSS樣式（也稱為類樣式） 類HTML標(biāo)簽CSS樣式 標(biāo)簽高級CSS選擇器樣式 高級CSS標(biāo)簽可以駐留在以下位置內(nèi)部（或嵌入式）CSS樣式表頭部中<Style>……<Style>內(nèi)聯(lián)樣式CSS樣式表在標(biāo)簽屬性內(nèi)<pstyle=”font-size:16pt”>外部CSS樣式表*.css類型文件建立CSS樣式建立新樣式樣式位置內(nèi)部樣式（本網(wǎng)頁內(nèi)）外部樣式（獨(dú)立的CSS文件）樣式的類型類：可用于任何標(biāo)簽標(biāo)簽：對標(biāo)簽起作用高級：ID、上下文選擇器樣式樣式定義對話框分類參數(shù)——類型類型“類型”類別可以定義CSS樣式的基本字體和類型設(shè)置。選項(xiàng)字體、大小、粗細(xì)、樣式、行高、修飾、顏色等樣式定義對話框分類參數(shù)——背景背景“背景”類別可以定義CSS樣式的背景設(shè)置選項(xiàng)背景顏色、背景圖像，重復(fù)、附件、水平位置、垂直位置樣式定義對話框分類參數(shù)——方框方框“方框”類別可以為用于控制元素在頁面上的放置方式的標(biāo)簽和屬性定義設(shè)置選項(xiàng)寬和高、垂直對齊、文本對齊、文字縮進(jìn)、空格、顯示樣式定義對話框分類參數(shù)——邊框邊框“邊框”類別可以定義元素周圍的邊框的設(shè)置（如寬度、顏色和樣式）選項(xiàng)樣式、寬度、顏色樣式定義對話框分類參數(shù)——列表列表“列表”類別為列表標(biāo)簽定義列表設(shè)置（如項(xiàng)目符號大小和類型）選項(xiàng)類型、項(xiàng)目符號圖像、位置樣式定義對話框分類參數(shù)——擴(kuò)展擴(kuò)展“擴(kuò)展”樣式屬性包括濾鏡、分頁和指針選項(xiàng)選項(xiàng)分頁在打印期間在樣式所控制的對象之前或者之后強(qiáng)行分頁光標(biāo)當(dāng)指針位于樣式所控制的對象上時(shí)改變指針圖像過濾器對樣式所控制的對象應(yīng)用特殊效果（包括模糊和反轉(zhuǎn)）擴(kuò)展——光標(biāo)crosshair——十字光標(biāo)text——文本wait——忙default——定義help——幫助e-resize、w-resize——水平方向尺寸ne-resize、sw-resize——東北方向尺寸n-resize、s-resize——垂直方向尺寸nw-resize、se-resize——西北方向尺寸auto——自動(dòng)Hand——手型inherit擴(kuò)展——過濾器（又稱css濾鏡）“alpha”濾鏡：這個(gè)名字，在flash和photoshop經(jīng)常見到。它們的作用基本類似，就是把一個(gè)目標(biāo)元素與背景混合。你可以指定數(shù)值來控制混合的程度。這種“與背景混合”通俗地說就是一個(gè)元素的透明度。blendtrans濾鏡：它的功能也比較單一，就是產(chǎn)生一種精細(xì)的淡入淡出的效果。blur濾鏡：把它加載到文字上，產(chǎn)生風(fēng)吹模糊的效果，類似立體字，這將為你在網(wǎng)頁上制作立體字標(biāo)題帶來了方便。也可以把blur濾鏡加載到圖片上，能達(dá)到用圖象處理軟件制作的效果?！癲ropshadow”顧名思義就是添加對象的陰影效果。它的實(shí)際效果看上去就象是原來的對象離開了頁面，然后在頁面上顯示出該對象的投影。css的無參數(shù)濾鏡共有六個(gè)（fliph、flipv、invert、xray、gray和light），雖然它們沒有參數(shù)，相對來講，靈活性要差點(diǎn)，但它們用起來更方便，效果也相當(dāng)明顯。用它們可以使文字或圖片翻轉(zhuǎn)、獲得圖片的“底片”效果，甚至可以制作圖片的“x光片”效果。glow濾鏡：使對象的邊緣就產(chǎn)生類似發(fā)光的效果，glow”濾鏡制作這種效果操作非常簡便。mask濾鏡：可以為網(wǎng)頁上的元件對象作出一個(gè)矩形遮罩效果。wave濾鏡：它的作用是把對象按照垂直的波形樣式扭曲的特殊效果。light濾鏡：能產(chǎn)生一個(gè)模擬光源的效果，配合使用一些簡單的javascrpt，使對象產(chǎn)生奇特光照的效果。revealtrans動(dòng)態(tài)濾鏡：是一個(gè)神奇的濾鏡，它能產(chǎn)生23種動(dòng)態(tài)效果，還能在23種動(dòng)態(tài)效果中隨機(jī)抽用其中的一種。用它來進(jìn)行網(wǎng)頁之間的動(dòng)態(tài)切換，非常方便。擴(kuò)展——過濾器（又稱css濾鏡）2.Blur濾鏡語法:Blur(Add=?,Direction=?,Strength=?)MotionBlur濾鏡表現(xiàn)的是一種模糊效果。其ADD屬性是用來確定是否在運(yùn)動(dòng)模糊中使用原有目標(biāo)，其值為0和1，0表示“否”，用于文字，1表示“是”，用于圖像；Direction屬性是模糊移動(dòng)的角度，其值為0至360度；Strength屬性是模糊移動(dòng)的距離。代碼：<fontstyle="font-size:30pt;filter:blur(add=1,direction=30,strength=5);width:100%;color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實(shí)例</b></font>3.Chroma濾鏡語法:{filter:chroma(color=color)}使用”Chroma"屬性可以設(shè)置一個(gè)對象中指定的顏色為透明色，參數(shù)COLOR即要透明的顏色。擴(kuò)展——過濾器（又稱css濾鏡）4.DropShadow濾鏡語法:DropShadow(Color=?,OffX=?,OffY=?,Positive=?)DropShadow濾鏡主要產(chǎn)生重疊效果。其屬性為：color屬性：設(shè)置影子文本的顏色；offX和offY屬性：影子文本下落的位移值；Positive屬性：指定透明象素陰影，布爾型，0為是，1為否。代碼：<fontstyle="font-size:30pt;filter:dropshadow(color=lightgreen,offx=5,offy=3,positive=1);width:100%;color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實(shí)例</b></font>5.Flip濾鏡Flip濾濾鏡主要是產(chǎn)生兩種變換效果，即上下變換和左右變換。FlipV產(chǎn)生上下變換，F(xiàn)lipH產(chǎn)生左右變換。代碼：<fontstyle="font-size:30pt;filter:flipv(color=silver);width:100%;color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實(shí)例</b></font><palign=right><fontstyle="font-size:30pt;filter:fliph(color=silver);width:100%;color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實(shí)例</b></font></p>擴(kuò)展——過濾器（又稱css濾鏡）6.Glow濾鏡語法:Glow(Color=?,Strength=?)Glow濾鏡生成一種光暈效果。屬性：color屬性：光暈顏色；strength：光暈的厚度。代碼：<fontstyle="font-size:30pt;filter:glow(color=gray,strength=4);width:100%;color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實(shí)例</b></font>7.Light濾鏡這個(gè)屬性模擬光源的投射效果。一旦為對象定義了“LIGHT"濾鏡屬性，那么就可以調(diào)用它的“方法(Method)"來設(shè)置或者改變屬性?！癓IGHT"可用的方法有：·AddAmbient加入包圍的光源·AddCone加入錐形光源·AddPoint加入點(diǎn)光源·Changcolor改變光的顏色·Changstrength改變光源的強(qiáng)度·Clear清除所有的光源·Mo