【定義 CSS 類型屬性】使用“CSS 樣式定義”對話框中的“類型”類別能夠定義 CSS 樣式的基本字體和類型配置。
定義 CSS 樣式的類型配置:
在“CSS 樣式定義”對話框中,選擇“類型”(如下圖),然后配置所需的樣式屬性。
![[轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~](http://image25.360doc.com/DownloadImg/2011/03/1320/9958180_4.gif)
請注意:下列任意屬性假如您認為不重要能夠保留為空。
字體:為樣式配置字體。DW MX 2004內(nèi)置6個系列的英文字體(如下圖)。
一般英文字體常常用“Arial, Helvetica, sans-serif”這個系列比較美觀,假如不用這些字體系列,您您能夠通過下拉列表最下面的“編輯字體列表”來創(chuàng)建新的字體系列。中文網(wǎng)頁默認字體是宋體,一般留空即可。瀏覽器最好選擇用戶系統(tǒng)第一種字體顯示文本。兩種瀏覽器都支持字體屬性。
大?。憾x文本大小。能夠通過選擇數(shù)字和度量單位選擇特定的大小,也能夠選擇相對大小。以像素為單位能夠有效地防止瀏覽器變形文本。
提示:CSS中長度的單位分絕對長度單位和相對長度單位:
![[轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~ [轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~](http://www./d/file/wangyesheji/htcss/2010-03-07/3149c829581642c03693a9ffc4a2703c.gif) |
絕對 長度
|
px:(象素)根據(jù)顯示器的分辨率來確定長度。 pt:(字號)根據(jù)windows系統(tǒng)定義的字號大小來確定長度。 in、cn、mm:(英寸、厘米、毫米)根據(jù)顯示的實際尺寸來確定長度。此類單位不隨顯示器的分辨率改變而改變。 |
相對 長度
|
em:當前文本的尺寸。例如:{ font-size:2em}是指文字大小為原來的2倍。 ex:當前字母“x”的高度,一般為字體尺寸的一半。 %:是以當前文本的百分比定義尺寸。例如:{ font-size:300%}是指文字大小為原來的3倍。 |
兩種瀏覽器都支持大小屬性。
- 樣式:將“正常”、“斜體”或“偏斜體”指定為字體樣式。默認配置是“正常”。兩種瀏覽器都支持樣式屬性。
- 行高:配置文本所在行的高度。選擇“正常”自動計算字體大小的行高,或輸入一個確切的值并選擇一種度量單位。比較直觀的寫法用百分比,例如180%是指行高等于文字大小的1.8倍。相對應的CSS屬性是”line-height”。兩種瀏覽器都支持行高屬性。
- 修飾:向文本中添加下劃線、上劃線或刪除線,或使文本閃爍。正常文本的默認配置是“無”。鏈接的默認配置是“下劃線”。將鏈接配置設(shè)為無時,能夠通過定義一個特別的類刪除鏈接中的下劃線。這些效果能夠同時存在,將效果前的復選框選定即可。相對應的CSS屬性是”text-decoration”。兩種瀏覽器都支持修飾屬性。
- 粗細:對字體應用特定或相對的粗體量。“正常”等于 400;“粗體”等于 700。相對應的CSS屬性是”font-weight”。兩種瀏覽器都支持粗細屬性。
- 變量:配置文本的小型大寫字母變量。DW MX 2004不在“文檔”窗口中顯示該屬性。Internet Explorer 支持變量屬性,但 Netscape Navigator 不支持。
- 大小寫:將選定內(nèi)容中的每個單詞的首字母大寫或?qū)⑽谋九渲脼槿看髮懟蛐憽煞N瀏覽器都支持大小寫屬性。
- 顏色:配置文本顏色。兩種瀏覽器都支持顏色屬性。
配置完這些選項后,在面板左側(cè)選擇另一個 CSS 類別以配置其他的樣式屬性,或單擊“確定”。
【定義 CSS 樣式背景屬性】使用“CSS 樣式定義”對話框的“背景”類別能夠定義 CSS 樣式的背景配置。能夠?qū)W(wǎng)頁中的任何元素應用背景屬性。例如,創(chuàng)建一個樣式,將背景顏色或背景圖像添加到任何頁面元素中,比如在文本、表格、頁面等的后面。還能夠配置背景圖像的位置。
提示:本頁背景圖片固定,是【定義 CSS 樣式背景屬性】的效果。
|
定義背景配置:
在“CSS 樣式定義”對話框中,選擇“背景”(如下圖),然后配置所需的樣式屬性。
![[轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~](http://image25.360doc.com/DownloadImg/2011/03/1320/9958180_6.gif)
請注意:下列任意屬性假如您認為不重要能夠保留為空。
背景顏色:配置元素的背景顏色。兩種瀏覽器都支持背景顏色屬性。
背景圖像:配置元素的背景圖像。兩種瀏覽器都支持背景圖像屬性。
重復:定義是否重復連同怎樣重復背景圖像。兩種瀏覽器都支持重復屬性。
- “不重復”在元素開始處顯示一次圖像。
- “重復”在元素的后面水平和垂直平鋪圖像。
- “橫向重復”和“縱向重復”分別顯示圖像水平帶區(qū)和垂直帶區(qū)。圖像被剪輯以適合元素的邊界。
附件:確定背景圖像是固定在他的原始位置還是隨內(nèi)容一起滾動。注意,某些瀏覽器可能將“固定”選項視為“滾動”。Internet Explorer 支持該選項,但 Netscape Navigator 不支持。
水平位置:和垂直位置指定背景圖像相對于元素的初始位置。這能夠用于將背景圖像和頁面中央垂直和水平對齊。假如附件屬性為“固定”,則位置相對于“文檔”窗口而不是元素。Internet Explorer支持該屬性,但 Netscape Navigator 不支持。
配置完這些選項后,在面板左側(cè)選擇另一個 CSS 類別以配置其他的樣式屬性,或單擊“確定”。
【定義 CSS 樣式區(qū)塊屬性】使用“CSS 樣式定義”對話框的“區(qū)塊”類別能夠定義標簽和屬性的間距和對齊配置。下列兩組表格為文本定義區(qū)塊屬性前后對比:
原文本未定義區(qū)塊屬性
|
【定義CSS樣式區(qū)塊屬性】
|
定義區(qū)塊屬性后效果
|
【定義CSS樣式區(qū)塊屬性】
|
原文本未定義區(qū)塊
|
使用“樣式定義”對話框的“區(qū)塊”類別能夠定義標簽和屬性的間距和對齊配置。此為區(qū)塊定義演示。字間的空格可不是用鍵盤敲出來的。 |
定義區(qū)塊后效果(參數(shù)見下圖)
|
使用“樣式定義”對話框的“區(qū)塊”類別能夠定義標簽和屬性的間距和對齊配置。此為區(qū)塊定義演示。字間的空格可不是用鍵盤敲出來的。 |
定義區(qū)塊配置:在“CSS樣式定義”對話框中,選擇“區(qū)塊”(如下圖),然后配置所需的樣式屬性。
![[轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~](http://image25.360doc.com/DownloadImg/2011/03/1320/9958180_7.gif)
請注意:下列任意屬性假如您認為不重要能夠保留為空。
單詞間距:配置單詞的間距。若要配置特定的值,請在彈出式菜單中選擇“值”,然后輸入一個數(shù)值。在第二個彈出式菜單中,選擇度量單位。
注意:能夠指定負值,但顯示取決于瀏覽器。Dreamweaver 不在“文檔”窗口中顯示該屬性。
字母間距:增加或減小字母或字符的間距。若要減少字符間距,請指定一個負值(例如 -4)。字母間距配置覆蓋對齊的文本配置。Internet Explorer 4 和更高版本連同 Netscape Navigator 6 支持“字母間距”屬性。
垂直對齊:指定應用他的元素的垂直對齊方式。僅當應用于 <img> 標簽時,Dreamweaver 才在“文檔”窗口中顯示該屬性。
文本對齊:配置元素中的文本對齊方式。兩種瀏覽器都支持“文本對齊”屬性。
文本縮進:指定第一行文本縮進的程度。能夠使用負值創(chuàng)建凸出,但顯示取決于瀏覽器。僅當標簽應用于塊級元素時,Dreamweaver 才在“文檔”窗口中顯示該屬性。兩種瀏覽器都支持“文本縮進”屬性。
空格:確定怎樣處理元素中的空白。從下面三個選項中選擇:“正常”收縮空白;“保留”的處理方式即保留任何空白,包括空格、制表符和回車;“不換行”指定僅當碰到 br 標簽時文本才換行。Dreamweaver 不在“文檔”窗口中顯示該屬性。Netscape Navigator 和 Internet Explorer 5.5 支持“空格”屬性。
顯示:指定是否顯示連同怎樣顯示元素。“無”關(guān)閉他被指定給的元素的顯示。
配置完這些選項后,在面板左側(cè)選擇另一個 CSS 類別以配置其他的樣式屬性,或單擊“確定”。
【定義 CSS 樣式方框?qū)傩浴渴褂?#8220;CSS 樣式定義”對話框的方框(又稱盒子)類別能夠為控制元素在頁面上的放置方式的標簽和屬性定義配置。能夠在應用填充和邊距配置時將配置應用于元素的各個邊,也能夠使用“全部相同”配置將相同的配置應用于元素的任何邊。
定義元素在頁面上的放置方式:在“CSS 樣式定義”對話框中,選擇“方框”(如下圖),然后配置所需的樣式屬性。
![[轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~](http://image25.360doc.com/DownloadImg/2011/03/1320/9958180_8.gif)
請注意:下列任意屬性假如您認為不重要能夠保留為空。
寬和高:配置元素的寬度和高度。寬和高定義的對象多為圖片,表格,層等。
浮動:配置元素浮動方式(如文本、層、表格等)。其他元素按通常的方式環(huán)繞在浮動元素的周圍。 兩種瀏覽器都支持浮動屬性。 這是配置浮動效果的演示。定義表格浮動(左對齊),文本自動排列在該表格的右側(cè)。
|
清除:不允許元素的浮動。左對齊:表示不允許左邊有浮動對象。右對齊:表示不允許右邊有浮動對象。兩者:表示允許兩邊都能夠有浮動對象。無:不允許有浮動對象。兩種瀏覽器都支持“清除”屬性。
填充:指定元素內(nèi)容和元素邊框(假如沒有邊框,則為邊距)之間的間距。取消選擇“全部相同”選項可配置元素各個邊的填充。
全部相同:將相同的填充屬性配置為他應用于的元素的“上”、“右”、“下”和“左”側(cè)。
邊界:指定一個元素的邊框(假如沒有邊框,則為填充)和另一個元素之間的間距。僅當應用于塊級元素(段落、標題、列表等)時,DW MX 2004才在“文檔”窗口中顯示該屬性。取消選擇“全部相同”可配置元素各個邊的邊距。
全部相同:將相同的邊距屬性配置為他應用于的元素的“上”、“右”、“下”和“左”側(cè)。
配置完這些選項后,在面板左側(cè)選擇另一個 CSS 類別以配置其他的樣式屬性,或單擊“確定”。
【定義 CSS 樣式邊框?qū)傩浴渴褂?#8220;CSS 樣式定義”對話框的“邊框”類別能夠定義元素周圍的邊框的配置(如寬度、顏色和樣式)。
提示:本頁為邊框進行了配置 (樣式:點劃線 寬度:2px 顏色:#FF0000)
配置邊框樣式:
在“CSS 樣式定義”對話框中,選擇“邊框”(如下圖),然后配置所需的樣式屬性。
![[轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~](http://image25.360doc.com/DownloadImg/2011/03/1320/9958180_9.gif)
請注意:下列任意屬性假如您認為不重要能夠保留為空。
樣式:配置邊框的樣式外觀。樣式的顯示方式取決于瀏覽器。DW MX 2004在“文檔”窗口中將任何樣式呈現(xiàn)為實線。兩種瀏覽器都支持樣式屬性。取消選擇“全部相同”可配置元素各個邊的邊框樣式。
全部相同:將相同的邊框樣式屬性配置應用于的元素的“上”、“右”、“下”和“左”側(cè)。
寬度:配置元素邊框的粗細。兩種瀏覽器都支持“寬度”屬性。取消選擇“全部相同”可配置元素各個邊的邊框?qū)挾取?br> 全部相同:將相同的邊框?qū)挾扰渲脩糜诘脑氐?#8220;上”、“右”、“下”和“左”側(cè)。
顏色:配置邊框的顏色。能夠分別配置每個邊的顏色,但顯示取決于瀏覽器。取消選擇“全部相同”可配置元素各個邊的邊框顏色。全部相同:將相同的邊框顏色配置應用于的元素的“上”、“右”、“下”和“左”側(cè)。
配置完這些選項后,在面板左側(cè)選擇另一個 CSS 類別以配置其他的樣式屬性,或單擊“確定”。
【定義 CSS 樣式列表屬性】 “CSS 樣式定義”對話框的“列表”類別為列表標簽定義列表配置(如項目符號大小和類型)。
定義列表樣式:
在“CSS 樣式定義”對話框中,選擇“列表”(如下圖),然后選擇所需的樣式屬性。
![[轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~](http://pubimage.360doc.com/wz/default.gif)
請注意:下列任意屬性假如您認為不重要能夠保留為空。
- 類型:配置項目符號或編號的外觀。兩種瀏覽器都支持“類型”。
- 項目符號圖像:能夠為項目符號指定自定義圖像。單擊“瀏覽”選擇圖像或鍵入圖像的路徑。
- 位置:配置列表項文本是否換行和縮進連同文本是否換行到左邊距。
列表屬性配置應用舉例如下:
圓點符號
|
數(shù)字編號
|
圖像符號
|
CSS樣式表屬性分為:
- 類型;
- 背景;
- 區(qū)塊;
- 方框;
- 邊框;
- 列表;
- 定位;
- 擴展;
|
CSS樣式表屬性分為:
- 類型;
- 背景;
- 區(qū)塊;
- 方框;
- 邊框;
- 列表;
- 定位;
- 擴展;
|
CSS樣式表屬性分為:
- 類型;
- 背景;
- 區(qū)塊;
- 方框;
- 邊框;
- 列表;
- 定位;
- 擴展;
|
配置完這些選項后,在面板左側(cè)選擇另一個 CSS 類別以配置其他的樣式屬性,或單擊“確定”。
【定義 CSS 樣式定位屬性】 “定位”樣式屬性使用“層”最好選擇參數(shù)中定義層的默認標簽,將標簽或所選文本塊更改為新層。
配置層定位屬性:
在“CSS 樣式定義”對話框中,選擇“定位”(如下圖),然后配置所需的樣式屬性。
![[轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~](http://pubimage.360doc.com/wz/default.gif)
請注意:下列任意屬性假如您認為不重要能夠保留為空。
類型:確定瀏覽器應怎樣來定位層。
絕對:使用“定位”框中輸入的坐標(相對于頁面左上角)來放置層。
相對:使用“定位”框中輸入的坐標(相對于對象在文檔的文本中的位置)來放置層。該選項不顯示在“文檔”窗口中。
靜態(tài):將層放在他在文本中的位置。
顯示:確定層的初始顯示條件。假如不指定可見性屬性,則默認情況下大多數(shù)瀏覽器都繼承父級的值。選擇以下可見性選項之一:
繼承:繼承層父級的可見性屬性。假如層沒有父級,則他將是可見的。
可見:顯示該層的內(nèi)容,而不管父級的值是什么。
隱藏:隱藏這些層的內(nèi)容,而不管父級的值是什么。
Z 軸:確定層的堆疊順序。編號較高的層顯示在編號較低的層的上面。值能夠為正,也能夠為負。(注:使用“層”面板更改層的堆疊順序更容易。)
溢出(僅限于 CSS 層):確定在層的內(nèi)容超出他的大小時將發(fā)生的情況。這些屬性控制怎樣處理此擴展,如下所示:
可見:增加層的大小,使他的任何內(nèi)容均可見。層向右下方擴展。
隱藏:保持層的大小并剪輯任何超出的內(nèi)容。不提供任何滾動條。
滾動:在層中添加滾動條,不論內(nèi)容是否超出層的大小。專門提供滾動條可避免滾動條在動態(tài)環(huán)境中出現(xiàn)和消失所引起的混亂。該選項不顯示在“文檔”窗口中,并且僅適用于支持滾動條的瀏覽器。Internet Explorer 和 Netscape Navigator 6 支持此屬性。
自動:使?jié)L動條僅在層的內(nèi)容超出他的邊界時才出現(xiàn)。該選項不顯示在“文檔”窗口中。
定位:指定層的位置和大小。瀏覽器怎樣解釋位置取決于“類型”配置。假如層的內(nèi)容超出指定的大小,則大小值被覆蓋。
位置和大小的默認單位是像素。對于 CSS 層,還能夠指定下列單位:pc(十二點活字)、pt(點)、in(英寸)、mm(毫米)、cm(厘米)、(ems)、(exs) 或 %(父級值的百分比)??s寫必須緊跟在值之后,中間不留空格:例如,3mm。
剪輯:定義層的可見部分。假如指定了剪輯區(qū)域,能夠通過腳本語言(如 javascript)訪問他,并操作屬性以創(chuàng)建像擦除這樣的特別效果。通過使用“改變屬性”行為能夠配置這些擦除效果。
配置完這些選項后,在面板左側(cè)選擇另一個 CSS 類別以配置其他的樣式屬性,或單擊“確定”。
【定義 CSS 樣式擴展屬性】“擴展”樣式屬性包括過濾器、分頁和光標選項,他們中的大部分效果僅受 Internet Explorer 4.0 和更高版本的支持。
指定擴展屬性:
在“CSS 樣式定義”對話框中,選擇“擴展”(如下圖),然后配置所需的樣式屬性。
![[轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~](http://pubimage.360doc.com/wz/default.gif)
請注意:下列任意屬性假如您認為不重要能夠保留為空。
分頁:在打印期間在樣式所控制的對象之前或之后強行分頁。選擇要在彈出式菜單中配置的選項。此選項不受任何 4.0 版本瀏覽器的支持,但可能受未來的瀏覽器的支持。
|
|
hand
|
手形
|
crosshair
|
精確定位“+”字
|
text
|
文本“I”形
|
wait
|
等待
|
default
|
默認光標
|
help
|
幫助
|
e-resize
|
箭頭朝右方
|
ne-resize
|
箭頭朝右上方
|
n-resize
|
箭頭朝上方
|
nw-resize
|
箭頭朝左上方
|
w-resize
|
箭頭朝左方
|
sw-resize
|
箭頭朝左下方
|
s-resize
|
箭頭朝下方
|
se-resize
|
箭頭朝右下方
|
auto
|
自動 按照默認狀態(tài)改變
|
![[轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~](http://pubimage.360doc.com/wz/default.gif)
光標:位于“視覺效果”下的“光標”選項,是光標顯示屬性配置。當指針位于樣式所控制的對象上時改變指針圖像。選擇彈出式菜單(右圖)進行配置。(左圖)是他的周詳列表和相關(guān)說明。
過濾器:又稱 CSS濾鏡,對樣式所控制的對象應用特別效果。他把我們帶入絢麗多姿的世界。正是有了濾鏡屬性,頁面才變得更加漂亮。從“過濾器”彈出式菜單中選擇一種效果并視具體需要加以配置。各種 CSS 濾鏡屬性的周詳介紹請從導航條選擇“濾鏡屬性”按鈕瀏覽。
過濾器:又稱 CSS濾鏡,對樣式所控制的對象應用特別效果。他把我們帶入絢麗多姿的世界。正是有了濾鏡屬性,頁面才變得更加漂亮。DW MX 2004 擴展類過濾器嵌入16項樣式屬性(如下圖),您能夠根據(jù)您的需要從“過濾器”彈出式菜單中選擇并加以配置。
![[轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~](http://pubimage.360doc.com/wz/default.gif)
濾 鏡
|
說 明
|
Alpha
|
透明的漸進效果
|
BlendTrans
|
淡入淡出效果
|
Blur
|
風吹模糊的效果
|
Chroma
|
指定顏色透明
|
DropShadow
|
陰影效果
|
FlipH
|
水平翻轉(zhuǎn)
|
FlipV
|
垂直翻轉(zhuǎn)
|
Glow
|
邊緣光暈效果
|
Gray
|
彩色圖片變灰度圖
|
Invert
|
底片的效果
|
Light
|
模擬光源效果
|
Mask
|
矩形遮罩效果
|
RevealTrans
|
動態(tài)效果
|
Shadow
|
輪廓陰影效果
|
Wave
|
波浪扭曲變形效果
|
Xray
|
X光照片效果
|
左表列出16項濾鏡及說明,現(xiàn)在再進一步介紹一下:
“Alpha”濾鏡:這個名字,在Flash和Photoshop經(jīng)常見到。他們的作用基本類似,就是把一個目標元素和背景混合。您能夠指定數(shù)值來控制混合的程度。這種“和背景混合”通俗地說就是個元素的透明度。
BlendTrans濾鏡:他的功能也比較單一,就是產(chǎn)生一種精細的淡入淡出的效果。
Blur濾鏡:把他加載到文字上,產(chǎn)生風吹模糊的效果,類似立體字,這將為您在網(wǎng)頁上制作立體字標題帶來了方便。也能夠把Blur濾鏡加載到圖片上,能達到用圖象處理軟件制作的效果。
“DropShadow”顧名思義就是添加對象的陰影效果。他的實際效果看上去就象是原來的對象離開了頁面,然后在頁面上顯示出該對象的投影。
CSS的無參數(shù)濾鏡共有六個(FlipH、FlipV、Invert、Xray、Gray和Light),雖然他們沒有參數(shù),相對來講,靈活性要差點,但他們用起來更方便,效果也相當明顯。用他們能夠使文字或圖片翻轉(zhuǎn)、獲得圖片的“底片”效果,甚至能夠制作圖片的“X光片”效果。
glow濾鏡:使對象的邊緣就產(chǎn)生類似發(fā)光的效果,glow”濾鏡制作這種效果操作很簡便。
Mask濾鏡:能夠為網(wǎng)頁上的元件對象作出一個矩形遮罩效果。
wave濾鏡:他的作用是把對象按照垂直的波形樣式扭曲的特別效果。
Light濾鏡:能產(chǎn)生一個模擬光源的效果,配合使用一些簡單的Javascrpt,使對象產(chǎn)生奇特光照的效果。
RevealTrans動態(tài)濾鏡:是個神奇的濾鏡,他能產(chǎn)生23種動態(tài)效果,還能在23種動態(tài)效果中隨機抽用其中的一種。用他來進行網(wǎng)頁之間的動態(tài)轉(zhuǎn)換,很方便。
【Alpha濾鏡屬性】這個名字,在Flash和Photoshop經(jīng)常見到。他們的作用基本類似,就是把一個目標元素和背景混合。您能夠指定數(shù)值來控制混合的程度。這種“和背景混合”通俗地說就是個元素的透明度。通過指定坐標,能夠指定點、線、面的透明度。由于“Alpha”濾鏡的參數(shù)多,我們先來看一下下邊的表格:
參數(shù)名
|
效 果 說 明
|
取值說明
|
Opacity
|
不透明的程度,百分比。 |
取值0~100 |
FinishOpacity
|
能夠制作出透明漸變的效果。 |
取值0~100 |
Style
|
指定漸變的顯示形狀。 |
0:沒有漸變;1:線性漸變; 2:圓形漸變;3:矩形輻射。 |
StartX
|
漸變開始的 X 坐標值 |
|
StartY
|
漸變開始的 Y 坐標值 |
|
FinishX
|
漸變結(jié)束的 X 坐標值 |
|
FinishY
|
漸變結(jié)束的 Y 坐標值 |
|
“opacity”:代表透明度程度。范圍是從0~100,他們其實是百分比的形式。也就是說,0代表完全透明,100代表完全不透明。
“finishopacity”:是個可選參數(shù),假如想要配置漸變的透明效果,就能夠使用他們來指定結(jié)束時的透明度。范圍也是0 到 100。
“style”:指定了透明區(qū)域的形狀特征。其中0代表統(tǒng)一形狀、1代表線形、2代表放射狀、3代表長方形。
“StartX”和“StartY”:代表漸變透明效果的開始X和Y坐標。
“FinishX”和“FinishY”:代表漸變透明效果結(jié)束X和Y坐標。
請看下面的演示:
Alpha 屬性值:
Alpha(Opacity=50, FinishOpacity=100, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100)
Alpha(Opacity=10, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)
Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100)
Alpha(Opacity=10, FinishOpacity=100, Style=3, StartX=0, StartY=0, FinishX=100, FinishY=100)
Style 加載在單元格<td>上顯示效果如下圖:
原圖
|
style=0
|
style=1
|
style=2
|
style=3
|
|
|
|
|
|
Style加載在圖片上顯示效果如下圖:
原圖
|
style=0
|
style=1
|
style=2
|
style=3
|
![[轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~](http://pubimage.360doc.com/wz/default.gif) |
![[轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~](http://pubimage.360doc.com/wz/default.gif) |
![[轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~](http://pubimage.360doc.com/wz/default.gif) |
![[轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~](http://pubimage.360doc.com/wz/default.gif) |
![[轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~](http://pubimage.360doc.com/wz/default.gif) |
Style加載在文字上顯示效果如下圖:
Alpha(Opacity=30,Style=0)
|
這是文字透明效果演示
|
【BlendTrans屬性】淡入淡出的效果濾鏡,能產(chǎn)生極精細的圖片轉(zhuǎn)換效果。
![[轉(zhuǎn)載]DW里CSS的詳細介紹~~~~~~~~~](http://pubimage.360doc.com/wz/default.gif)
制作說明:
BlendTrans濾鏡功能也比較單一,只有一個參數(shù):Duration(變換時間)。需要借助于javascript來調(diào)用他的方法來實現(xiàn)轉(zhuǎn)換功能。使用BlendTrans濾鏡,首先您要準備幾張寬高尺寸相同的圖片,并分別命名,保存在圖像目錄下,如:images/*.jpg。假如用4幅的話,分別取名為:blen1.jpg; blen2.jpg; blen3.jpg;blen4.jpg。(用其他名稱也能夠,但下邊的javascript配置要相應調(diào)整。)
制作方法:
1、制作一個BlendTrans濾鏡,取名為“myblen",Duration配置為“3"(即轉(zhuǎn)換時間為3秒),濾鏡配置好后,在網(wǎng)頁源代碼的< head >和< /head >之間將有下面這樣一段代碼:
< style type="text/css" > < !-- .myblen { filter:blendTrans(Duration=3) } -- > < /style > |
2、插入第一張圖片(本例圖片為570X150像素),在圖片的屬性面板上給圖片加個名稱:myimg
3、把BlendTrans濾鏡加載到圖片上,這時圖片的“img"標記的代碼是這樣的:<img src="images/blen1.jpg" name="myimg" width="570" height="150" class="myblen" id="myimg">;
4、在網(wǎng)頁的源代碼< head >和< /head >之間插入下面這段javascript程式:
<script language="javascript" > <!-- function img(len) { this.length=len; } imgname=new img(4); imgname[0]="images/blen1.jpg"; imgname[1]="images/blen2.jpg"; imgname[2]="images/blen3.jpg"; imgname[3]="images/blen4.jpg"; var i=1; function play() { if (i==3) { i=0 ;} else { i++; } myimg.filters[0].apply(); myimg.src=imgname[i]; myimg.filters[0].play(); mytimeout=setTimeout("play()",6000); } --> </script > |
5、在網(wǎng)頁源代碼的< body >加入這樣的一句代碼:onload="play()"。
配置完成,點F12預覽效果