了解如何為 CSS 規則 (例如:文字字體、背景影像與顏色、間距與版面屬性,以及清單元素的外觀) 定義其屬性。

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

定義 CSS 字型屬性

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

Font-family

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

Font-style

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

Line-height

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

Text-decoration

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

Font-weight

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

Font-variant

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

Text-transform

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

顏色

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

Font-size

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

定義 CSS 樣式背景屬性

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

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

Background-image

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

Background-repeat

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

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

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

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

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

Background-attachment

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

Background-position (X) 和 Background-position (Y)

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

背景顏色

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

定義 CSS 樣式區塊屬性

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

Letter-spacing

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

Text-indent

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

Vertical-align

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

Text-align

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

White-space

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

Display

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

Word-spacing

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

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

定義 CSS 樣式方框屬性

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

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

Float

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

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

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

Clear

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

Padding

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

全部一樣

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

Margin

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

寬度和高度

設定元素的寬度和高度。

定義 CSS 樣式邊框屬性

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

Width

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

全部一樣

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

顏色

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

類型

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

定義 CSS 樣式清單屬性

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

List-style-type

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

List-style-position

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

List-style-image

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

定義 CSS 樣式定位屬性

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

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

Position

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

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

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

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

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

Z 軸

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

溢位

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

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

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

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

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

裁切

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

Placement

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

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

顯示

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

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

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

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

定義 CSS 樣式擴充功能屬性

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

Cursor

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

Filter

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

Page-break-before 和 Page-break-after

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

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策