CSS詳細經(jīng)典速成教程

上傳人：d*** IP屬地：廣東上傳時間：2023-04-15 格式：PPT 頁數(shù)：62 大?。?.88MB 積分：30 舉報 版權(quán)申訴

已閱讀5頁，還剩57頁未讀，繼續(xù)免費閱讀

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

文檔簡介

CSS專題CSS在頁面風格設(shè)計中的作用CSS語法基礎(chǔ)用DIV+CSS的方式來寫HTML頁面用CSS設(shè)置圖像樣式扮靚網(wǎng)頁CSS與XML的綜合運用CSSCSS詳細經(jīng)典速成教程一、CSS簡介CSSCascadingStyleSheet層疊樣式表樣式格式，對于網(wǎng)頁來說，像網(wǎng)頁顯示的文字的大小、顏色以及圖片位置以及段落、列表等，都是網(wǎng)頁顯示的樣式。層疊HTML文件引用多個CSS樣式時，如果CSS的定義發(fā)生沖突，瀏覽器將依據(jù)層次的先后順序來應用樣式，如果不考慮樣式的優(yōu)先級時，一般會遵循“最近優(yōu)選原則”。CSS詳細經(jīng)典速成教程二、CSS在頁面風格設(shè)計中的作用網(wǎng)頁的標準——網(wǎng)頁主要由3個部分組成：結(jié)構(gòu)（Structure）表現(xiàn)（Presentation）行為（Behavior）在一個網(wǎng)頁中，分若干個組成部分，包括各級標題、正文段落、各種列表結(jié)構(gòu)等，這就構(gòu)成了一個網(wǎng)頁的“結(jié)構(gòu)”。網(wǎng)頁各組成部分的字號、字體和顏色等屬性就構(gòu)成了它的“表現(xiàn)”。網(wǎng)頁與用戶的交互CSS詳細經(jīng)典速成教程二、CSS在頁面風格設(shè)計中的作用網(wǎng)頁標準的涵義：“結(jié)構(gòu)”決定了網(wǎng)頁“是什么”“表現(xiàn)”決定了網(wǎng)頁看起來是“什么樣子”“行為”決定了網(wǎng)頁“做什么”網(wǎng)頁標準對應的技術(shù)：(X)

HTML——決定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容CSS——設(shè)定網(wǎng)頁的表現(xiàn)樣式JavaScript——控制網(wǎng)頁的行為CSS的核心目的：實現(xiàn)網(wǎng)頁結(jié)構(gòu)內(nèi)容和表現(xiàn)形式的分離，將原來由HTML語言所承擔的一些與結(jié)構(gòu)無關(guān)的功能剝離出來，改由CSS來完成。CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)CSS的思想就是首先指定對什么“對象”進行設(shè)置，然后指定對該對象的哪個方面的“屬性”進行設(shè)置，最后給出該設(shè)置的“值”。CSS規(guī)則的構(gòu)造對象屬性值CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)樣式表規(guī)則的組成：選擇符（selector）決定哪些因素要受到影響聲明（declaration）一個或多個屬性值對組成基本語法：selector{屬性:屬性值[[;屬性:屬性值]…]}語法說明：selector表示希望進行格式化的元素；聲明部分包括在選擇器后的大括號中；用“屬性:屬性值”描述要應用的格式化操作；聲明中的多個屬性值對之間必須用分號隔開。CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)選擇器（selector）

