DW中CSS屬性詳解

1、Dreamweaver的CSS樣式里包含了W3C規(guī)范定義的所有CSS1的屬性，Dreamweaver把這些屬性分為Type（類型）、Background（背景）、Block（塊）、Box（盒子）、Border（邊框）、 List（列表）、Positioning（定位）、Extensions（擴(kuò)展）八個(gè)部分，如下圖，下面我們分別詳細(xì)講解。 1.Type（類型） Type面板主要是對(duì)文字的字體，大小，顏色，效果等基本樣式進(jìn)行設(shè)置。設(shè)置時(shí)，我們只對(duì)要改變的屬性進(jìn)行設(shè)置，沒(méi)有必要改變的屬性就空著。 注意：屬性名帶*號(hào)的是指樣式效果不能在編輯文檔時(shí)顯示，要用瀏覽器打開(kāi)才能看到效果。 Font：設(shè)置字體系

2、列。什么叫字體系列呢？是指對(duì)文字設(shè)定幾個(gè)字體，當(dāng)遇到第一個(gè)字體不能顯示的文字時(shí)會(huì)自動(dòng)用系列中的第二個(gè)字體或后面的字體顯示。相對(duì)應(yīng)的CSS屬性是”font-family”。 注意：Dreamweaver4已經(jīng)內(nèi)置設(shè)定了6個(gè)系列的英文字體，一般英文字體我們用“Verdana, Arial, Helvetica, sans-serif”這個(gè)系列比較好看。如果不用這些字體系列，你就需要自己編輯字體系列，你可以通過(guò)下拉框最下面的“Edit Font List”來(lái)創(chuàng)建新的字體系列，也可以直接手動(dòng)在下拉框里寫(xiě)字體名，字體之間用逗號(hào)隔開(kāi)。中文網(wǎng)頁(yè)默認(rèn)字體是宋體，一般就空著不要選取任何字體。 Size：定義文字

3、的大小。你可以通過(guò)選取數(shù)字和度量單位來(lái)選擇具體的字體大小，或者你也可以選擇一個(gè)相對(duì)的字體大小。最好使用Pixels作為單位，這樣不會(huì)在瀏覽器中文本變形。一般小字體用比較標(biāo)準(zhǔn)的12px。相對(duì)應(yīng)的CSS屬性是”font-size”。 注意：CSS中長(zhǎng)度的單位分絕對(duì)長(zhǎng)度單位和相對(duì)長(zhǎng)度單位，一般我們常用的絕對(duì)長(zhǎng)度單位有： px：（象素）根據(jù)顯示器的分辨率來(lái)確定長(zhǎng)度。 pt：（字號(hào)）根據(jù)windows系統(tǒng)定義的字號(hào)大小來(lái)確定長(zhǎng)度。 mm、cn、in：（毫米、厘米、英寸）根據(jù)顯示的實(shí)際尺寸來(lái)確定長(zhǎng)度。此類單位不隨顯示器的分辨率改變而改變。 相對(duì)長(zhǎng)度單位有： em：當(dāng)前文本的尺寸。例如： font-size

4、:2em是指文字大小為原來(lái)的2倍。 ex：當(dāng)前字母“x”的高度，一般為字體尺寸的一半。 %：是以當(dāng)前文本的百分比定義尺寸。例如： font-size:300%是指文字大小為原來(lái)的3倍。 small、large：表示比當(dāng)前小一個(gè)級(jí)別或大一個(gè)級(jí)別的尺寸。 Style：定義字體樣式為Normal、Italic、或者Oblique。Italic和Oblique是斜體字體。默認(rèn)設(shè)置為 Normal。相對(duì)應(yīng)的CSS屬性是”font-style”。 注意：Italic和Oblique都是斜體字體。而它們不同的是，Italic是斜體字，而Oblique是傾斜的文字，對(duì)于沒(méi)有斜體的字體應(yīng)該用Oblique。 L

