樣式產生器對話方塊、清單

更新：2007 年 11 月

[樣式產生器] 對話方塊的 [清單] 頁面，能讓您定義階層式樣式表 (CSS) 樣式屬性 (Attribute)，這些樣式屬性 (Attribute) 會格式化使用 <OL> 和 <UL> 標記建立的清單。您可以直接將這些屬性套用至 HTML 項目，也可以將它們加入至 CSS 樣式規則。

若要直接將清單屬性套用至網頁上的 HTML 項目

以 [HTML 設計工具] 的 [設計] 檢視開啟您的 HTML 文件檔案，並選取要格式化的項目。
按一下 [格式] 功能表上的 [樣式]，開啟 [樣式產生器] 對話方塊。
在 [樣式產生器] 對話方塊的左方窗格中，按一下 [清單]。

[清單] 對話方塊隨即出現在右方窗格中。

在您格式化 [設計] 檢視中選取的項目時，CSS 樣式屬性會以內嵌方式插入網頁的 HTML 標記中。切換至 HTML 檢視來檢閱插入的新樣式屬性。

若要將清單屬性加入在外部樣式表中定義的 CSS 樣式規則中

開啟現有的外部樣式表，並將插入點置於所需樣式選取器之後的大括號 ({ }) 內。
按一下 [樣式] 功能表上的 [建置樣式]，開啟 [樣式產生器] 對話方塊。
在 [樣式產生器] 對話方塊的左方窗格中，按一下 [清單]。

[清單] 對話方塊隨即出現在右方窗格中。

注意事項：
當您開啟外部 CSS 樣式表進行編輯時，[樣式] 功能表隨即出現。在 [樣式] 功能表上，將插入點置於樣式規則選取器後方的大括號之間時，[建置樣式] 選項隨即顯現。

定義於外部樣式表的 CSS 樣式類別，可套用至 Web 網頁 <BODY> 內的項目上，方法是指派 CSS 樣式選取器做為項目的 CLASS 屬性 (Property)。

[樣式產生器] 對話方塊之 [清單] 頁面上可用的選項包括：

工作

UI 項目

清單

會為清單的型別設定屬性 (Attribute)，可以具有項目符號或無項目符號。這些屬性 (Attribute) 一般都會套用至影響 <LI></LI> 或 <OL></OL> 標記的樣式。選取 [<未設定>] (未選擇選項)、[分項] 或 [取消分項]。例如，如果選取 [取消分項]，則會加入下列程式碼：

LIST-STYLE-TYPE:none

項目符號

下表所列的屬性 (Attribute) 會格式化項目符號。項目符號包含數字、字母、羅馬數字、標準項目符號影像 (圓形、碟形、方形) 或者自訂項目符號影像。

注意事項：
在您選取 [分項] 做為清單類型之後，便可以使用各種的項目符號樣式。

樣式
設定控制項目符號樣式的屬性。有 8 種可用的樣式。從 [<未設定>] (未選擇選項)、[圓形]、[實心圓]、[方形]、[(1 2 3 4...)]、[(i ii iii iv...)]、[(I II III IV...)]、[(a b c d...)] 或 [(A B C D...)] 等選項中加以選取。例如，如果選取 [分項] 做為清單類型，[方形] 做為樣式，則會插入下列 CSS 標記：

LIST-STYLE-TYPE:square
位置
設定控制文字關聯項目符號位置的屬性。包括兩種文字位置的不同格式。選取 [<未設定>] (未選擇選項)、[外部 (文字縮排)] 或 [內部(文字未縮排)]。例如，如果選取 [方形] 做為樣式、[分項] 做為清單類型，並以 [外部 (文字縮排)] 為位置，則會插入下列 CSS 標記：

LIST-STYLE-TYPE:square; list-style-position:outside
自訂項目符號
設定影像做為項目符號樣式，而非 8 個可用樣式。在選取 [自訂項目符號] 之後，便可以使用 [影像] 和 [無] 選項。
Image
設定影像為項目符號樣式。在欄位中輸入路徑和影像名稱，或選擇省略按鈕 (...)，開啟 [選取項目符號影像] 對話方塊，並瀏覽至影像位置。例如，如果選取 [分項] 做為清單類型、[外部 (文字縮排)] 為位置、以 [自訂項目符號] 做為項目符號樣式，再於 [影像] 欄位輸入 bullet.jpg，則會插入下列 CSS 標記：

LIST-STYLE-POSITION:outside

LIST-STYLE-IMAGE:url (bullet.jpg)
無
會將項目符號樣式的影像值設定為 None。例如，如果選取 [分項] 做為清單類型、[外部 (文字縮排)] 為位置、以 [自訂項目符號] 做為項目符號樣式，再於 [影像] 欄位輸入 bullet.jpg，則會插入下列 CSS 標記：

LIST-STYLE-POSITION:outside; LIST-STYLE-IMAGE:url (bullet.jpg)

如果您隨後返回 [樣式產生器] 對話方塊，並選取 [自訂項目符號] 選項為 [無]，則會插入下列 CSS 標記：

LIST-STYLE-POSITION:outside; LIST-STYLE-IMAGE:none