CSS的對象是很重要的，它指定了對哪些網(wǎng)頁元素進行設(shè)置，因此，它有一個專門的名稱——選擇器（selector）類型：普通選擇器復合選擇器標簽CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)普通選擇器——標簽選擇器標簽<styletype="text/css">p{font-size:16px;color:red;}</style>CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)普通選擇器——類別選擇器<styletype="text/css">.biaoti{font-size:16px;color:red;}</style><body><p>普通文字</p><pclass=biaoti>賦于標記符類所產(chǎn)生的格式</p><spanclass=biaoti>類選擇器所定義的格式</span></body>CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)普通選擇器——ID選擇器<styletype="text/css">#biaoti{font-size:16px;color:red;}</style><body><p>普通文字</p><pid=biaoti>賦于標記符id所產(chǎn)生的格式</p><spanid=biaoti>ID選擇器所定義的格式</span></body>CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)復合選擇器——交集選擇器p{/*標記選擇器*/ color:blue;}p.Special{/*標記.類別選擇器*/ color:red;}.special{/*類別選擇器*/color:green;}</style></head><body><p>普通段落文本（藍色）</p><h3>普通標題文本（黑色）</h3><pclass="special">指定了.special類別的段落文本（紅色）</p><h3class="special">指定了.special類別的標題文本（綠色）</h3></body></html>CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)復合選擇器——并集選擇器<html><head><title>并集選擇器</title><styletype="text/css">/*并集選擇器*//*集體聲明*/h1,h2,h3,h4,h5,p{ color:purple; font-size:15px; }h2.special,.special,#one{ text-decoration:underline;}</style></head><body><h1>示例文字h1</h1><h2class="special">示例文字h2</h2><h3>示例文字h3</h3><h4>示例文字h4</h4><h5>示例文字h5</h5><p>示例文字p1</p><pclass="special">示例文字p2</p><pid="one">示例文字p3</p></body></html>CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)復合選擇器——后代選擇器<html><head><title>后代選擇器</title><styletype="text/css">/*嵌套聲明*/pspan{ color:red; }span{color:blue;}</style></head><body><p>嵌套使<span>用CSS（紅色）</span>標記的方法</p>

嵌套之外的<span>標記（藍色）</span>不生效</body></html>CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)繼承繼承是CSS的一個主要特征，許多CSS屬性不但影響選擇符所定義的元素，而且會被這些元素的后代繼承。例如一個body定義了的顏色值也會應用到段落的文本中。<html><head><title>CSS的繼承性</title><styletype="text/css"></style></head><body><p>CSS的<strong>繼承性</strong></p></body></html>

CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)樣式表的定義與使用直接定義標記的style屬性定義內(nèi)部樣式表嵌入外部樣式表鏈接外部樣式表<styletext="text/css"></style><styletype="text/css">@importurl("style.css")；</style><linkrel="stylesheet"type="text/css"href="style.css"><p

style=“font-size:14px”>一段話</p>CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)——示例<html><head><title>ID和類的定義</title><styletype="text/css"></style></head><body><divid="divdemo"> <p>此段文字以默認方式顯示</p><pclass="p1">此段文字以16像素大小，紅色字體顯示</p><pclass="p2">此段文字以26像素大小，玫紅色字體顯示

</div></body></html>CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)——字體color——字體顏色font-size——字號

font-family——字體font-style——字體樣式normal|italic|oblique(歪斜體)font-weight——字體加粗normal|bold|bolder|lighter|100|200|300font-variant——字體變體font-variant:normal|small-caps(小型的大寫字母)text-decoration——文字效果屬性none|underline|blink|overline|line-throughfont——綜合字體屬性font-stylefont-weightfont-variantfont-size/line-heightfont-familyCSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)——字體排版text-indent——首行縮進屬性normal|長度單位letter-spacing——字符間距屬性normal|長度單位line-height——行距屬性normal|比例|長度單位|百分比text-align——水平對齊屬性left|right|center|justifytext-transform——轉(zhuǎn)換英文大小寫uppercase|lowercase|capitalize|noneCSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)——背景顏色background-color：關(guān)鍵字|RGB值|transparentCSS則有四種定義顏色的方法：十六進制數(shù)RGB函數(shù)（整數(shù)）RGB函數(shù)（百分比）顏色名稱CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)——背景顏色<html><head><title>背景顏色的屬性</title><styletype="text/css"></style></head><body><pclass="p1">此行文字以紅色背景顯示n</p><pclass="p2">此行文字以黃色背景顯示</p></body></html>

CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)——背景顏色CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)——背景圖片background-image：插入背景圖片background-attachment:插入背景附件background-repeat:設(shè)置重復背景圖片background-position:設(shè)置背景圖片位置CSS詳細經(jīng)典速成教程background-image插入背景圖片background-image設(shè)置背景圖片基本語法：background-image:url|none語法說明：url表示要插入背景圖片的路徑，路徑可以是絕對路徑也可以是相對路徑，none表示不加載圖片。CSS詳細經(jīng)典速成教程background-attachment插入背景附件background-attachment背景附件屬性是用來設(shè)置背景圖片是否隨著滾動條的移動而一起移動?；菊Z法：background-attachment：scroll|fixed語法說明：scroll表示背景圖片是隨著滾動條的移動而移動，是瀏覽器的默認值；fixed表示背景圖片固定在頁面上不動，不隨著滾動條的移動而移動。CSS詳細經(jīng)典速成教程background-repeat設(shè)置重復背景圖片background-img屬性設(shè)置網(wǎng)頁的背景圖片重復顯示方式。基本語法：background-repeat：repeat|repeat-x|repeat-y|no-repeat語法說明：repeat表示背景圖片在水平和垂直方向平鋪，是默認值；repeat-x表示背景圖片在水平方向平鋪；repeat-y表示背景圖片在垂直方向平鋪；no-repeat表示背景圖片不平鋪。CSS詳細經(jīng)典速成教程background-position設(shè)置背景圖片位置當在網(wǎng)頁中插入背景圖片時，每一次插入的位置，都是位于網(wǎng)頁的左上角，所以通過background-position屬性來改變圖片的插入位置。基本語法：background-position：百分比|長度|關(guān)鍵字語法說明：利用百分比和長度來設(shè)置圖片位置時，都要指定兩個值，并且這兩個值都要用空格隔開。一個代表水平位置，一個代表垂直位置。水平位置的參考點是網(wǎng)頁頁面的左邊，垂直位置的參考點是網(wǎng)頁頁面的上邊。關(guān)鍵字在水平方向的主要有l(wèi)eft、center、right，關(guān)鍵字在垂直方向的主要有top、center、bottom。水平方向和垂直方向相互搭配使用。CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)——盒子的概念與使用盒子模塊設(shè)置邊界設(shè)置元素邊框設(shè)置元素內(nèi)邊界CSS詳細經(jīng)典速成教程盒子模塊在CSS中，將樣式調(diào)用在每一個元素上，都以一個假想的矩形格式模型看待.一般使用矩形模塊的時候，搭配margin屬性、border屬性以及padding屬性，可以更好的控制元素的樣式。CSS詳細經(jīng)典速成教程設(shè)置邊界margin的四個屬性主要是控制元素邊界與文件其他內(nèi)容的空白距離，四個邊界一般按順時針方向上（margin-top）、右（margin-right）、下（margin-bottom）、左（margin-left）屬性。四個邊界的設(shè)置語法一樣?；菊Z法：margin-(top、right、bottom、left):長度單位|百分比單位|autoCSS詳細經(jīng)典速成教程設(shè)置元素邊框border-style邊框樣式屬性border-width邊框?qū)挾葘傩詁order-color邊框色彩屬性border屬性的綜合設(shè)置CSS詳細經(jīng)典速成教程border-style邊框樣式屬性利用邊框樣式屬性不僅可以設(shè)置單位邊框樣式屬性，還可以對單位邊框進行設(shè)置，而且也可以利用復合邊框樣式屬性來統(tǒng)一設(shè)置四條邊框的樣式。基本語法：border-style:樣式值border-top-style:樣式值border-bottom-style:樣式值border-left-style:樣式值border-right-style:樣式值CSS詳細經(jīng)典速成教程border-style邊框樣式屬性語法說明：border-style是一個復合屬性，復合屬性的值有四種設(shè)置方法，其他4個都是單個邊框的樣式屬性，只能取一個值。樣式值屬性的具體說明見表10-8。設(shè)置一個值：四條邊框?qū)挾染褂靡粋€值。設(shè)置兩個值：上邊框和下邊框?qū)挾日{(diào)用第一個值，左邊框和右邊框?qū)挾日{(diào)用第二個值。設(shè)置三個值：上邊框?qū)挾日{(diào)用第一個值，右邊框與左邊框?qū)挾日{(diào)用第二個值，下邊框調(diào)用第三個值。設(shè)置四個值：四條邊框?qū)挾鹊恼{(diào)用順序為上、右、下、左。CSS詳細經(jīng)典速成教程border-width邊框?qū)挾葘傩詁order-width屬性，是控制元素邊框的寬度的一個綜合屬性，和border-style一樣也有四種單獨的設(shè)置方法，分別來定義四條邊框的寬度，設(shè)置方法和邊框樣式一樣。基本語法：CSS詳細經(jīng)典速成教程border-width邊框?qū)挾葘傩哉Z法說明：thin、medium、thick分別表示細、中等、粗，length表示長度單位CSS詳細經(jīng)典速成教程border-color邊框色彩屬性border-color屬性是用來控制邊框顯示的顏色，和邊框?qū)挾?、邊框樣式的設(shè)置方法一樣，也可以分別來設(shè)置每個邊框的顏色.基本語法：border-color:顏色關(guān)鍵字|RGB值border-top-color:顏色關(guān)鍵字|RGB值border-bottom-color:顏色關(guān)鍵字|RGB值border-left-color:顏色關(guān)鍵字|RGB值border-right-color:顏色關(guān)鍵字|RGB值CSS詳細經(jīng)典速成教程border屬性的綜合設(shè)置在CSS中，border屬性用來同時設(shè)置邊框的樣式、寬度和顏色，也可以另外對每個邊界屬性單獨進行設(shè)置基本語法：border:邊框?qū)挾葇邊框樣式|邊框顏色

