跳到內容

層疊樣式表/將 CSS 應用於 HTML 和 XHTML

來自華夏公益教科書,為開放世界提供開放書籍

CSS 可以透過三種方法應用於 HTML 或 XHTML:連結、嵌入和內聯。在連結方法中,CSS 儲存在單獨的檔案中,而不是直接儲存在 HTML 頁面中。在嵌入方法中,CSS 作為 HTML 頁面的一部分儲存在頁首部分。在內聯方法中,CSS 直接儲存在 HTML 標籤的 style 屬性中,例如 <div style="font-weight:bold">粗體字</div>

最簡潔的方法可能是連結方法,但其他方法在網頁原型設計階段很方便快捷。嵌入和內聯方法不需要使用單獨的檔案。內聯方法可以省去考慮文件應該使用哪些 CSS 類別的麻煩。對於一個更大的網站,其中多個網頁共享相同的樣式,並且樣式應該由使用者自定義,連結方法是唯一可行的方法。

以下部分將詳細介紹這些方法。

使用連結的 CSS,CSS 規則儲存在單獨的檔案中。要從 HTML 頁面引用該檔案,請將 link 元素(以及 XHTML 中的結束元素)新增到 head 元素中,如下例所示,該示例假設樣式表儲存在名為“style.css”的檔案中。

  <head>
    <title>Example Web Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

示例中的 link 元素具有三個屬性。第一個是 rel,它告訴瀏覽器連結目標的型別。第二個是 type,它告訴瀏覽器樣式表的型別。第三個是 href,它告訴瀏覽器在哪個 URL 下找到樣式表。在示例中,URL 是相對的,但也可以是絕對的。

包含單個規則的“style.css”只包含以下文字

 p {
   font-weight:bold;
 }

這告訴瀏覽器段落 (p) 元素中的文字應該以粗體顯示。

示例渲染

將被格式化的文字。

因此,完整 HTML 文件的原始碼如下所示

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example Web Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>Text that will be formatted.</p>
  </body>
</html>

動態生成的網頁可能需要使用嵌入式 CSS,但這應該儘量減少。即使在動態頁面中,任何多個頁面共有的 CSS 通常也應該移到連結的樣式表中。

嵌入式 CSS 是位於需要樣式的 HTML 文件頁首中的 CSS。例如,我們希望本 HTML 文件中的文字以粗體顯示。

 <!DOCTYPE html>
 <html lang="en">
  <head>
   <title>Example Web Page</title>
  </head>
  <body>
   <p>
    Text that will be formatted.
   </p>
  </body>
 </html>

CSS 可以放在文件的頁首部分

  <head>
   <title>Example Web Page</title>
   <style type="text/css">
    p {
     font-weight:bold;
    }
   </style>
  </head>

CSS 位於 style 元素中。將元素的 type 屬性設定為 text/css 告訴瀏覽器包含的樣式表是用 CSS 編寫的,應該用於格式化頁面。如果 type 屬性缺失或設定為無法識別的值,CSS 將不會應用到頁面。

本示例中的 CSS 片段告訴瀏覽器將所有段落 (p) 元素中的文字設定為粗體。頁面上的文字將如下所示

將被格式化的文字。

以下是包含 CSS 的完整文件。

 <!DOCTYPE html">
 <html lang="en">
  <head>
   <title>Example Web Page</title>
   <style type="text/css">
    p {
     font-weight:bold;
     color:green;
    }
   </style>
  </head>
  <body>
   <p>
    Text that will be formatted.
   </p>
  </body>
 </html>

請記住,您應該儘可能使用連結樣式表而不是嵌入式樣式表。這樣可以輕鬆替換通用樣式資訊,而無需跟蹤各個 HTML 檔案中的樣式。

內聯 CSS 直接指定在要應用 CSS 的元素的開始標籤中。它被輸入到 HTML 或 XHTML 1.1 中的 style 屬性中。

例如

 <div style="font-weight:bold; color:red;">Bold Font</div>

顯示為

粗體字

如前所述,您通常應該優先使用連結 CSS 而不是嵌入式 CSS,兩者都優先於內聯 CSS。

華夏公益教科書