CSS教學(六) DW4中CSS屬性詳解
- 巴扎黑原創
- 2017-04-01 14:04:252044瀏覽
在Dreamweaver4的CSS樣式裡包含了W3C規範定義的所有CSS1的屬性，Dreamweaver4把這些屬性分為Type（類型）、Background（背景）、Block（塊）、Box（盒子）、Border（邊框） 、 List（列表）、Positioning（定位）、Extensions（擴展）八個部分，如下圖，下面我們分別詳細講解。
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」。
Case：將選區中每個單字的第一個字母轉為大寫，或令單字全部大寫或全部小寫。參數：capitalize（單字首字母大寫）、uppercase（轉換成大寫）、lowercase（轉換成小寫）、none（不轉換）。相對應的CSS屬性是” text-transform”。
Color：定義文字顏色。相對應的CSS屬性是” color」。
注意：CSS中顏色的值有三種表示方法：
l #RRGGBB格式，是由紅綠藍三種顏色的值組合，每種顏色的值為「00 – FF”的兩位十六進制正整數。例如：#FF0000表示紅色，#FFFF00表示黃色。
l rgb(R,G,B)格式，RGB為三色的值，取0~255，例如：rgb(255,0,0)表示紅色，rgb(255,255,0)表示黃色。
l 用顏色名稱。 CSS可以使用已經定義好的顏色名稱。例如：red表示紅色，yellow表示黃色。
2. Background（背景）
Background面板主要是對元素的背景進行設置，包括背景顏色、背景圖象、背景圖象的控制。一般是BODY（頁）、TABLE（表）、p（區）的設定。
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的p標記。你可以把定義看當作一個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：當滑鼠滑過樣式控制的物件時改變滑鼠形狀。 、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」的自訂樣式，我們把這個樣式應用到圖片上，圖片就是半透明的了。如果把這個樣式應用在表格上，表格也變成了半透明狀態了。注意所有濾鏡效果都要在瀏覽器中才能看到。以下是原碼：
注意：這個範例我們沒有用到後面的幾個參數，只用到Opacity參數，所以將其他參數刪掉。
下面我們來說明每個濾鏡的效果和參數：
1. Alpha：設定透明度
Alpha(Opacity=?, FinishOpacity=?, style=? , StartX=?, StartY=?, FinishX=?, FinishY=?)
#Opacity：透明度級別，範圍是0-100，0代表完全透明，100代表完全不透明。
FinishOpacity：設定漸層的透明效果時，用來指定結束時的透明度，範圍也是0 到 100。
style：設定漸層透明的樣式，數值為0代表統一形狀、1代表線形、2代表放射狀、3代表長方形。
StartX和StartY：代表漸層透明效果的開始X和Y座標。
FinishX和FinishY：代表漸層透明效果結束X和Y 的座標。
2. BlendTrans：影像之間的淡入和淡出的效果
BlendTrans(Duration=?)
Duration：淡入或淡出的時間。
注意：這個濾鏡必須配合JS建立圖片序列，才能做出影像間效果。
3. Blru：建立模糊效果
Blur(Add=?, Direction=?, Strength=?)
Add：是否單方向模糊，此參數是一個布林值，true（非0）或false（0）。
Direction：設定模糊的方向，其中0度代表垂直向上，然後每45度為一個單位。
Strength：代表模糊的像素值。
4. Chroma：把指定的顏色設定為透明
Chroma(Color=?)
Color：是指要設定為透明的顏色。
5. DropShadow：建立陰影效果
DropShadow(Color=?, OffX=?, OffY=?, Positive=?)
Color：指定陰影的顏色。
OffX：指定陰影相對於元素在水平方向偏移量，整數。
OffY：指定陰影相對於元素在垂直方向偏移量，整數。
Positive：是一個布林值，值為true（非0）時，表示為建立外陰影；為false(0)，表示為建立內陰影。
6. FlipH：將元素水平反轉
7. FlipV：將元素垂直反轉
8. Glow：建立外發光效效果
Glow(Color=?, Strength=?)
Color：是指定發光的顏色。
Strength：光的強度，可以是1到255之間的任何整數，數字越大，發光的範圍就越大。
9. Gray：去掉影像的色彩，顯示為黑白圖象
10. Invert：反轉圖象的顏色，產生類似底片的效果
##11. Light：放置光源的效果，可用來模擬光源在物體上的投影效果
#注意：此效果需要用JS設定光的位置和強度。
12. Mask：建立透明遮罩
Mask(Color=?)
Color：設定底色，讓物件遮住底色的部分透明。
13. RevealTrans：建立切換效果
RevealTrans(Duration=?, Transition=?)
Duration：是切換時間，以秒為單位。
Transtition：是切換方式，可設定為從0到23。
注意：如果做頁間的切換效果，可以在
14. Shadow：建立另一個陰影效果
Shadow(Color=?, Direction=?)
Color：是指陰影的顏色。
Direction：是設定投影的方向，0度代表垂直向上，然後每45度為一個單位。
15. Wave：波紋效果
Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)
#Add：表示是否顯示原對象，0表示不顯示，非0表示要顯示原對象。
Freq：設定波動的個數。
LightStrength：設定波浪效果的光照強度，從0到100。0表示最弱，100表示最強。
Phase：波浪的起始相角。從0到100的百分數值。 （例如：25相當於90度，而50相當於180度。）
Strength：設定波浪搖擺的幅度。
16. Xray：顯現圖片的輪廓，X光片效果
注意：在使用CSS濾鏡時，必須使用在有區域的元素，例如表格，圖片等。而文本，段落這樣沒有區域的元素不能使用CSS濾鏡，對這樣的元素我們可以設定元素的Height和Width樣式或座標來實現。
看下面這個例子，我們對一行文字做陰影效果（dropshadow），新建自訂樣式.shadow，在filter下拉框裡選擇「DropShadow(Color=?, OffX=?, OffY=?, Positive=?)”，我們設定為“DropShadow(Color=999999, OffX=2, OffY=2, Positive=1)”。然後把定義好的樣式套用在頁面中，我們發現表格裡的文字有了陰影，而段落裡的文字卻沒有陰影。點CSS styles面板裡的編輯樣式表按鈕，為樣式加上Hight屬性：
為了不影響原來物件的高度，我們設定的高度不能超過字體本身的高度。 OK後，在瀏覽器中可以看到段落裡的文字也有陰影了。
以上是CSS教學(六) DW4中CSS屬性詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！