了解層疊樣式表
層疊樣式表(CSS) 是一系列格式設定規則,它們控制Web 頁面內容的外觀。使用CSS 設定頁面格式時,請將內容與表現形式分開。頁面內容(即HTML 程式碼)駐留在HTML 檔案本身中,而用於定義程式碼表現形式的CSS 規則則駐留在另一個檔案(外部樣式表)或HTML 文件的另一部分(通常為檔案頭部分)中。使用CSS 可以非常靈活並更好地控制特定的頁面外觀,從精確的佈局定位到特定的字體和樣式。
CSS 可讓您控制HTML 無法獨自控制的許多屬性。例如,可以為選定的文字指定不同的字體大小和單位(像素、磅值等)。透過使用CSS 以像素為單位設定字體大小,還可以確保在多個瀏覽器中以更一致的方式處理頁面佈局和外觀。
除設定文字格式外,還可以使用CSS 控制Web 頁面中區塊層級元素的格式和定位。例如,可以設定區塊級元素的邊距和邊框、其他文字周圍的浮動文字等。
CSS 格式設定規則由兩部分組成:選擇器和聲明。選擇器是標識格式元素的術語(如P、H1、類別名稱或ID),聲明用於定義元素樣式。在下面的範例中,H1 是選擇器,介於括號({}) 之間的所有內容都是宣告:
H1 {
font-size:16 pixels;
font-family:Helvetica;
font-weight:bold;
}
聲明由兩部分組成:屬性(如font-family)和值(如Helvetica)。上面的CSS 規則為H1 標籤建立了一個特定的樣式:連結到此樣式的所有H1 標籤的文字都將是16 個像素大小、Helvetica 字型和粗體。
術語cascading 表示向同一個元素應用多種樣式的能力。例如,可以建立一個CSS 規則來套用顏色,建立另一個CSS 規則來套用邊距,然後將兩者套用到頁面上的同一個文字。所定義的樣式向下"層疊"到您的Web 頁面上的元素,並最終創建您想要的設計。
CSS 的主要優點是它提供了便利的更新功能;更新一處的CSS 規則時,使用該已定義樣式的所有文件的格式都會自動更新為新樣式。
在Dreamweaver 中可以定義以下樣式類型:
自訂CSS 規則(也稱為類別樣式)可讓您將樣式屬性套用至任何文字範圍或文字區塊。 (請參閱套用類別樣式。)
HTML 標籤樣式重定義特定標籤(如h1)的格式。建立或變更h1 標籤的CSS 樣式時,所有以h1 標籤設定了格式的文字都會立即更新。
CSS 選擇器樣式(進階樣式)重新定義特定元素組合的格式設置,或重新定義CSS 允許的其他選擇器表單的格式設定(例如,每當h2 標題出現在表格儲存格內時都套用選擇器td h2 )。進階樣式也可以重新定義包含特定id 屬性的標籤的格式設定(例如,#myStyle 定義的樣式可套用於包含屬性值對id="myStyle" 的所有標籤)。
CSS 規則可以位於以下位置:
外部CSS 樣式表是一系列儲存在一個單獨的外部CSS (.css) 檔案(並非HTML 檔案)中的CSS 規則。利用文檔文件頭部分中的鏈接,該文件被鏈接到Web 站點中的一個或多個頁面。
內部(或嵌入式)CSS 樣式表是一系列包含在HTML 文件檔案頭部分的style 標籤內的CSS 規則。
內聯樣式是在標籤的特定實例中在整個HTML 文件內定義的。
Dreamweaver 可辨識現有文件中定義的樣式,只要這些樣式符合CSS 樣式準則。
提示
若要顯示Dreamweaver 中包含的O'Reilly CSS 參考指南,請選擇"幫助">"參考",然後從"參考"面板的彈出式選單中選擇"O'Reilly CSS 參考"。
手動設定的HTML 格式設定會覆蓋透過CSS 套用的格式設定。若要使CSS 規則能夠控制段落格式,必須刪除所有手動設定的HTML 格式。
Dreamweaver 會呈現您在"文件"視窗中直接套用的大多數樣式屬性。您也可以在瀏覽器視窗中預覽文件以查看樣式的應用程式。有些CSS 樣式屬性在Microsoft Internet Explorer、Netscape Navigator、Opera 和Apple Safari 中呈現的外觀不相同,有些目前不受任何瀏覽器支援。