設定 CSS 屬性

您可以為 CSS 規則 (例如：文字字體、背景影像與顏色、間距與版面屬性，以及清單元素的外觀) 定義其屬性。首先建立新規則，然後設定下列屬性。

以下是您可以設定的一些 CSS 字型屬性的描述。

設定樣式的字體家族 (或家族系列)。瀏覽器會以用戶系統上所安裝字體系列中的第一種字體來顯示文字。如需考量與 Internet Explorer 的相容性，請先列出 Windows 字體。兩種瀏覽器都支援字體屬性。

指定字體樣式為「normal」、「italic」或「oblique」。預設的設定值為「normal」。兩種瀏覽器都支援樣式屬性。

設定文字行的高度。這項設定習慣上稱為行距。選取「normal」可以自動計算字體大小的行高，或是輸入一個精確值並且選取度量單位。兩種瀏覽器都支援行高屬性。

會對文字加上底線、上端線或刪除線，或讓文字閃爍。一般文字的預設設定為「none」。連結的預設設定為「underline」。當您將連結設定設成無時，可以定義特殊類別來移除連結的底線。兩種瀏覽器都支援裝飾屬性。

會將特定或相對的粗細套用到字體。「normal」相當於 400、「bold」相當於 700。兩種瀏覽器都支援粗細屬性。

會對文字設定小型大寫字的變體。Dreamweaver 不會在「文件」視窗中顯示這個屬性。Internet Explorer 支援這個變形屬性，但 Navigator 不支援。

可將選取範圍中每個單字的第一個字母設定成大寫，或將文字設定成全部大寫或全部小寫。兩種瀏覽器都支援大小寫屬性。

會設定文字顏色。兩種瀏覽器都支援顏色屬性。

定義文字的大小。您可以選取數字和度量單位，選擇特定大小，也可以選擇相對大小。像素可以有效防止因瀏覽器而造成文字扭曲。兩種瀏覽器都支援大小屬性。

定義 CSS 樣式背景屬性

您可以將背景屬性套用到網頁中的任何元素。例如，建立會將背景顏色或背景影像新增到任何頁面元素 (例如在文字、表格、頁面等後面) 的樣式。您也可以設定背景影像的定位方式。

以下是您可以設定的一些 CSS 背景屬性的描述。

設定元素的背景影像。兩種瀏覽器都支援背景影像屬性。

決定背景影像是否要重複，以及重複的方式。兩種瀏覽器都支援「Background-repeat」屬性。

• 「no-repeat」只在元素的開頭顯示影像一次。

• 「repeat」會以水平並排和垂直並排方式，將影像排列在元素的後面。

• 「repeat‑x」和「repeat‑y」會分別以水平和垂直排列方式顯示影像。影像會裁切成剛好能嵌入元素的邊界內。

注意：使用「Background-repeat」屬性重新定義 body 標籤，並設定不是並排或重複的背景影像。

決定背景影像是否要固定在原來位置，或是要隨內容捲動。請注意，有些瀏覽器會將「fixed」選項當做「scroll」處理。Internet Explorer 支援這個屬性，但是 Netscape Navigator 不支援。

會指定背景影像相對於元素的初始位置。可用來將背景影像對齊 (垂直 (Y) 和水平 (X) 方向) 頁面的中心。如果附著方式屬性為「fixed」，那麼這個位置將是相對於「文件」視窗，而不是元素。

設定元素的背景顏色。兩種瀏覽器都支援背景顏色屬性。

定義 CSS 樣式區塊屬性

您可以定義標籤和屬性的間距和對齊設定。

增加或減少字母或字元之間的間距。若要減少字元之間的間距，請指定負值，例如 (-4)。字母間距設定會覆寫文字齊行設定。Internet Explorer 4 以後版本和 Netscape Navigator 6 都支援「Letter-spacing」屬性。

指定文字的第一行要縮排多少。負值可以用來建立凸排，但是顯示的情況會依瀏覽器而有所不同。只有當標籤套用到區塊層級的元素時，Dreamweaver 才會在「文件」視窗中顯示這個屬性。兩種瀏覽器都支援「Text-indent」屬性。