5、ine Height：設(shè)置文本所在行的行高。默認(rèn)為Normal，你也可以自己鍵入一個(gè)精確的數(shù)值并選取一個(gè)計(jì)量單位。比較直觀的寫(xiě)法用百分比，例如140%是指行高等于文字大小的1.4倍。相對(duì)應(yīng)的CSS屬性是”line-height”。 Decoration：在文本中添加underline（下劃線）、overline（上劃線）、line-through（中劃線）、blink（閃爍效果）。這些效果可以同時(shí)存在，將效果前的復(fù)選框選定即可。相對(duì)應(yīng)的CSS屬性是”text-decoration”。 注意：鏈接的默認(rèn)設(shè)置是Underline，我們可以通過(guò)選none去除下劃線。Blink（閃爍效果）只在NC瀏覽

6、器里可以看到。 Weight：給字體指定粗體字的磅值。Normal等同于400；Bold等同于700。設(shè)粗體字一般用bold。相對(duì)應(yīng)的CSS屬性是”font-weight”。 Variant：允許你選取字體的變種，選small-caps（小型大寫(xiě)字母）時(shí)，此樣式區(qū)域內(nèi)所有字母大寫(xiě)。相對(duì)應(yīng)的CSS屬性是”font-variant”。 Case：將選區(qū)中每個(gè)單詞的第一個(gè)字母轉(zhuǎn)為大寫(xiě)，或者令單詞全部大寫(xiě)或全部小寫(xiě)。參數(shù)：capitalize（單詞首字母大寫(xiě)）、uppercase（轉(zhuǎn)換成大寫(xiě)）、lowercase（轉(zhuǎn)換成小寫(xiě)）、none（不轉(zhuǎn)換）。相對(duì)應(yīng)的CSS屬性是” text-transform”

7、。 Color：定義文字顏色。相對(duì)應(yīng)的CSS屬性是” color”。 注意：CSS中顏色的值有三種表示方法： l#RRGGBB格式，是由紅綠藍(lán)三種顏色的值組合，每種顏色的值為“00 FF”的兩位十六進(jìn)制正整數(shù)。例如：#FF0000表示紅色，#FFFF00表示黃色。 lrgb(R,G,B)格式，RGB為三色的值，取0255，例如：rgb(255,0,0)表示紅色，rgb(255,255,0)表示黃色。 l用顏色名稱。CSS可以使用已經(jīng)定義好的顏色名稱。例如：red表示紅色，yellow表示黃色。 2.Background（背景） Background面板主要是對(duì)元素的背景進(jìn)行設(shè)置，包括背景顏色、

8、背景圖象、背景圖象的控制。一般是對(duì)BODY（頁(yè)面）、TABLE（表格）、DIV（區(qū)域）的設(shè)置。 Background Color：設(shè)置元素的背景色。相對(duì)應(yīng)的CSS屬性是”background-color”。 Background Image：設(shè)置元素的背景圖像。相對(duì)應(yīng)的CSS屬性是”background-image”。 Repeat：確定背景圖像是否以及如何重復(fù)。No Repeat：在元素的開(kāi)頭顯示一遍圖像。Repeat：在元素的背景部分水平和垂直方向平鋪圖像。Repeat-x and Repeat-y：分別在水平和垂直方向重復(fù)顯示，默認(rèn)為Repeat。相對(duì)應(yīng)的CSS屬性是”backgroun

9、d-repeat”。 注意：如果定義的元素的BODY，可以控制頁(yè)面背景是否重復(fù)。 Attachment：固定背景圖像或者跟隨內(nèi)容滾動(dòng)。參數(shù)fixed表示固定背景，scroll表示跟隨內(nèi)容滾動(dòng)的背景。相對(duì)應(yīng)的CSS屬性是”background-attachment”。 注意：如果定義的元素的BODY，可以使頁(yè)面背景固定。 Horizontal：指定背景圖像的水平位置?？梢灾付閘eft（左邊），center（居中），right（右邊）；也可以指定數(shù)值，如20px是指背景距離左邊20象素。相對(duì)應(yīng)的CSS屬性是” background-position”。 Vertical：指定背景圖像的垂直位置。

