【正文】 image： 指定項目符號的圖形文件名稱，值為 url或 none { liststyletype: square } { liststyletype: none } 252。OL { liststyletype: upperalpha } /* A B C D E etc. */252。OL OL { liststyletype: decimal } /* 1 2 3 4 5 etc. */ 252。OL OL OL { liststyletype: lowerroman } /* i ii iii iv v etc. */23Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?鼠標(biāo)屬性252。讓鼠標(biāo)移到不同對象上面，顯示不同形狀。– Cursor屬性，取值如下?Auto： 自動按默認(rèn)顯示?Crosshair： “＋ ”?Hand:手形?Text： 文本 I形?Wait： 等待?……24Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?練習(xí)：252。若要在網(wǎng)頁上使用使用統(tǒng)一的頁面風(fēng)格：– 背景 為淺藍(lán)灰色（ cdcdfe），– 文本 為深藍(lán)色（ 000066），– 所有 網(wǎng)頁都不留邊 (Margin)，– 且 列表 項目、 表格 及 段落 文本中的字體均為 ； 顏色 ：綠色； 文本對齊 ：居中； 字體 ：楷體,Times New Roman； 文字格式 ：加粗。25Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?練習(xí)：252。編輯一個外聯(lián)樣式表，它使所有網(wǎng)頁中表格的文本顯示為如下風(fēng)格：– 文字大?。?。– 顏色：綠色；– 文本對齊：居中；– 字體：楷體– 文字格式：加下劃線26Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?練習(xí)：252。在上題中，若有一個網(wǎng)頁中的某個表格要采取不同的顯示方式：如– 顏色：藍(lán)色；– 字體：黑體 ,Arial Black– 其他與上題相同，應(yīng)在該頁上使用什么樣式表？27Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?練習(xí)：252。定義一個類選擇符，樣式為：– 文字大小： 12pt。– 顏色：綠色；– 文本對齊：居中；– 字體：楷體， Times New Roman– 文字格式：加粗– 并在多個頁面元素中引用此類樣式。28Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?練習(xí)：252。定義一個偽類選擇符，使超鏈接具有一下特效：– （ 1）超鏈接沒有下劃線；– （ 2）當(dāng)鼠標(biāo)指向超鏈接時，文字從 10pt變成 12pt， 文字加粗；– （ 3）超鏈接文本在單擊前是藍(lán)色，在單擊后是灰色，并變成斜體。29Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?課堂練習(xí)：252。定義一個內(nèi)聯(lián)樣式，使網(wǎng)頁中的所有段落顯示效果如下：– 字的大?。?12px– 字的顏色：＃ 0000ff– 對齊方式為居中– 背景顏色： gray30Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?四、 CSS樣式的單位252。定義長度：符號 數(shù)值 單位（ P132）– 絕對長度單位： cm,mm,in,pt(印刷點數(shù) ),pc等。– 相對長度單位： px（ 像素） ,em,ex。252。百分比單位– 百分比值總是相對于另一個值來說的， 參照值一般是該元素本身的字體尺寸 。252。樣式的單位31Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?四、 CSS樣式的單位252。定義顏色– rgb函數(shù) ： rgb(R,G,B)?R、 G、 B可用百分比值表示，也可用 0~255的整數(shù)值 表示。– 使用十六進(jìn)制數(shù)組 ： RRGGBB– 直接使用顏色名 。color: rgb(100%,0,0)color: rgb(255,0,0)color: FF0000color:red32Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?五、 CSS樣式在網(wǎng)頁中的應(yīng)用252。在網(wǎng)頁中創(chuàng)建樣式，分別創(chuàng)建下列三種樣式– 標(biāo)簽選擇符– 類選擇符– ID選擇符252。在網(wǎng)頁中導(dǎo)入、鏈入樣式表文件33Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?五、 CSS樣式在網(wǎng)頁中的應(yīng)用字體、大小、粗細(xì)、行高、顏色、修飾等背景顏色、圖像、重復(fù)、水平位置等字間距、對齊方式、縮進(jìn)等寬、高、填充、邊界等邊框的樣式、寬度和顏色等設(shè)置項目符號和編號。位置的設(shè)置。設(shè)置濾鏡。34Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?六、用 CSS樣式制作一些特殊效果252。給文字設(shè)置圖形背景：利用層252。文字間的重疊效果：利用兩個層252。首字放大– P:firstletter{……}例例 35Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?七、樣式表的高級應(yīng)用252。 CSS的濾鏡屬性 （ filter） 的應(yīng)用252。應(yīng)用濾鏡制作常見特效– 文字特效– 鼠標(biāo)特效– 圖像特效252。利用 css進(jìn)行頁面布局濾鏡實例濾鏡實例 36Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ? CSS的濾鏡屬性 （ filter） 的應(yīng)用252。樣式表濾鏡的構(gòu)成標(biāo)記標(biāo)記 {FILTER : 濾鏡名（屬性名１＝屬性值１，屬性濾鏡名（屬性名１＝屬性值１，屬性名２＝屬性值２，名２＝屬性值２， ....）） 。} 例如： p { filter : alpha(opacity=80,style=1 )。 } 252。靜態(tài)濾鏡的種類（ ） – Alpha　 讓對象呈現(xiàn) 漸變半透明 效果 √– Blur　　 讓對象產(chǎn)生風(fēng)吹模糊的效果 √– DropShadow　 讓對象有一個 下落式的陰影 √– Glow　　 在對象的周圍產(chǎn)生 光暈而模糊的效果 √37Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?– Chroma 讓圖像中的 某一顏色變成透明色 – FlipH 讓 HTML對象 水平轉(zhuǎn)換 – FlipV 讓 HTML對象 垂直轉(zhuǎn)換 – Wave 讓 HTML對象產(chǎn)生水平或是垂直方向上的 正弦波形 √ – Shadow 讓對象產(chǎn)生 陰影效果 √– Mask 利用一個 HTML對象在另一個對象上產(chǎn)生圖像的 遮罩– Light 在 HTML元件上放置一個 光影– Gray 把一個彩色的圖象變成 灰色調(diào)圖象 – Invert 讓對象產(chǎn)生 照片底片的效果 – XRay 讓對象 輪廓突出顯示 CSS的濾鏡屬性 （ filter） 的應(yīng)用38Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?（ 1） Alpha——讓對象呈現(xiàn) 漸變半透明 效果 √ CSS的濾鏡屬性 （ filter） 的應(yīng)用p {filter:alpha(opacity=80,style=0,starX=2,finishX=4)。}filter: alpha(屬性 =屬性值 )0表示全圖統(tǒng)一同一透明度 應(yīng)用在層或表格或圖片中有效。39Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?（ 2） Blur——讓對象產(chǎn)生模糊的效果 √ P158 CSS的濾鏡屬性 （ filter） 的應(yīng)用filter: blur(屬性 =屬性值 )p {filter:blur(add=1,direction=60,strength=2)。}40Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?（ 3） DropShadow——讓對象有一個 下落式的陰影 √ CSS的濾鏡屬性 （ filter） 的應(yīng)用p {filter:dropshadow(color=ff0080,offX=2,offY=2,positive=0)。color:00ff11}filter: dropshadow(屬性 =屬性值 )41Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?（ 4） Glow——在對象的周圍產(chǎn)生 光暈而模糊的效果 √– 參數(shù)如下：– COLOR： 指定發(fā)光的顏色。– STRENGTH： 發(fā)光強(qiáng)度的表現(xiàn)，也指光暈的厚度；其大小可以從1到 255之間 的任何整數(shù)來指定這個強(qiáng)度。 – 例如： CSS的濾鏡屬性 （ filter） 的應(yīng)用p {filter:glow(color=880088,strength=3)。}42Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?（ 5） Chroma——讓 圖像 中的 某一顏色變成透明色 – 參數(shù)如下：– COLOR屬性：用來指定要變?yōu)橥该魃念伾?，通過該屬性值的設(shè)定，我們可以來過濾某圖象中的指定顏色。– 例如：（ 6） FlipH——讓 HTML對象 水平轉(zhuǎn)換 （沒有參數(shù)）（沒有參數(shù)） FlipV——讓 HTML對象 垂直轉(zhuǎn)換 （沒有參數(shù)）（沒有參數(shù)）– 例如： CSS的濾鏡屬性 （ filter） 的應(yīng)用p {filter:chroma(color=0000fe)； }p {filter:filph}43Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?（ 7） Wave——讓 HTML對象產(chǎn)生水平或是垂直方向上的 正弦波形 √– 參數(shù)如下：– add： 是一個布爾值，它用來決定是否將原始圖象加入最后的效果之中。 0：不使用原圖； 1：使用– freq： 是指波紋的頻率，也就是指定在對象上一共需要產(chǎn)生多少個完整的波紋。 – phase： 用來設(shè)置正弦波的偏移量，也就是決定波形的形狀，其屬性值的取值范圍為從 0到 360度。 – lightstrength： 對于波紋增強(qiáng)光影的效果，其取值范圍為從 0到100。 – strength： 用來決定波形振幅的大小。 CSS的濾鏡屬性 （ filter） 的應(yīng)用44Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?（ 8） Shadow——讓對象產(chǎn)生 陰影效果 – 參數(shù)如下： – color： 設(shè)置陰影的顏色。– direction： 設(shè)置投影的方向，取值范圍為０度到３６０度，其中0度代表垂直向上，然后每 45度為一個單位，該屬性的默認(rèn)值是向左的 270度。– 例如： CSS的濾鏡屬性 （ filter） 的應(yīng)用p {filter:shadow(color=00ff00,direction=45)； }45Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?（ 9） Mask——利用一個對象在另一個對象上產(chǎn)生圖像的 遮罩 √– 作用：該濾鏡能夠利用一個 HTML對象在另一個對象上產(chǎn)生圖像的遮罩 ，可以為對象建立一個 覆蓋于表面的膜 ，其效果就象戴者有