指定套用到的元素垂直對齊方式。只有當這個屬性套用到 <img> 標籤時，Dreamweaver 才會在「文件」視窗中顯示此屬性。

設定文字在元素內的對齊方式。兩種瀏覽器都支援「Text-align」屬性。

決定要如何處理元素內的空白。「normal」會收合空白；「pre」會將文字視同包含於 pre 標籤的方式處理 (也就是說，所有空白都會保留，包括空格、Tab 字元和 Return 字元)；「nowrap」會指定文字只在碰到 br 標籤時才換行。Dreamweaver 不會在「文件」視窗中顯示這個屬性。Netscape Navigator 和 Internet Explorer 5.5 都支援「White-space」屬性。

指定要不要顯示元素，如果要，應該如何顯示。「none」會關閉顯示指定的元素。

設定單字之間的間距。若要設定特定的值，請在彈出式選單中選取「value」，然後輸入數值。在第二個彈出式選單中，選取度量單位 (例如，像素、點等等)。

注意：您可以指定負值，但是顯示的情況會依瀏覽器而有所不同。Dreamweaver 不會在「文件」視窗中顯示這個屬性。

定義 CSS 樣式方框屬性

請使用「CSS 規則定義」對話方塊的「方框」類別，定義控制頁面上元素位置的標籤和屬性設定。

套用間距和邊界設定時，您可以將這些設定套用到元素的某一邊，或使用「全部一樣」設定將同樣的設定套用到元素的每一邊。

指定其他元素排列在浮動元素周圍的那一側。浮動元素已固定在浮動側邊，而其他內容會排列在另一側周圍。

例如，右側浮動的影像已固定在右側，因此，您後來新增的內容會排列在影像的左側。

如需詳細資訊，請參閱 http://css-tricks.com/all-about-floats/

指定不允許其他浮動元素的元素側邊。

指定元素的內容與其邊框 (如無邊框則為邊界) 之間的空間數量。如果要針對元素的某一邊設定欄位間隔，請取消選取「全部一樣」選項。

會將相同的欄位間隔屬性，設定到所套用元素的上、下、左、右各邊。

指定元素邊框 (如無邊框則為欄位間隔) 與其他元素之間的空間數量。只有在這個屬性套用到區塊層級的元素 (段落、標題、清單等) 時，Dreamweaver 才會在「文件」視窗中顯示這個屬性。如果要針對元素的某一邊設定邊界，請取消選取「全部一樣」。

設定元素的寬度和高度。

定義 CSS 樣式邊框屬性

請使用「CSS 規則定義」對話方塊的「邊框」類別，定義環繞元素的邊框設定值，如寬度、顏色和樣式。

設定元素邊框的粗細。兩種瀏覽器都支援「Width」屬性。如果要針對元素的某一邊設定邊框寬度，請取消選取「全部一樣」。

會將相同的邊框樣式屬性，設定到所套用元素的上、下、左、右各邊。

設定邊框的顏色。您可以單獨設定每一邊的顏色，但是顯示的情況會依瀏覽器而有所不同。如果要針對元素的某一邊設定邊框顏色，請取消選取「全部一樣」。

設定邊框的樣式外觀。樣式呈現的方式會依瀏覽器而有所不同。如果要針對元素的某一邊設定邊框樣式，請取消選取「全部一樣」。

定義 CSS 樣式清單屬性

「CSS 規則定義」對話方塊的「清單」類別，可以定義清單標籤的清單設定，如項目符號大小和字型。

設定項目符號或編號數字的外觀。兩種瀏覽器都支援「List-style-type」。

設定清單項目文字是否換行及縮排 (outside) 或文字是否靠左邊界換行 (inside)。

可以讓您指定項目符號的自訂影像。請按一下「瀏覽」(Windows) 或「選擇」(Macintosh) 以瀏覽至影像，或鍵入影像的路徑。

定義 CSS 樣式定位屬性