10、可以指定為top（頂部），center（居中），bottom（底部）；也可以指定數(shù)值。相對(duì)應(yīng)的CSS屬性是” background-position”。 注意：水平位置和垂直位置使用的是同一個(gè)CSS屬性，在設(shè)置時(shí)要注意。 3.Block（區(qū)塊） Block面板主要是設(shè)置對(duì)象文本的文字間距、對(duì)齊方式、上標(biāo)、下標(biāo)、排列方式、首行縮進(jìn)等。 Word Spacing：設(shè)置單詞之間的間距。可以設(shè)置負(fù)值。相對(duì)應(yīng)的CSS屬性是” word-spacing”。 注意：一般情況下IE不支持此屬性，僅在MAC平臺(tái)上的IE4+可用。 Letter Spacing：設(shè)置字符之間的間距?？梢灾付ㄘ?fù)值。因?yàn)橹形囊彩亲址?/p>

11、這個(gè)參數(shù)可以設(shè)置文字間的間距。相對(duì)應(yīng)的CSS屬性是” letter-spacing”。 Vertical Align：指定元素的垂直對(duì)齊方式。可以指定sub（下標(biāo)）、super（上標(biāo)）、top（與頂端對(duì)齊）、middle（居中）、bottom（與底端對(duì)齊）。相對(duì)應(yīng)的CSS屬性是” vertical-align”。 Text Align：設(shè)置文本的排列方式。Left（左對(duì)齊）、right（右對(duì)齊）、center（居中）、justify（兩端對(duì)齊）。相對(duì)應(yīng)的CSS屬性是”text-align”。 Text Indent：設(shè)置文本第一行的縮進(jìn)值。負(fù)值用于將文本第一行向外拉。要在每段前空兩格，可設(shè)置為

12、2em，因?yàn)閑m是當(dāng)前字體尺寸，2em就是兩個(gè)字的大小。相對(duì)應(yīng)的CSS屬性是”text-indent”。 Whitespace：設(shè)置如何處理元素內(nèi)的空白符。有三個(gè)選項(xiàng)可選：Normal 會(huì)將空白符全部壓縮；Pre 則會(huì)如同處理 pre 標(biāo)簽內(nèi)的文本一樣處理這些空白符（也就是說(shuō)，所有的空白符，包括空格，標(biāo)簽，回車，等都會(huì)得以保留）；Nowrap 指定文本只有遇到 br 標(biāo)簽時(shí)才換行。相對(duì)應(yīng)的CSS屬性是”white-space”。 4.Box（盒子） Box面板主要設(shè)置對(duì)象的邊界、間距、高度、寬度、和漂浮方式等。 Width：定義元素的寬。相對(duì)應(yīng)的CSS屬性是”width”。 Height：定義

13、元素的高。相對(duì)應(yīng)的CSS屬性是”height”。 注意：寬和高定義的對(duì)象多為圖片，表格，層等。 Float：定義元素的漂浮方式。left 表示對(duì)象浮在左邊、right表示對(duì)象浮在右邊、none 表示對(duì)象不浮動(dòng)。相對(duì)應(yīng)的CSS屬性是”float”。 Clear：不允許元素的漂浮。left表示不允許左邊有浮動(dòng)對(duì)象、right表示不允許右邊有浮動(dòng)對(duì)象、none表示允許兩邊都可以有浮動(dòng)對(duì)象、both不允許有浮動(dòng)對(duì)象。相對(duì)應(yīng)的CSS屬性是”clear”。 Padding：定義元素內(nèi)容與其邊框的空距（如果元素沒(méi)有邊框就是指頁(yè)邊的空白）?？梢苑謩e設(shè)置top（上補(bǔ)白）、right（右補(bǔ)白）、bottom（下補(bǔ)

