階式樣式表 (CSS) 設計程式

CSS Designer 會顯示樣式表的程式碼,且可讓您編輯含有語法重點強調、內容輔助及「預覽」功能之說明的樣式。 如果 HTML 檔有鏈結通往樣式表,CSS Designer 中的修正會立即套用至 Page Designer 的「設計」頁面中。

這個產品支援下列全球資訊網協會 (W3C) 階式樣式表標準: 此外,WAP 討論區標準 WCSS 1.0 (WAP CSS 1.0) 也在支援範圍內。
CSS Designer 提供程式碼窗格和預覽窗格,雖然其功能類似於 Page Designer 的三個頁面,但是這些窗格的定向和彼這個之間的交談作業稍有不同。
程式碼
「程式碼」窗格可用來直接檢視和處理檔案的程式碼。「內容」和「樣式」視圖中都有補充「程式碼」頁面的特性。 許多與建立新樣式、套用樣式、變更內容,以及設定樣式表鏈結有關的功能都可以從 CSS Designer 的樣式功能表和「樣式」視圖工具列中取得。
樣式表中的個別樣式通常會定義如下:
selector { property : value; }
以下是可能會出現在 .css 檔中的段落之實際樣式定義:
P { font-style : italic; font-size : x-small;}
預覽
「預覽」窗格會顯示利用 Web 瀏覽器來檢視時,目前定義的樣式所呈現的外觀。 您可以選取實際網頁來套用和顯示 CSS Designer 所建立的樣式,或使用提供了定義樣式最小版本的範例 HTML 檔。 「預覽」窗格含有兩個區域:所選的樣式區和標準 HTML 元素區。所選的樣式區是用來顯示游標(在「程式碼」窗格)所在區域之樣式定義的樣式效果,或「樣式」視圖中之所選樣式的樣式效果。 標準 HTML 元素區可顯示標準 HTML 元素的樣式, 且不會受到游標位置的影響。

如果您利用「程式碼」窗格或「樣式」視圖來修改 .css 檔,「預覽」會自動更新。

「CSS 程式碼」窗格有許多文字編輯特性,例如:

表 1. CSS Designer 的文字編輯特性
特性 說明
語法重點強調 每個標示類型都會以不同方式來強調,讓您很容易找到要編輯的特定標示種類。 在尋找語法錯誤時,語法重點強調也很有用。
無限的復原和重做 您可以漸進地復原和重做檔案在整個編輯階段作業中的每項變更。如果是文字,就會每次遞增變更一個字元或一組選取的字元。
內容輔助 內容輔助可協助您完成標示或程式碼行以及插入巨集。 內容輔助清單中的可用選項以指定給編輯的檔案之標示標準所定義的標示為基礎。
元素選項 元素選項指示器會根據游標位置,在「程式碼」頁面左側區域的垂直尺規中,強調顯示元素所在的行號。
蹦現功能表選項 編輯器的蹦現功能表有許多工作台編輯功能表中的相同編輯選項。

CSS 編輯器中的窗格功能表可讓您變更「程式碼」和「預覽」窗格的方向和相對大小。

相關工作
定義網站的頁面樣式 - 概觀
建立樣式表
編輯樣式表
使用條款 | 讀者意見
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.