振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
Dreamweaver使用CSS樣式表設置網頁文本格式
2010/01/26
Dreamweaver使用CSS樣式表設置網頁文本格式

本文章介紹如何在 Dreamweaver 中使用層疊樣式表 (CSS) 設置頁面中的文本格式。您可以使用 CSS 以 HTML 無法提供的方式來設置文本格式和定位文本,從而能更加靈活自如地控制頁面的外觀。

  瞭解 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 站點中的一個或多個頁面。

相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