14、白）、left（左補(bǔ)白）的值。相對(duì)應(yīng)的CSS屬性分別是”padding; padding-top; padding-right; padding-bottom; padding-left”。 Margin：定義元素的邊框與其他元素之間的距離（如果沒(méi)有邊框就是指內(nèi)容之間的距離）?？梢苑謩e設(shè)置top（上邊界）、right（右邊界）、bottom（下邊界）、left（左邊界）的值。相對(duì)應(yīng)的CSS屬性分別是”margin; margin-top; margin-right; margin-bottom; margin-left”。 下面是補(bǔ)白、邊框、邊界之間的關(guān)系圖： 5.Border（邊框） Bor

15、der面板可以設(shè)置對(duì)象邊框的寬度、顏色及樣式。 Width：設(shè)置元素邊的寬度?？梢苑謩e設(shè)定Top（上邊寬）、Right（右邊寬）、Bottom（下邊寬）、Left（左邊寬）的值。相對(duì)應(yīng)的CSS屬性分別是”border; border-top; border-right; border-bottom; border-left”。 Color：設(shè)置邊框的顏色。你可以分別對(duì)每條邊設(shè)置顏色。相對(duì)應(yīng)的CSS屬性分別是”border-color; border-top-color; border-right-color; border-bottom-color; border-left-color”。 注

16、意：我們可以通過(guò)設(shè)置不同的顏色做出亮邊和暗邊的效果，這樣元素看起來(lái)是立體的。 Style：設(shè)置邊框樣式。可以設(shè)置為none（無(wú)邊框）、dotted（點(diǎn)線）、dashed（虛線）、solid（實(shí)線）、double（雙線）、groove（凹槽）、ridge（凸槽）、inset（凹邊）、outset（凸邊）等邊框樣式。相對(duì)應(yīng)的CSS屬性是”border-style”。 注意：dotted（點(diǎn)線）、dashed（虛線）必須要IE5.5以上或者M(jìn)AC平臺(tái)支持，否則效果為實(shí)線。 6.List（列表） List面板可以設(shè)置列表項(xiàng)樣式、列表項(xiàng)圖片、和位置。 Type：設(shè)置列表項(xiàng)所使用的預(yù)設(shè)標(biāo)記?？梢栽O(shè)置的樣式

17、有：disc（實(shí)心圓）、circle（空心圓）、square（方塊）、decimal（阿拉伯?dāng)?shù)字）、lower-roman（小寫(xiě)羅馬數(shù)字）、upper-roman（大寫(xiě)羅馬數(shù)字）、lower-alpha（小寫(xiě)英文字母）、upper-alpha（大寫(xiě)英文字母）、none（無(wú)項(xiàng)目符號(hào)）。相對(duì)應(yīng)的CSS屬性是”list-style-type”。 Bullet Image：設(shè)置列表項(xiàng)的圖像。值為圖象的URL地址或路徑。 相對(duì)應(yīng)的CSS屬性是”list-style-image”。 Position：設(shè)置列表項(xiàng)在文本內(nèi)還是在文本外。Inside：列表項(xiàng)目標(biāo)記放置在文本以內(nèi)，Outside：列表項(xiàng)目標(biāo)記放置

18、在文本以外。相對(duì)應(yīng)的CSS屬性是”list-style-position”。 7.Positioning（定位） Positioning面板就相當(dāng)于對(duì)象放在一個(gè)層里來(lái)定位，它相當(dāng)于HTML的DIV標(biāo)記。你可以把定義看作為一個(gè)CSS定義的層。 Type：設(shè)定對(duì)象的定位方式。有三種方式：Absolute（絕對(duì)定位）、Relative（相對(duì)定位）、Static（無(wú)特殊定位）。相對(duì)應(yīng)的CSS屬性是”position”。 Visibility：設(shè)定對(duì)象定位層的最初顯示狀態(tài)。有三種狀態(tài)：Inherit（繼承父層的顯示屬性）、Visible（對(duì)象可視）、Hidden隱藏對(duì)象。相對(duì)應(yīng)的CSS屬性是”visib