border-top:上邊框?qū)挾葇上邊框樣式|上邊框顏色

border-bottom:下邊框?qū)挾葇下邊框樣式|下邊框顏色border-left:左邊框?qū)挾葇左邊框樣式|左邊框顏色border-right:右邊框?qū)挾葇右邊框樣式|右邊框顏色語法說明：每一個屬性都是一個復合屬性，都可以同時設(shè)置邊框的樣式、寬度和顏色，每個屬性的值中間用空格隔開，在這5個屬性中，只有border可以同時設(shè)置四條邊框的屬性，其他的只能設(shè)置單邊框的屬性。CSS詳細經(jīng)典速成教程設(shè)置元素內(nèi)邊界元素內(nèi)邊界主要是指邊框和內(nèi)部元素之間的空白距離，利用padding屬性設(shè)置元素內(nèi)的邊界時，也包括5個屬性，同樣也有四種設(shè)置方法。基本語法：padding:長度|百分比padding-top:長度|百分比padding-bottom:長度|百分比padding-left:長度|百分比padding-right:長度|百分比語法說明：長度包括長度值和長度單位，百分比是相對于上級元素寬度的百分比，不允許用負數(shù)，padding作為復合屬性的四種取值方法請參考邊框樣式的取值方法。CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)——列表列表list-style-type列表樣式list-style-image圖像列表list-style-position列表符號的縮進CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)——列表list-style-type屬性，可用于設(shè)置列表的符號或編號，此屬性通常搭配<ol>或<ul>標記使用?；菊Z法：list-style-type:屬性值CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)——列表利用css還可以把列表的符號設(shè)置成喜歡的圖片基本語法：list-style-image:url|none語法說明：url是指定要載入的圖片路徑，在使用上與插入圖片<img>的用法差不多；none表示不使用圖片式的列表符號。CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)——列表list-style-position列表符號縮進屬性，主要是設(shè)置每個列表項目的符號或圖片，是否向外凸出?；菊Z法：list-style-position:inside|outside語法說明：inside表示列表符號不向外凸出，也可以理解成列表項上的第二行文字與列表符號對齊；outside表示列表符號向外凸出，也是默認值。CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)——設(shè)置網(wǎng)頁鏈接屬性設(shè)置偽類選擇器得到不同的超鏈接屬性CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)——設(shè)置滾動條屬性利用CSS制作滾動條的顏色效果CSS詳細經(jīng)典速成教程三、CSS語法基礎(chǔ)——設(shè)置光標屬性設(shè)置變化的光標圖形——cursor:屬性值CSS詳細經(jīng)典速成教程四、用DIV+CSS的方式來寫HTML頁面一列居中樣式margin-right:auto;margin-left:auto;width:px;兩列并列樣式定義固定寬度、左對齊浮動兩列并列居中樣式用一個大容器容納兩個列，即以上兩種技術(shù)的綜合三列并列樣式定義固定寬度、左對齊浮動工字型布局結(jié)合三列并列樣式，版權(quán)區(qū)設(shè)定清除浮動clear:both;CSS詳細經(jīng)典速成教程div標記的使用在寫HTML文件時，要定義區(qū)域間不同樣式時，可以使用<div>標記達到這個效果，除此以外，通過設(shè)置<div>的z-index屬性還可以設(shè)置層次的效果?；菊Z法：<divstyle="position:absolute;left:29px;top:12px;width:200px;height:100px;background-color:#33CC99;float:none;clear:none；z-index:1></div>CSS詳細經(jīng)典速成教程div標記的使用語法說明：用style來表示層的樣式，因為如果沒有定義層的樣式的話，在瀏覽網(wǎng)頁的時候是看不到效果的。其中：position屬性主要是來定義層的定位方式；left和top是用來定位層的位置，與它并列的還有right和bottom，這四個屬性主要是用來設(shè)置層的位置，分別表示對象與其他對象的左部、頂部、右部和底部的相對位置；width和height用來定義層的寬度和高度；float是層的浮動屬性，用來設(shè)置層的浮動位置，當然這個屬性不僅可以用在圖像和表格上，還可以用到其他任何元素上；clear是層的清除屬性，表示是否充許在某個元素的周圍有浮動元素，它和浮動屬性是一對相對立的屬性，浮動屬性用來設(shè)置某個元素的浮動位置，而清除屬性則要去掉某個位置的浮動元素；z-index主要是設(shè)置區(qū)域的上下層關(guān)系，利用此屬性設(shè)置可以讓區(qū)域更多層次的效果，相當于三維空間的z坐標，z-index越大，區(qū)域在堆中的位置就越高。CSS詳細經(jīng)典速成教程<span>標記的使用<div>標記主要用來定義網(wǎng)頁上的區(qū)域，通常用于比較大范圍的設(shè)置，而<span>標記被用來組合文檔中的行內(nèi)元素。基本語法：<spanid="指定樣式名稱">…</span>或者<spanclass="指定樣式名稱">…</span>語法說明：如果不對span應用樣式，那么span元素中的文本與其他文本不會有任何視覺上的差異，只有對它應用樣式時，它才會產(chǎn)生視覺上的變化。CSS詳細經(jīng)典速成教程<div>與<span>的區(qū)別基本上<div>與<span>標記在網(wǎng)頁上的使用，都可以用來產(chǎn)生區(qū)域范圍，以定義不同的文字段落，且區(qū)域間彼此是獨立的。不過，兩者在使用上還是有一些差異。區(qū)域內(nèi)是否換行：<div>標記區(qū)域內(nèi)的對象與區(qū)域外的上下文會自動換行，而<span>標記區(qū)域內(nèi)的對象與區(qū)域外的對象不會自動換行。標記相互包含：<div>與<span>標記可以同時在網(wǎng)頁上使用，一般在使用上建議用<div>標記包含<span>標記；但<span>最好不包含<div>標記，否則會造成<span>標記的區(qū)域不完整，而形成斷行的現(xiàn)象。CSS詳細經(jīng)典速成教程小實例頁面布局設(shè)計始終是網(wǎng)頁設(shè)計中的一個核心問題，它包括技術(shù)和美學兩個方面的問題，兩者結(jié)合的非常緊密。頁面布局的主要工具是<frame>、<table>、<div>和Flash文件。對于框架<frame>，一般而言應盡量避免使用；表格<table>作為可以在上面布置元素的二維網(wǎng)格，它的優(yōu)點在于在所有瀏覽器中幾乎都可以無差錯的運行，而只有微不足道的差異，而且，對于像切割圖像這樣的問題可以非常容易的用表格實現(xiàn)；但是過度使用表格所帶來的頁面無序，會給后期的維護帶來極大的困難；<div>技術(shù)雖然難以全部代替<table>，但是它的位置、尺寸、背景、邊框等都可以很好的設(shè)計，更重要的是它所依賴的內(nèi)容和樣式分離的思想使得頁面代碼更為簡潔，樣式的更改更為方便。CSS詳細經(jīng)典速成教程五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁為圖像設(shè)置邊框border:樣式顏色寬度;樣式：dotted(點線)、dashed（虛線）、solid（實線）、double（雙線）groove：根據(jù)border-color的值繪制3D凹槽ridge：根據(jù)border-color的值繪制3D凸槽inset：根據(jù)border-color的值繪制3D凹邊outset：根據(jù)border-color的值繪制3D凸邊為圖像設(shè)置背景background:url();為圖形設(shè)置陰影background:whiteurl(漸變背景.gif)repeat-xbottomleft;filter：Shadow(Color=?,Direction=?).y1{ position:absolute; padding:12px; filter:Shadow(Color=#000000,Direction=135);}CSS詳細經(jīng)典速成教程五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁濾鏡靜態(tài)濾鏡alpha、blur、Motionblur、shadow、dropshadow、wave、glow、gray、flipv、fliph、invert、xray、emboss、engrave、mask動態(tài)濾鏡必須與javascript配合才能發(fā)揮作用對象.濾鏡數(shù)組名[i].apply();對象.濾鏡數(shù)組名[i].play();對象.濾鏡數(shù)組名[i].stop();filter:BlendTrans(duration=秒數(shù))filter:RevealTrans(Transition=變化方式duration=秒數(shù))filter:lightCSS詳細經(jīng)典速成教程五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁通道（alpha）——設(shè)置透明度filter:alpha(Opacity=？,FinishOpacity=？,Style=？,StartX=？,StartY=？,FinishX=？,FinishY=？)Opacity：透明等級，0——100，0表示完全透明，100表示不透明；FinishOpacity：結(jié)束時的透明度，取值同上；Style：透明區(qū)域的形狀特征0：統(tǒng)一形狀1：線性2：放射性漸變3：矩形漸變當Style為2或3時，startX等參數(shù)沒有意義，都是以圖片中心開始向四周結(jié)束CSS詳細經(jīng)典速成教程五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁模糊（blur）——設(shè)置模糊度filter:progid:DXImageTransform.Microsoft.blur(pixelradius=?,makeshadow=?)pixelradius：設(shè)置模糊效果的作用深度；makeshadow：設(shè)置是否制作成陰影；makeshadowopacity:設(shè)置使用makeshadow制作成的陰影的透明度.blur1{filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);}.blur2{filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=true,makeshadowopacity=10;);}CSS詳細經(jīng)典速成教程五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁運動模糊（Motionblur）——設(shè)置運動模糊度filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=？,direction=？,add=？);stregth：設(shè)置模糊效果的作用深度，代表有多少像素受到模糊影響；direction：模糊方向，0度表示垂直向上，；add:true|false,是否疊加原圖；.motionblur1{filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=120,add=false); }.motionblur2{filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=120,add=true); }CSS詳細經(jīng)典速成教程五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁陰影shadow——在指定方向上建立物體的連續(xù)投影filter:shadow(color=？,direction=？);dropshadow——下落陰影filter:dropshadow(color=？,offx=？,offy=？,positive=？) .shadow{

