1.Type（類型）
Type面板主要是對文字的字體，大小，顏色，效果等基本樣式進行設置。設置時，我們只對要改變的屬性進行設置，沒有必要改變的屬性就空着。
注意：屬性名帶*號的是指樣式效果不能在編輯文檔時顯示，要用瀏覽器打開才能看到效果。
Font：設置字體系列。什麼叫字體系列呢？是指對文字設定幾個字體，當遇到第一個字體不能顯示的文字時會自動用系列中的第二個字體或後面的字體顯示。相對應的CSS屬性是”font-family”。
注意：Dreamweaver4已經內置設定了6個系列的英文字體，一般英文字體我們用“Verdana, Arial, Helvetica, sans-serif”這個系列比較好看。如果不用這些字體系列，你就需要自己編輯字體系列，你可以通過下拉框最下面的“Edit Font List”來創建新的字體系列，也可以直接手動在下拉框裏寫字體名，字體之間用逗號隔開。中文網頁默認字體是宋體，一般就空着不要選取任何字體。
Size：定義文字的大小。你可以通過選取數字和度量單位來選擇具體的字體大小，或者你也可以選擇一個相對的字體大小。最好使用Pixels作爲單位，這樣不會在瀏覽器中文本變形。一般小字體用比較標準的12px。相對應的CSS屬性是”font-size”。
注意：CSS中長度的單位分絕對長度單位和相對長度單位，一般我們常用的絕對長度單位有：
px：（象素）根據顯示器的分辨率來確定長度。
pt：（字號）根據windows系統定義的字號大小來確定長度。
mm、cn、in：（毫米、釐米、英寸）根據顯示的實際尺寸來確定長度。此類單位不隨顯示器的分辨率改變而改變。
相對長度單位有：
em：當前文本的尺寸。例如：{ font-size:2em}是指文字大小爲原來的2倍。
ex：當前字母“x”的高度，一般爲字體尺寸的一半。
%：是以當前文本的百分比定義尺寸。例如：{ font-size:300%}是指文字大小爲原來的3倍。
small、large：表示比當前小一個級別或大一個級別的尺寸。
Style：定義字體樣式爲Normal、Italic、或者Oblique。Italic和Oblique是斜體字體。默認設置爲Normal。相對應的CSS屬性是”font-style”。
注意：Italic和Oblique都是斜體字體。而它們不同的是，Italic是斜體字，而Oblique是傾斜的文字，對於沒有斜體的字體應該用Oblique。
Line Height：設置文本所在行的行高。默認爲Normal，你也可以自己鍵入一個精確的數值並選取一個計量單位。比較直觀的寫法用百分比，例如140%是指行高等於文字大小的1.4倍。相對應的CSS屬性是”line-height”。
Decoration：在文本中添加underline（下劃線）、overline（上劃線）、line-through（中劃線）、blink（閃爍效果）。這些效果可以同時存在，將效果前的複選框選定即可。相對應的CSS屬性是”text-decoration”。
注意：鏈接的默認設置是Underline，我們可以通過選none去除下劃線。Blink（閃爍效果）只在NC瀏覽器裏可以看到。
Weight：給字體指定粗體字的磅值。Normal等同於400；Bold等同於700。設粗體字一般用bold。相對應的CSS屬性是”font-weight”。
Variant：允許你選取字體的變種，選small-caps（小型大寫字母）時，此樣式區域內所有字母大寫。相對應的CSS屬性是”font-variant”。
Text-transform：將選區中每個單詞的第一個字母轉爲大寫，或者令單詞全部大寫或全部小寫。參數：capitalize（單詞首字母大寫）、uppercase（轉換成大寫）、lowercase（轉換成小寫）、none（不轉換）。相對應的CSS屬性是”text-transform”。
Color：定義文字顏色。相對應的CSS屬性是”color”。
注意：CSS中顏色的值有三種表示方法：
l#RRGGBB格式，是由紅綠藍三種顏色的值組合，每種顏色的值爲“00 –FF”的兩位十六進制正整數。例如：#FF0000表示紅色，#FFFF00表示黃色。
lrgb(R,G,B)格式，RGB爲三色的值，取0~255，例如：rgb(255,0,0)表示紅色，rgb(255,255,0)表示黃色。
l用顏色名稱。CSS可以使用已經定義好的顏色名稱。例如：red表示紅色，yellow表示黃色。
2.Background（背景）
Background面板主要是對元素的背景進行設置，包括背景顏色、背景圖象、背景圖象的控制。一般是對BODY（頁面）、TABLE（表格）、DIV（區域）的設置。
Background Color：設置元素的背景色。相對應的CSS屬性是”background-color”。
Background Image：設置元素的背景圖像。相對應的CSS屬性是”background-image”。
Repeat：確定背景圖像是否以及如何重複。No Repeat：在元素的開頭顯示一遍圖像。Repeat：在元素的背景部分水平和垂直方向平鋪圖像。Repeat-x and Repeat-y：分別在水平和垂直方向重複顯示，默認爲Repeat。相對應的CSS屬性是”background-repeat”。
注意：如果定義的元素的BODY，可以控制頁面背景是否重複。
Attachment：固定背景圖像或者跟隨內容滾動。參數fixed表示固定背景，scroll表示跟隨內容滾動的背景。相對應的CSS屬性是”background-attachment”。
注意：如果定義的元素的BODY，可以使頁面背景固定。
Horizontal：指定背景圖像的水平位置。可以指定爲left（左邊），center（居中），right（右邊）；也可以指定數值，如20px是指背景距離左邊20象素。相對應的CSS屬性是”background-position”。
Vertical：指定背景圖像的垂直位置。可以指定爲top（頂部），center（居中），bottom（底部）；也可以指定數值。相對應的CSS屬性是”background-position”。
注意：水平位置和垂直位置使用的是同一個CSS屬性，在設置時要注意。
3.Block（區塊）
Block面板主要是設置對象文本的文字間距、對齊方式、上標、下標、排列方式、首行縮進等。
Word Spacing：設置單詞之間的間距。可以設置負值。相對應的CSS屬性是”word-spacing”。
注意：一般情況下IE不支持此屬性，僅在MAC平臺上的IE4+可用。
Letter Spacing：設置字符之間的間距。可以指定負值。因爲中文也是字符，這個參數可以設置文字間的間距。相對應的CSS屬性是”letter-spacing”。
Vertical Align：指定元素的垂直對齊方式。可以指定sub（下標）、super（上標）、top（與頂端對齊）、middle（居中）、bottom（與底端對齊）……。相對應的CSS屬性是”vertical-align”。
Text Align：設置文本的排列方式。Left（左對齊）、right（右對齊）、center（居中）、justify（兩端對齊）。相對應的CSS屬性是”text-align”。
Text Indent：設置文本第一行的縮進值。負值用於將文本第一行向外拉。要在每段前空兩格，可設置爲2em，因爲em是當前字體尺寸，2em就是兩個字的大小。相對應的CSS屬性是”text-indent”。
Whitespace：設置如何處理元素內的空白符。有三個選項可選：Normal 會將空白符全部壓縮；Pre 則會如同處理pre 標籤內的文本一樣處理這些空白符（也就是說，所有的空白符，包括空格，標籤，回車，等都會得以保留）；Nowrap 指定文本只有遇到br 標籤時才換行。相對應的CSS屬性是”white-space”。
4.Box（盒子）
Box面板主要設置對象的邊界、間距、高度、寬度、和漂浮方式等。
Width：定義元素的寬。相對應的CSS屬性是”width”。
Height：定義元素的高。相對應的CSS屬性是”height”。
注意：寬和高定義的對象多爲圖片，表格，層等。
Float：定義元素的漂浮方式。left 表示對象浮在左邊、right表示對象浮在右邊、none 表示對象不浮動。相對應的CSS屬性是”float”。
Clear：不允許元素的漂浮。left表示不允許左邊有浮動對象、right表示不允許右邊有浮動對象、none表示允許兩邊都可以有浮動對象、both不允許有浮動對象。相對應的CSS屬性是”clear”。
Padding：定義元素內容與其邊框的空距（如果元素沒有邊框就是指頁邊的空白）。可以分別設置top（上補白）、right（右補白）、bottom（下補白）、left（左補白）的值。相對應的CSS屬性分別是”padding; padding-top; padding-right; padding-bottom; padding-left”。
Margin：定義元素的邊框與其他元素之間的距離（如果沒有邊框就是指內容之間的距離）。可以分別設置top（上邊界）、right（右邊界）、bottom（下邊界）、left（左邊界）的值。相對應的CSS屬性分別是”margin; margin-top; margin-right; margin-bottom; margin-left”。
下面是補白、邊框、邊界之間的關係圖：
5.Border（邊框）
Border面板可以設置對象邊框的寬度、顏色及樣式。
Width：設置元素邊的寬度。可以分別設定Top（上邊寬）、Right（右邊寬）、Bottom（下邊寬）、Left（左邊寬）的值。相對應的CSS屬性分別是”border; border-top; border-right; border-bottom; border-left”。
Color：設置邊框的顏色。你可以分別對每條邊設置顏色。相對應的CSS屬性分別是”border-color; border-top-color; border-right-color; border-bottom-color; border-left-color”。
注意：我們可以通過設置不同的顏色做出亮邊和暗邊的效果，這樣元素看起來是立體的。
Style：設置邊框樣式。可以設置爲none（無邊框）、dotted（點線）、dashed（虛線）、solid（實線）、double（雙線）、groove（凹槽）、ridge（凸槽）、inset（凹邊）、outset（凸邊）等邊框樣式。相對應的CSS屬性是”border-style”。
注意：dotted（點線）、dashed（虛線）必須要IE5.5以上或者MAC平臺支持，否則效果爲實線。
6.List（列表）
List面板可以設置列表項樣式、列表項圖片、和位置。
Type：設置列表項所使用的預設標記。可以設置的樣式有：disc（實心圓）、circle（空心圓）、square（方塊）、decimal（阿拉伯數字）、lower-roman（小寫羅馬數字）、upper-roman（大寫羅馬數字）、lower-alpha（小寫英文字母）、upper-alpha（大寫英文字母）、none（無項目符號）。相對應的CSS屬性是”list-style-type”。
Bullet Image：設置列表項的圖像。值爲圖象的URL地址或路徑。相對應的CSS屬性是”list-style-image”。
Position：設置列表項在文本內還是在文本外。Inside：列表項目標記放置在文本以內，Outside：列表項目標記放置在文本以外。相對應的CSS屬性是”list-style-position”。
7.Positioning（定位）
Positioning面板就相當於對象放在一個層裏來定位，它相當於HTML的DIV標記。你可以把定義看作爲一個CSS定義的層。
Type：設定對象的定位方式。有三種方式：Absolute（絕對定位）、Relative（相對定位）、Static（無特殊定位）。相對應的CSS屬性是”position”。
Visibility：設定對象定位層的最初顯示狀態。有三種狀態：Inherit（繼承父層的顯示屬性）、Visible（對象可視）、Hidden隱藏對象。相對應的CSS屬性是”visibility”。
Z-Index：設置對象的層疊順序。編號較大的層會顯示在編號較小的層上邊。變量值可以是正值也可以是負值。相對應的CSS屬性是”z-index”。
Overflow：設置如果層的內容超出了層的大小時如何處理。有四種處理方式：visible，增加層的大小，從而將層的所有內容顯示出來；hidden，保持層的大小不變，將超出層的內容剪裁掉；Scroll，總是顯示滾動條；Auto，只有在內容超出層的邊界時才顯示滾動條。相對應的CSS屬性是”overflow”。
Placement：設置對象定位層的位置和大小。可以分別設置left（左邊定位）、top（頂部定位）、width（寬）、height（高）。相對應的CSS屬性分別是”left; top; width; height”。
Clip：定義定位層的可視區域。區域外的部分爲不可視區，爲透明的。可以理解爲在定位層上放一個矩形遮罩的效果。相對應的CSS屬性是”clip”。
注意：此參數只要在絕對定位時有效。
注意：當Type裏設定了絕對定位後，會爲對象加上一個絕對定位的層。這個CSS創建的層同一般的層一樣有屬性面板，也顯示在層管理面板中。你可以通過設置這個定位層的屬性面板修改上述參數，不過在此屬性面板裏改動的值會作爲內嵌樣式加在對象標記後面，下圖是定位層的屬性面板：
8.Extensions（擴展）
Pagebreak：在打印的時候強迫在樣式控制的對象前後換頁。
Before：設置對象前出現的頁分割符。設置爲always時，始終在對象之前插入頁分割符。相對應的CSS屬性是”page-break-before”。
After：設置對象後出現的頁分割符。設置爲always時，始終在對象之後插入頁分割符。相對應的CSS屬性是”'>。
注意：以上IE5僅支持always值和空白值（null）。
Cursor：當鼠標滑過樣式控制的對象時改變鼠標形狀。可以設置爲hand（手型）、crosshair（“十”型）、text （“I”型）、wait（等待）、default（默認）、help（幫助）、e-resize（東箭頭）、ne-resize（東北箭頭）、n-resize（北箭頭）、nw-resize（西北箭頭）、w-resize（西箭頭）、sw-resize（西南箭頭）、s-resize（南箭頭）、se-resize（東南箭頭）和auto（自動）。
Filter：在樣式中加上濾鏡特效。由於此屬性內容比較多，我們將到下一章單獨對濾鏡介紹。
二、濾鏡
CSS提供了一些內置的多媒體濾鏡特效，使用這種技術可以把可視化的濾鏡和轉換效果添加到一個標準的HTML元素上，例如圖片、文本容器、以及其他一些對象。Dreamweaver4提供了16種濾鏡可供選擇，如下圖：
下面，我們就來看看在Dreamweaver4裏如何方便的使用這些CSS濾鏡。
建立一個自定義樣式“.filter”，在Filter下拉框裏選Alpha濾鏡，我們將“Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)”的Opacity參數設爲50，後面的參數都刪掉，如下圖：
按OK後就建立了一個“.filter”的自定義樣式，我們把這個樣式應用到圖片上，圖片就是半透明的了。如果把這個樣式應用到表格上，表格也變。
[背景]屬性共有六項：
「背景顏色」（background-color），設置背景顏色。
「背景圖像」（background-image），設置網頁背景圖像。
「重複」（background-repeat），控制背景圖像的平鋪方式，有不重複（no-repeat）、重複（repeat，沿水平、垂直方向平鋪）、橫向重複（repeat-X，圖像沿水平方向平鋪）和縱向重複（repeat-Y，沿圖像垂直方向平鋪）等4種選擇。
「附加」（background-attachment），用於控制背景圖像是否會隨頁面的滾動而一起滾動。有固定（fixd，文字滾動時，背景圖像保質固定）和滾動（scroll，背景圖像隨文字內容一起滾動）兩種選擇。
「水平位置」/「垂直位置」（background-position），確定背景圖像的水平、垂直位置
。共有左對齊（left）、右對齊（right）、頂部（top）、底部（bottom）、居中（center）和值（自定義背景圖像的起點位置，可使用戶對背景圖像的位置做出更精確的控制）等6種選擇。
[類型]屬性共有九項：
「字體」（font-family），設定時，需考慮瀏覽器中有無該字體。
「大小」（font-size），注意度量單位。
「粗細」（font-weight），除了normal（正常）、bold（粗體）、bolder（特粗）、lighter（細體）外，還有9種以像素爲度量爲單位的設置方式。
「樣式」（font-style），也就是字型。
「行高」（line-height），就是行距。注意，行距只能以是字體大小值爲
「變形」（font-variant），可以將正常文字一半尺寸後大寫顯示，但IE目前不支持這項屬性。
「大小寫」（text-transform），這項屬性能輕而易舉地控制字母大小寫，有首字大寫（capitalize、大寫（uppercase）、小寫（lowercase）和無（none，使所有繼承文字和變形參數被忽略，文字將以正常形式顯示）等4種。
「修飾」（text-decoration），用於控制鏈接文本的顯示形態，有下劃線（underline）、無下劃線（overline）、刪除線（line-through）、閃爍（blink）和無（none ，使上述效果均不會發生）等5種修飾方式。但IE4不支持文字閃爍。
[區塊]屬性共有六項：
「單詞間距」（word-spacing），主要用於控制文字間相隔的距離。有正常（normal）和值（自定義間隔值）兩種選擇方式。當選擇值時，可用的單位有英吋（in）、釐米（cm）、毫米（mm）、點數(pt）、12pt字(pc）、字體高（em）、字體x有高（ex）像素（px）。
「字母間距」（letter-spacing），其作用與字符間距類似，也有正常（normal）和值（自定義間隔值）兩種選擇方式。
「垂直對齊」（vertical-align），控制文字或圖像相對於其母體元素的垂直位置。如將一個2×3像素的GIF圖像同其母體元素文字的頂部垂直對齊，則該GIF圖像將在該行文字的頂部顯示。共有基線（baseline，將元素的基準線同母體元素的基準線對齊）、下標（sub，將元素以下標的形式顯示）,上標（super，將元素以上標的形式顯示）、頂部（top ，將元素頂部同最高的母體元素對齊）、文本頂對齊（text-top，將元素的頂部同母體元素文字的頂部對齊）、中線對齊（middle，將元素的中點同母體元素的中點對齊）、底部（bottom，將元素的底部同最低的母體元素對齊）及值（自定義）等9種選擇。
「文本對齊」（text-align），設置塊的水平對齊方式。共有左對齊（left）、右對齊（right）、居中（center）和均分（justify）等4種選擇。
「文字縮進」（text-indent），控制塊的縮進程度。
「空白間距」（white-space），在HTML中，空格是被省略的；在CSS中則使用屬性（white-space）控制空格的輸入。共有正常（normal）、保留（pre）和不換行（nowrap）等3種選擇。
[邊框]的屬性有3項：
「寬」（border-width），控制邊框的寬度，其中分爲4個屬性：border-top-width頂邊框的寬度、border-right-width右邊框的寬度、border-bottom-width底邊框的寬度、border-left-width左邊框的寬度。
「顏色」（border-color），設置各邊框的顏色。若要使邊框的四邊顯示不同的顏色，可在設置中分別列出。如，
p{: #ff0000 #009900 #0000ff #55cc00}
瀏覽器將四種顏色依次理解爲：上邊框、右邊框、底邊框和左邊框（自上開始順時針）。
「樣式」（border-style），設定邊框的樣式，共有無（none）、虛線（dotted）、點劃線線（dotted）、點劃線（dashed）、實線（solid）、雙線（double ）、槽狀（grove）、脊狀（ridge）、凹陷（inset）和凸起（outset）等9種。
「盒子」屬性共有6項：
「寬」（width），確定盒子本身的寬度，可以使盒子的寬度不依靠它所包含的內容多少。
「高」（height），確定盒子本身的高度。
「浮動」（float），設置塊元素的浮動效果。
「清除」（clear），用於清除設置的浮動效果。
「邊距」（margin），控制圍繞邊框的邊距大小。其中包含4個屬性：margin-top控制上邊距的寬度、margin-right控制右邊距的寬度、margin-bottom控制下邊距的寬度、margin-left控制左邊距的寬度。
「邊界」（padding），確定圍繞塊元素的空格填充數量，其中包含4個屬性「padding-top控制上留白的寬度、padding-right控制右留白的寬度、padding-bottom控制下留白寬度、padding-left控制左留白的寬度。
[列表]屬性共有3項：
「類型」（list-style-type），確定列表每一項前使用的符號，共有圓點（disc）、圓圈（circle）、方形（square）、數字（decimal）、小寫羅馬數字（lower-roman ）、大寫羅馬數字（upper-roman）、小寫字母（lower-alpha）和大寫字母（upper－alpha）等8種。
「項目圖像」（list-style-image），其作用是將列表前面的符號換爲圖形。
「位置」（list-style-position），用於描述列表位置，有內（outside）和外（inside）兩種選擇。
[定位]屬性共有6項：
「類型」（position），用於確定定位的類型，共有絕對（absolute）、相對（relative）和靜態（static）等3種選擇。
「Z軸」（z-index），用於控制網頁中塊元素的疊放順序，可爲元素設置重疊效果。該屬性的參數值使用純整數，值爲0時，元素在最下層，適用於絕對定位或相對定位的元素。
「顯示」（visibility）使用該屬性可將網頁中的元素隱藏，共有繼承（inherit，繼承母體要素的可視性設置）、可見（visible）和隱藏（hidden）等3種選擇。
「溢出」（overflow），在確定了元素的高度和寬度後，如果元素的面積不能全部顯示元素中的內容時，該屬性做一日和尚撞一天鐘起作用了。其中共有可見（visible，擴大面積以顯示所有內容）、隱藏（hidden，隱藏超出範圍的內容）、滾動（scroll，在元素的右邊顯示一個滾動條）和自動（auto，當內容超出元素面積時，顯示滾動條）等4種選擇。
「定位」，當爲元素確定了絕對定位類型後，該組屬性決定元素在網頁中的具體位置。該組屬性包含4個子屬性，分別是「左」（屬性名爲「left」，控制元素左邊的起始位置）、「上」（屬性名爲「top」，控制元素上面的起始位置）、 「寬」或「高」（與「盒子」類屬性面板中「寬」或「高」的屬性作用相同）。
「剪輯」（clip），當元素被指定爲絕對定位類型後，該屬性可以把元素區域切成各種形狀，但目前提供的只有方形一種。屬性值爲rect(top right bottom left)，即：
rect(top right bottom left)，屬性值的單位爲任何一種長度單位。
[擴展]屬性共有兩部分：
「分頁」，其中兩個屬性的作用是爲打印的頁面設置分頁符。 「之前」（page-break-before）；「之後」（page-break-after）。
「視覺效果」，其中兩個屬性的作用是爲網頁中的元素施加特殊效果。 「光標」（cusor），可以指定在某個元素上要使用的光標形狀，共有15種選擇方式，分別代表鼠標在Windows操作系統中的各種形狀。另外它還可以指定指針圖標的URL地址；「濾鏡」（fiter），可以爲網頁中元素施加各種奇妙的濾鏡效果，共包含有16種濾鏡。