19、ility”。 Z-Index：設(shè)置對(duì)象的層疊順序。編號(hào)較大的層會(huì)顯示在編號(hào)較小的層上邊。變量值可以是正值也可以是負(fù)值。相對(duì)應(yīng)的CSS屬性是”z-index”。 Overflow：設(shè)置如果層的內(nèi)容超出了層的大小時(shí)如何處理。有四種處理方式：visible，增加層的大小，從而將層的所有內(nèi)容顯示出來(lái)；hidden，保持層的大小不變，將超出層的內(nèi)容剪裁掉；Scroll，總是顯示滾動(dòng)條；Auto，只有在內(nèi)容超出層的邊界時(shí)才顯示滾動(dòng)條。相對(duì)應(yīng)的CSS屬性是”overflow”。 Placement：設(shè)置對(duì)象定位層的位置和大小。可以分別設(shè)置left（左邊定位）、top（頂部定位）、width（寬）、heig

20、ht（高）。相對(duì)應(yīng)的CSS屬性分別是”left; top; width; height”。 Clip：定義定位層的可視區(qū)域。區(qū)域外的部分為不可視區(qū)，為透明的?？梢岳斫鉃樵诙ㄎ粚由戏乓粋€(gè)矩形遮罩的效果。相對(duì)應(yīng)的CSS屬性是”clip”。 注意：此參數(shù)只要在絕對(duì)定位時(shí)有效。 注意：當(dāng)Type里設(shè)定了絕對(duì)定位后，會(huì)為對(duì)象加上一個(gè)絕對(duì)定位的層。這個(gè)CSS創(chuàng)建的層同一般的層一樣有屬性面板，也顯示在層管理面板中。你可以通過(guò)設(shè)置這個(gè)定位層的屬性面板修改上述參數(shù)，不過(guò)在此屬性面板里改動(dòng)的值會(huì)作為內(nèi)嵌樣式加在對(duì)象標(biāo)記后面，下圖是定位層的屬性面板： 8.Extensions（擴(kuò)展） Pagebreak：在打印的時(shí)

21、候強(qiáng)迫在樣式控制的對(duì)象前后換頁(yè)。 Before：設(shè)置對(duì)象前出現(xiàn)的頁(yè)分割符。設(shè)置為always時(shí)，始終在對(duì)象之前插入頁(yè)分割符。相對(duì)應(yīng)的CSS屬性是”page-break-before”。 After：設(shè)置對(duì)象后出現(xiàn)的頁(yè)分割符。設(shè)置為always時(shí)，始終在對(duì)象之后插入頁(yè)分割符。相對(duì)應(yīng)的CSS屬性是”'>。 注意：以上IE5僅支持always值和空白值（null）。 Cursor：當(dāng)鼠標(biāo)滑過(guò)樣式控制的對(duì)象時(shí)改變鼠標(biāo)形狀。可以設(shè)置為hand（手型）、crosshair（“十”型）、text （“I”型）、wait（等待）、default（默認(rèn)）、help（幫助）、e-resize（東箭頭

22、）、ne-resize（東北箭頭）、n-resize（北箭頭）、nw-resize（西北箭頭）、w-resize（西箭頭）、sw-resize（西南箭頭）、s-resize（南箭頭）、se-resize（東南箭頭）和auto（自動(dòng)）。 Filter：在樣式中加上濾鏡特效。由于此屬性內(nèi)容比較多，我們將到下一章單獨(dú)對(duì)濾鏡介紹。 二、 濾鏡 CSS提供了一些內(nèi)置的多媒體濾鏡特效，使用這種技術(shù)可以把可視化的濾鏡和轉(zhuǎn)換效果添加到一個(gè)標(biāo)準(zhǔn)的HTML元素上，例如圖片、文本容器、以及其他一些對(duì)象。Dreamweaver4提供了16種濾鏡可供選擇，如下圖： 下面，我們就來(lái)看看在Dreamweaver4里如何方便

