在Dreamweaver中利用CSS樣式表設置網頁_Dreamweaver教程
本文介紹如何在Dreamweaver 中使用層疊樣式表 (CSS) 設置頁面中的文本格式。您可以使用 CSS 以 HTML 無法提供的方式來設置文本格式和定位文本,從而能更加靈活自如地控制頁面的外觀。 模板無憂
了解 CSS 模板無憂
層疊樣式表 (CSS) 是一系列格式設置規則,它們控制 Web 頁面內容的外觀。使用 CSS 設置頁面格式時,內容與表現形式是相互分開的。頁面內容(HTML 代碼)位于自身的 HTML 文件中,而定義代碼表現形式的 CSS 規則位于另一個文件(外部樣式表)或 HTML 文檔的另一部分(通常為 部分)中。使用 CSS 可以非常靈活并更好地控制頁面的外觀,從精確的布局定位到特定的字體和樣式等。
CSS 使您可以控制許多僅使用 HTML 無法控制的屬性。例如,您可以為所選文本指定不同的字體大小和單位(像素、磅值等)。通過使用 CSS 從而以像素為單位設置字體大小,還可以確保在多個瀏覽器中以更一致的方式處理頁面布局和外觀。
CSS 格式設置規則由兩部分組成:選擇器和聲明。選擇器是標識已設置格式元素(如 P、H1、類名稱或 ID)的術語,而聲明則用于定義樣式元素。在下面的示例中,H1 是選擇器,介于大括號 ({}) 之間的所有內容都是聲明:
以下是引用片段: |
聲明由兩部分組成:屬性(如 font-family)和值(如 Helvetica)。上述示例為 H1 標簽創建了樣式:鏈接到此樣式的所有 H1 標簽的文本都將是 16 像素大小并使用 Helvetica 字體和粗體。
術語"層疊"是指對同一個元素或 Web 頁面應用多個樣式的能力。例如,可以創建一個 CSS 規則來應用顏色,創建另一個規則來應用邊距,然后將兩者應用于一個頁面中的同一文本。所定義的樣式"層疊"到您的 Web 頁面上的元素,并最終創建您想要的設計。 Webjx.Com
CSS 的主要優點是容易更新;只要對一處 CSS 規則進行更新,則使用該定義樣式的所有文檔的格式都會自動更新為新樣式。 Webjx.Com
在 Dreamweaver 中可以定義以下規則類型:
自定義 CSS 規則(也稱為"類樣式")使您可以將樣式屬性應用到任何文本范圍或文本塊。所有類樣式均以句點 (.) 開頭。例如,您可以創建稱為 .red 的類樣式,設置規則的 color 屬性為紅色,然后將該樣式應用到一部分已定義樣式的段落文本中。 Webjx.Com
HTML 標簽規則重定義特定標簽(如 p 或 h1)的格式。創建或更改 h1 標簽的 CSS 規則時,所有用 h1 標簽設置了格式的文本都會立即更新。
CSS 選擇器規則(高級樣式)重定義特定元素組合的格式,或其它 CSS 允許的選擇器形式的格式(例如,每當 h2 標題出現在表格單元格內時,就應用選擇器 td h2)。高級樣式還可以重定義包含特定 id 屬性的標簽的格式(例如,由 #myStyle 定義的樣式可以應用到所有包含屬性/值對 id="myStyle" 的標簽)。
模板無憂
- 相關鏈接:
- 教程說明:
Dreamweaver教程-在Dreamweaver中利用CSS樣式表設置網頁。