CSS速成手冊(5)

六、 DW4中CSS屬性詳解

在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（表格）、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屬性是”page-break-after”。

注意：以上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：在樣式中加上濾鏡特效。由于此屬性内容比較多，我們将到下一章單獨對濾鏡介紹。