跳至內容

CSS/Applying CSS to HTML and XHTML

維基教科書,自由的教學讀本
< CSS

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。