23、的使用這些CSS濾鏡。 建立一個(gè)自定義樣式“.filter”，在Filter下拉框里選Alpha濾鏡，我們將“Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)”的Opacity參數(shù)設(shè)為50，后面的參數(shù)都刪掉，如下圖： 按OK后就建立了一個(gè)“.filter”的自定義樣式，我們把這個(gè)樣式應(yīng)用到圖片上，圖片就是半透明的了。如果把這個(gè)樣式應(yīng)用到表格上，表格也變成了半透明狀態(tài)了。注意所有濾鏡效果都要在瀏覽器里才能看到。下面是原碼： <style type="text/c

24、ss"> <!- .filter filter: Alpha(Opacity=50) -> </style> 注意：這個(gè)例子我們沒(méi)有用到后面的幾項(xiàng)參數(shù)，只用到Opacity參數(shù)，所以將其他參數(shù)刪掉。 下面我們來(lái)講解每個(gè)濾鏡的效果和參數(shù)： 1.Alpha：設(shè)置透明度 Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) Opacity：透明度級(jí)別，范圍是0-100，0代表完全透明，100代表完全不透明。 FinishOpacity：設(shè)置漸變的

25、透明效果時(shí)，用來(lái)指定結(jié)束時(shí)的透明度，范圍也是0 到 100。 Style：設(shè)置漸變透明的樣式，值為0代表統(tǒng)一形狀、1代表線形、2代表放射狀、3代表長(zhǎng)方形。 StartX和StartY：代表漸變透明效果的開(kāi)始X和Y坐標(biāo)。 FinishX和FinishY：代表漸變透明效果結(jié)束X和Y 的坐標(biāo)。 2.BlendTrans：圖像之間的淡入和淡出的效果 BlendTrans(Duration=?) Duration：淡入或淡出的時(shí)間。 注意：這個(gè)濾鏡必須配合JS建立圖片序列，才能做出圖片間效果。 3.Blru：建立模糊效果 Blur(Add=?, Direction=?, Strength=?) Add：

26、是否單方向模糊，此參數(shù)是一個(gè)布爾值，true（非0）或false（0）。 Direction：設(shè)置模糊的方向，其中0度代表垂直向上，然后每45度為一個(gè)單位。 Strength：代表模糊的象素值。 4.Chroma：把指定的顏色設(shè)置為透明 Chroma(Color=?) Color：是指要設(shè)置為透明的顏色。 5.DropShadow：建立陰影效果 DropShadow(Color=?, OffX=?, OffY=?, Positive=?) Color：指定陰影的顏色。 OffX：指定陰影相對(duì)于元素在水平方向偏移量，整數(shù)。 OffY：指定陰影相對(duì)于元素在垂直方向偏移量，整數(shù)。 Positive：

27、是一個(gè)布爾值，值為true（非0）時(shí)，表示為建立外陰影；為false(0)，表示為建立內(nèi)陰影。 6.FlipH：將元素水平反轉(zhuǎn) 7.FlipV：將元素垂直反轉(zhuǎn) 8.Glow：建立外發(fā)光效效果 Glow(Color=?, Strength=?) Color：是指定發(fā)光的顏色。 Strength：光的強(qiáng)度，可以是1到255之間的任何整數(shù)，數(shù)字越大，發(fā)光的范圍就越大。 9.Gray：去掉圖像的色彩，顯示為黑白圖象 10.Invert：反轉(zhuǎn)圖象的顏色，產(chǎn)生類似底片的效果 11.Light：放置光源的效果，可以用來(lái)模擬光源在物體上的投影效果 注意：此效果需要用JS設(shè)置光的位置和強(qiáng)度。 12.Mask：建立透明遮罩 Mask(Color=?) Color：設(shè)置底色，讓對(duì)象遮住底色的部分透明。 13.RevealTrans：建立切換效果 RevealTrans(Duration=?, Transition=?) Duration：是切換時(shí)間，以秒為單位。 Transtition：是切換方式，可設(shè)置為從