萬盛學電腦網 >> 網頁制作 >> dreamweaver教程 >> Dreamweaver使用CSS樣式表設置網頁文本格式
Dreamweaver使用CSS樣式表設置網頁文本格式
了解 CSS：
層疊樣式表 (CSS) 是一系列格式設置規則，它們控制 Web 頁面內容的外觀。使用 CSS 設置頁面格式時，內容與表現形式是相互分開的。頁面內容(HTML 代碼)位於自身的 HTML 文件中，而定義代碼表現形式的 CSS 規則位於另一個文件(外部樣式表)或 HTML 文檔的另一部分(通常為 部分)中。使用 CSS 可以非常靈活並更好地控制頁面的外觀，從精確的布局定位到特定的字體和樣式等。
CSS 使您可以控制許多僅使用 HTML 無法控制的屬性。例如，您可以為所選文本指定不同的字體大小和單位(像素、磅值等)。通過使用 CSS 從而以像素為單位設置字體大小，還可以確保在多個浏覽器中以更一致的方式處理頁面布局和外觀。
CSS 格式設置規則由兩部分組成:選擇器和聲明。選擇器是標識已設置格式元素(如 P、H1、類名稱或 ID)的術語，而聲明則用於定義樣式元素。在下面的示例中，H1 是選擇器，介於大括號 ({}) 之間的所有內容都是聲明:
以下為引用的內容：
H1 {
font-size:16 pixels;
font-family:Helvetica;
font-weight:bold;
}
聲明由兩部分組成:屬性(如 font-family)和值(如 Helvetica)。上述示例為 H1 標簽創建了樣式:鏈接到此樣式的所有 H1 標簽的文本都將是 16 像素大小並使用 Helvetica 字體和粗體。
術語"層疊"是指對同一個元素或 Web 頁面應用多個樣式的能力。例如，可以創建一個 CSS 規則來應用顏色，創建另一個規則來應用邊距，然後將兩者應用於一個頁面中的同一文本。所定義的樣式"層疊"到您的 Web 頁面上的元素，並最終創建您想要的設計。
CSS 的主要優點是容易更新;只要對一處 CSS 規則進行更新，則使用該定義樣式的所有文檔的格式都會自動更新為新樣式。
在 Dreamweaver 中可以定義以下規則類型:
自定義 CSS 規則(也稱為"類樣式")使您可以將樣式屬性應用到任何文本范圍或文本塊。所有類樣式均以句點 (.) 開頭。例如，您可以創建稱為 .red 的類樣式，設置規則的 color 屬性為紅色，然後將該樣式應用到一部分已定義樣式的段落文本中。
HTML 標簽規則重定義特定標簽(如 p 或 h1)的格式。創建或更改 h1 標簽的 CSS 規則時，所有用 h1 標簽設置了格式的文本都會立即更新。
CSS 選擇器規則(高級樣式)重定義特定元素組合的格式，或其它 CSS 允許的選擇器形式的格式(例如，每當 h2 標題出現在表格單元格內時，就應用選擇器 td h2)。高級樣式還可以重定義包含特定 id 屬性的標簽的格式(例如，由 #myStyle 定義的樣式可以應用到所有包含屬性/值對 id="myStyle" 的標簽)。
創建新的樣式表
首先，您將創建包含 CSS 規則(定義段落文本樣式)的外部樣式表。在外部樣式表中創建樣式時，可以在一個中央位置同時控制多個 Web 頁面的外觀，而不需要為每個 Web 頁面分別設置樣式。
CSS 規則可以位於以下位置:
外部 CSS 樣式表是存儲在一個單獨的外部 .css 文件(並非 HTML 文件)中的一系列 CSS 規則。利用文檔 head 部分中的鏈接，該 .css 文件被鏈接到 Web 站點中的一個或多個頁面。
內部(或嵌入式)CSS 樣式表是包含在 HTML 文檔 head 部分的 style 標簽內的一系列 CSS 規則。例如，下面的示例為已設置段落標簽的文檔中的所有文本定義字體大小:
<head>
<style>
p{
font-size:80px
}
</style>
</head>
內聯樣式是在 HTML 文檔中的特定標簽實例中定義的。例如，僅對用含有內聯樣式的標簽設置了格式的段落定義字體大小。
Dreamweaver 會呈現您所應用的大多數樣式屬性並在"文檔"窗口中它們。您也可以在浏覽器窗口中預覽文檔以查看樣式的應用情況。有些 CSS 樣式屬性在 Microsoft Internet Explorer、Netscape Navigator、Opera 和 Apple Safari 中呈現的外觀不相同。
選擇"文件">"新建"。
在"新建文檔"對話框中的"類別"列中選擇"基本頁"，在"基本頁"列中選擇"CSS"，然後單擊"創建"。
空白樣式表將出現在"文檔"窗口中。"設計"視圖和"代碼"視圖按鈕已被禁用。CSS 樣式表是純文本文件，其內容將不會用於在浏覽器中查看。
將該頁保存("文件">"保存")為 cafe_townsend.css。
保存樣式表時，請確保將其保存到 cafe_townsend folder 文件夾(您的 Web 站點的根文件夾)中。
在樣式表中鍵入以下代碼:
p{
font-family: Verdana, sans-serif;
font-size: 11px;
color: #000000;
line-height: 18px;
padding: 3px;
}
當您鍵入代碼時，Dreamweaver 將使用代碼提示為您建議一些選項，以幫您完成輸入。當看到希望 Dreamweaver 為您完成鍵入的代碼時，請按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
不要忘記在每行結尾處的屬性值後面加上一個分號。
完成後的代碼類似於下面的示例:
若要顯示該指南，請選擇"幫助">"參考"，然後從"參考"面板的彈出式菜單中選擇"O'Reilly CSS 參考"。保存樣式表。
附加樣式表
當您將樣式表附加到 Web 頁面中時，在樣式表中定義的規則將應用到頁面上的相應元素。例如，當您將 cafe_townsend.css 樣式表附加到 index.html 頁時，將根據您定義的 CSS 規則設置所有段落文本(用 HTML 代碼中的標簽設置格式的文本)的格式。
在"文檔"窗口中，打開 Cafe Townsend 的 index.html 文件。(如果該文件已打開，則請單擊它的選項卡。)
選擇在教程:向頁面添加內容中粘貼到頁面中的第一段文本。
在"屬性"檢查器中查看，並確保使用段落標簽設置了該段落的格式。
如果"屬性"檢查器中的"格式"彈出式菜單顯示"段落"，則已使用段落標簽設置了段落的格式。如果"屬性"檢查器中的"格式"彈出式菜單顯示"無"或其它內容，則選擇"段落"來設置段落的格式。
對第二段重復第 3 步。
在"CSS 樣式"面板("窗口">"CSS 樣式")中，單擊位於面板右下角的"附加樣式表"按鈕。
在"附加外部樣式表"對話框中，單擊"浏覽"並浏覽到上一節創建的 cafe_townsend.css 文件。
單擊"確定"。
"文檔"窗口中的文本將根據外部樣式表中的 CSS 規則來設置格式。
研究"CSS 樣式"面板
"CSS 樣式"面板可讓您跟蹤影響當前所選頁面元素的 CSS 規則和屬性，或影響整個文檔的規則和屬性，還可以在不打開外部樣式表的情況下修改 CSS 屬性。
請確保 index.html 頁在"文檔"窗口中打開。
在"CSS 樣式"面板("窗口">"CSS 樣式")中，單擊面板頂部的"所有"，然後檢查您的 CSS 規則。
在"所有"模式下，CSS 面板向您顯示應用到當前文檔的所有 CSS 規則，不管這些規則是在外部樣式表中，還是在自身文檔中。您應在"所有規則"窗格中看到兩個主要類別:一個<STYLE> 標簽類別和一個 cafe_townsend.css 類別。
若未展開<STYLE> 標簽類別，則請單擊加號 (+) 展開該類別。
單擊正文規則。
值為 #000000 的 background-color 屬性出現在下面的"屬性"窗格中。
注意您可能需要折疊其它面板，如"文件"面板，以便看到完整的"CSS 樣式"面板，還可以通過拖動窗格之間的邊界來更改"CSS 樣式"面板的長度。
您在教程:創建基於表格的頁面布局中通過
