位置、新樣式和修改樣式對話方塊
[新樣式] 和 [修改樣式] 對話方塊的 [位置] 類別可讓您定義 Web 網頁上 UI 項目位置的階層式樣式表 (CSS) 樣式規則。 您可以將這些樣式規則直接套用至 HTML 項目,或加入至目前頁面或外部樣式表。
若要在目前頁面上定義 UI 項目的 CSS 位置樣式規則
在 [設計] 或 [來源] 檢視中開啟頁面。
或者,選取要對其套用樣式的文字或 HTML 項目。
按一下 [格式] 功能表上的 [新樣式]。
[新樣式] 對話方塊隨即出現。
選取 [類別] 窗格中的 [位置]。
位置樣式選取範圍會顯示在右窗格中。
當您將樣式套用至 [設計] 檢視中的文字時,樣式屬性會以內嵌方式插入頁面的 HTML 標記。 切換至 [原始碼] 檢視以檢閱新的樣式屬性。
若要將位置屬性加入至外部樣式表中定義的 CSS 樣式規則中
開啟現有外部樣式表。
將游標放置在要修改的樣式規則括號中。
執行下列其中一項。
樣式表,在 [編輯器] 中,以滑鼠右鍵按一下,然後從快顯功能表中,選擇 建置樣式。
在 [樣式表] 工具列中,選擇建置樣式。
[修改樣式] 對話方塊隨即出現。
在左窗格中,按一下 [位置]。
位置樣式選取範圍會顯示在右窗格中。
下表將列出在 [新樣式] 和 [修改樣式] 對話方塊之 [位置] 類別底下顯示的選項。
位置選項
position
用來在 Web 網頁中放置項目的演算法。 值如下:absolute:項目的位置可透過 [top]、[right]、[bottom] 和 [left] 屬性來加以指定。 這些都是相對於包含區塊的屬性。
fixed:項目的位置可透過 [top]、[right]、[bottom] 和 [left] 屬性來加以指定。 這些都是相對於瀏覽器視窗的屬性。 項目不會隨著 Web 網頁一起捲動。
relative:項目的位置會根據一般流程來計算,並可透過 [top]、[right]、[bottom] 和 [left] 屬性來進行偏移。 偏移指的是相對於項目的正常位置。
static:項目的位置會根據一般流程來計算。 會忽略 [top]、[right]、[bottom] 和 [left] 屬性。 這是預設值。
inherit:項目將從父項目繼承其定位演算法。
z-index – 圖層索引
項目的堆疊層級。 內含較高堆疊層級的項目會出現在內含較低堆疊層級之項目的前面。width – 寬度
項目的寬度。 如果您指定一個值,則可以在清單中選取值的單位。height – 高度
項目的高度。 如果您指定一個值,則可以在清單中選取值的單位。top
項目的上邊緣。 如果 [position] 屬性設定為 [static],則會忽略這個屬性。 如果您指定一個值,則可以在清單中選取值的單位。right
項目的右邊緣。 如果 [position] 屬性設定為 [static],則會忽略這個屬性。 如果您指定一個值,則可以在清單中選取值的單位。下邊緣
項目的下邊緣。 如果 [position] 屬性設定為 [static],則會忽略這個屬性。 如果您指定一個值,則可以在清單中選取值的單位。left
項目的左邊緣。 如果 [position] 屬性設定為 [static],則會忽略這個屬性。 如果您指定一個值,則可以在清單中選取值的單位。
其他 UI 項目
Selector
(僅限 [新樣式] 對話方塊) 可讓您輸入類別名稱,或按一下 HTML 項目以套用樣式。 類別名稱必須以句號 (.) 開頭。 您也可以選取 [(內嵌樣式)],如此會將樣式套用至選取的文字或 HTML 項目。定義於
(僅限 [新樣式] 對話方塊) 可讓您指定在何處寫入樣式規則的定義。 值如下:目前的頁面:將樣式規則寫入至目前頁面中的 style 項目。
新樣式表 將新的 CSS 樣式表加入至專案,並且將規則寫入至該樣式表。
現有的樣式表 將樣式規則加入至您使用 [URL] 清單所指定的 CSS 樣式表中。
URL
(僅限 [新樣式] 對話方塊) 可讓您選取現有的 CSS 樣式表。 唯有當 [定義於] 設定為 [現有的樣式表] 時,才會啟用這個選項。套用新樣式到文件選取範圍
(僅限 [新樣式] 對話方塊) 指定樣式套用至選取的文字、類別或 HTML 項目。預覽
顯示範例,說明套用樣式規則時呈現的樣子。描述
顯示樣式規則的 CSS 定義。