如何添加 CSS

當瀏覽器讀到樣式表時，它將根據樣式表中的信息來格式化 HTML 文檔。

三種使用 CSS 的方法

有三種插入樣式表的方法：

  • 外部 CSS
  • 內部 CSS
  • 行內 CSS

外部 CSS

通過使用外部樣式表，您只需修改一個文件即可改變整個網站的外觀！

每張 HTML 頁面必須在 head 部分的 <link> 元素內包含對外部樣式表文件的引用。

實例

外部樣式在 HTML 頁面 <head> 部分內的 <link> 元素中進行定義：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

親自試一試

外部樣式表可以在任何文本編輯器中編寫，并且必須以 .css 擴展名保存。

外部 .css 文件不應包含任何 HTML 標簽。

"mystyle.css" 是這樣的：

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

注意：請勿在屬性值和單位之間添加空格（例如 margin-left: 20 px;）。正確的寫法是：margin-left: 20px;

內部 CSS

如果一張 HTML 頁面擁有唯一的樣式，那么可以使用內部樣式表。

內部樣式是在 head 部分的 <style> 元素中進行定義。

實例

內部樣式在 HTML 頁面的 <head> 部分內的 <style> 元素中進行定義：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

親自試一試

行內 CSS

行內樣式（也稱內聯樣式）可用于為單個元素應用唯一的樣式。

如需使用行內樣式，請將 style 屬性添加到相關元素。style 屬性可包含任何 CSS 屬性。

實例

行內樣式在相關元素的 "style" 屬性中定義：

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

親自試一試

提示：行內樣式失去了樣式表的許多優點（通過將內容與呈現混合在一起）。請謹慎使用此方法。

多個樣式表

如果在不同樣式表中為同一選擇器（元素）定義了一些屬性，則將使用最后讀取的樣式表中的值。

假設某個外部樣式表為 <h1> 元素設定的如下樣式：

h1 {
  color: navy;
}

然后，假設某個內部樣式表也為 <h1> 元素設置了如下樣式：

h1 {
  color: orange;    
}

實例

如果內部樣式是在鏈接到外部樣式表之后定義的，則 <h1> 元素將是橙色：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

親自試一試

實例

不過，如果在鏈接到外部樣式表之前定義了內部樣式，則 <h1> 元素將是深藍色：

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

親自試一試

層疊順序

當為某個 HTML 元素指定了多個樣式時，會使用哪種樣式呢？

頁面中的所有樣式將按照以下規則“層疊”為新的“虛擬”樣式表，其中第一優先級最高：

  1. 行內樣式（在 HTML 元素中）
  2. 外部和內部樣式表（在 head 部分）
  3. 瀏覽器默認樣式

因此，行內樣式具有最高優先級，并且將覆蓋外部和內部樣式以及瀏覽器默認樣式。

親自試一試