CSS/Applying CSS to HTML and XHTML

CSS可使用鏈接、嵌入、內聯方法用於HTML或XHTML。對於鏈接方法，CSS不是存儲在HTML頁中，而是存儲在單獨文件中。對於嵌入方法，CSS存放在HTML頁面的header section中。對於內聯方法，CSS存放在HTML tags的style屬性中，例如<div style="font-weight:bold">Bold Font</div>.

最整潔的方法可能是鏈接，但其它兩種方法在網頁原型開發時更方便更快。內聯方法避免考慮文檔包含哪些CSS類。對於大型網站，很多網頁共享相同的用戶定製樣式，鏈接方法是唯一可行的。

鏈接[編輯]

對於鏈接形式的CSS, CSS規則保存在單獨的文件中。從HTML頁引用該文件，增加link元素到head元素中。如下例假定使用文件"style.css"：

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

link元素有3個屬性。第一個屬性rel告訴瀏覽器鏈接目標的類型。第二個屬性type告訴瀏覽器哪種樣式表被使用。第三個屬性href告訴瀏覽器到哪個URL去尋找樣式表。本例中是相對的URL，也可用絕對URL。

在"style.css"包含如下單條規則：

 p {
   font-weight:bold;
 }

這告訴瀏覽器段落(p)中的文本應該繪製為黑體。

繪製例子：

Text that will be formatted.

完整的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被放置於HTML文檔的頭部的樣式（style）元素中。例如，希望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)元素的內容顯式為黑體。看起來這樣：

Text that will be formatted.

嵌套了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師在元素的開始標記（tag）的style屬性中直接指出。例如：

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

將被繪製為：

Bold Font

注意，鏈接的CSS優於嵌入的CSS，而二者都優於內聯的CSS。