filter:shadow(color=#CCCCFF,direction=135); /*陰影效果*/}.drop{

filter:dropshadow(color=#CCCCFF,offx=5,offy=5,positive=true); /*下落陰影*/}CSS詳細經(jīng)典速成教程五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁波形filter:wave(add=?,freq=?,lightstrength=?,phase=?,strength=？)Add:1——顯示原來對象，0——不顯示原來對象Freq:波形的頻率，參數(shù)值1—100，完整波紋的個數(shù)Lightstrength：波紋增光效果，參數(shù)值1—100Phase:正弦波開始的偏移量，數(shù)值0—100，開始時偏移量占波長的百分比Strength:振幅的大小.three{filter:flipvalpha(opacity=80)wave(add=0,freq=15,lightstrength=30,phase=0,strength=4); /*同時使用三個濾鏡*/ /*豎直翻轉(zhuǎn)、透明、波浪效果*/}CSS詳細經(jīng)典速成教程五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁發(fā)光filter:glow(color=？,strength=？); 灰度filter:gray;翻轉(zhuǎn)filter:fliph; /*水平翻轉(zhuǎn)*/filter:flipv; /*豎直翻轉(zhuǎn)*/filter:flipvfliph; /*水平、豎直同時翻轉(zhuǎn)*/反色filter:invert; /*底片效果*/X光filter:xray; /*X光效果*/浮雕紋理filter:progid:DXImageTransform.microsoft.emboss(bias=？);凹陷浮雕效果filter:progid:DXImageTransform.microsoft.engrave(bias=？);凸出浮雕效果bias:取值范圍-1——1遮罩filter:mask(color=？); /*遮罩效果*/CSS詳細經(jīng)典速成教程圖片淡入淡出filter:BlendTrans(duration=秒數(shù))五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁<scriptlanguage="javascript">functionimg1(x

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

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

CSS詳細經(jīng)典速成教程

文檔簡介

溫馨提示

最新文檔

評論

CSS詳細經(jīng)典速成教程

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