定位樣式屬性決定了要以哪種方式，將選取的 CSS 樣式相關內容定位在頁面中。

下列的屬性，對樣式不重要的可以保持空白：

決定瀏覽器要如何針對選取的元素進行定位，如下所示：

• 「Absolute」會使用「Placement」方塊中輸入的座標 (相對於絕對或相對定位父系座標) 來放置內容，或者，如果絕對或相對定位父系座標不存在的話，則會將內容放置在頁面的左上角。

• 「Relative」會使用「Placement」方塊中輸入的座標 (相對於區塊在文件文字流向中的位置) 來放置內容區塊。例如，賦予元素一個相對位置以及向上及向左 20 個像素的座標，會將元素從其流向的正常位置向右與向下偏移 20 個像素。元素也可以定位在相對位置，不管有沒有上、下、左、右的座標都一樣，以便針對絕對定位的子系座標建立其內容。

• 「Fixed」會使用「Placement」方塊中輸入的座標 (相對於瀏覽器左上角) 來放置內容。當用戶捲動頁面時，內容會維持固定在這個位置。

• 「Static」會將圖層放到它在文字流向中的位置。對於所有可定位的 HTML 元素來說，這是預設的位置。

決定內容的堆疊順序。Z 軸位置較高的元素，其出現位置會高於 Z 軸位置較低 (或根本沒有 Z 軸) 的元素。值可以是正數或負數。(如果內容屬於絕對定位，則使用「AP 元素」面板來變更堆疊順序會比較容易)。

決定容器內容 (例如，DIV 或 P) 超過其大小時應如何處理。這些屬性控制項下列擴展項目：

• 「Visible」會增加容器的大小，讓所有內容都能顯示。容器向下及右方展開。

• 「Hidden」會維持容器的大小，並且裁切任何超出的內容。這裡不提供任何捲軸。

• 「Scroll」會新增捲軸到容器，不論內容是否超過容器的大小。明確地提供捲軸可以避免在動態環境中捲軸時而出現、時而消失所造成的混淆。這個選項不會顯示在「文件」視窗中。

• 「Auto」會讓捲軸在容器內容超過其邊界時才出現。這個選項不會顯示在「文件」視窗中。

定義內容的顯示部分。如果指定了裁切區域，您就可以使用 Script 語言 (例如 JavaScript) 存取，並且操作這些屬性來建立特殊效果 (例如擦去)。這種擦去效果可以用「變更屬性」行為來設定。

指定內容區塊的位置和大小。瀏覽器解譯位置的方式會依「字型」上的設定而有所不同。如果內容區塊的內容超過指定的大小，「大小」的值就會被覆寫。

位置和大小的預設單位是像素。您也可以指定下列單位：pc (Pica)、pt (點)、in (吋)、mm (公釐)、cm (公分)、em (字體高)、ex (字母高) 或 % (上層值的百分比)。縮寫必須緊接數值，不需空格：例如，3mm。

決定內容的初始顯示條件。如果您不指定顯示屬性，依預設值內容會繼承父系標籤的值。您可以看見 body 標籤的預設顯示。請選擇下列其中一個顯示選項：

• 「Inherit」會繼承內容的上一層顯示屬性。

• 「Visible」會顯示內容，而不論上一層的值為何。

• 「Hidden」會隱藏內容，而不論上一層的值為何。

定義 CSS 樣式擴充功能屬性

擴充功能樣式屬性包括篩選器、分頁和指標選項。

在指標移到這個樣式所控制的物件上時，會改變指標影像。請在彈出式選單中，選取要設定的選項。Internet Explorer 4.0 以後版本和 Netscape Navigator 6 都支援這個屬性。

會將特殊效果套用到這個樣式所控制的物件，包括模糊和反轉。請從彈出式選單中選取效果。

在列印時強制在這個樣式所控制的物件之前或之後分頁。請在彈出式選單中，選取要設定的選項。任何 4.0 版瀏覽器都不支援這個選項，不過將來的瀏覽器可能會支援。