HTML - 樣式表

CSS，或層疊樣式表，是一種定義網頁文件在螢幕或列印輸出中外觀的工具。自從1994年推出以來，W3C 一直鼓勵使用樣式表進行網頁設計。CSS 允許您控制內容的呈現方式，無論是在螢幕上、列印輸出中還是為了輔助功能，從而使網頁設計更加靈活高效。

層疊樣式表 (CSS) 提供簡單有效的替代方案來指定 HTML 標籤的各種屬性。使用 CSS，您可以為給定的 HTML 元素指定許多樣式屬性。

每個屬性都有一個名稱和一個值，用冒號 (:) 分隔。每個屬性宣告用分號 (;) 分隔。

HTML 文件中 CSS 的示例

首先，讓我們考慮一個使用<font>標籤及其相關屬性來指定文字顏色和字型大小的 HTML 文件示例

<!DOCTYPE html>
<html>
<head>
   <title>HTML CSS</title>
</head>
<body>
   <p>
      <font color="green" size="5">Hello, World!</font>
   </p>
</body>
</html>

我們可以使用 CSS 如下重寫上面的示例

<!DOCTYPE html>
<html>
<head>
   <title>HTML CSS</title>
</head>
<body>
   <p style="color:green;font-size:24px;">
      Hello, World!
   </p>
</body>
</html>

層疊意味著應用於父元素的樣式也將應用於父元素內的所有子元素。因此，當您將任何樣式應用於元素時，必須注意子元素。您也可以為子元素應用不同的樣式。

在 HTML 中使用 CSS（樣式表）的方法

有三種方法可以在 HTML 文件中包含 CSS

外部 CSS：在一個單獨的 .css 檔案中定義樣式表規則，然後使用 HTML <link>標籤將該檔案包含在您的 HTML 文件中。
內部 CSS：使用 <style>標籤在 HTML 文件的頭部部分定義樣式表規則。
內聯 CSS：使用 style 屬性直接在 HTML 元素旁邊定義樣式表規則。

在 HTML 中使用樣式表的示例

讓我們藉助合適的示例逐一檢視這三種方法。

使用外部 CSS

如果您需要在多個頁面上使用樣式表 (CSS)，則始終建議在一個單獨的檔案中定義一個公共樣式表。CSS 檔案的副檔名為“.css”，它將使用 <link> 標籤包含在 HTML 檔案中。

假設我們定義了一個樣式表文件style.css，其中包含以下規則

style.css

.red{
   color: red;
}
.thick{
   font-size:20px;
}
.green{
   color:green;
}

這裡我們定義了三個 CSS 規則，這些規則將適用於為 HTML 標籤定義的三個不同的類。我建議您不必擔心這些規則是如何定義的，因為您將在學習 CSS 時學習它們。

在 HTML 中使用外部 CSS 檔案的示例

現在讓我們在下面的 HTML 文件中使用上面的外部 CSS 檔案。

<!DOCTYPE html>
<html>
<head>
   <title>HTML External CSS</title>
   <link rel="stylesheet" type="text/css" href="/html/style.css">
</head>
<body>
   <p class="red">This is red</p>
   <p class="thick">This is thick</p>
   <p class="green">This is green</p>
   <p class="thick green">
      This is thick and green
   </p>
</body>
</html>

使用內部 CSS

如果您只想將樣式表規則應用於單個文件，則可以使用<style>標籤在 HTML 文件的頭部部分包含這些規則。內部樣式表中定義的規則會覆蓋外部 CSS 檔案中定義的規則。

在 HTML 中使用內部 CSS 的示例

讓我們再次重寫上面的示例，但是在這裡我們將在同一個 HTML 文件中使用 <style> 標籤編寫樣式表規則。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Internal CSS</title>
   <style type="text/css">
      .red {
         color: red;
      }
      .thick {
         font-size: 20px;
      }
      .green {
         color: green;
      }
   </style>
</head>
<body>
   <p class="red">This is red</p>
   <p class="thick">This is thick</p>
   <p class="green">This is green</p>
   <p class="thick green">
      This is thick and green
   </p>
</body>
</html>

使用內聯 CSS

您可以使用相關標籤的 style 屬性直接將樣式表規則應用於任何 HTML 元素。這應該只在您有興趣對任何 HTML 元素進行特定更改時才執行。內聯元素中定義的規則會覆蓋外部 CSS 檔案中定義的規則以及 <style> 元素中定義的規則。

在 HTML 中使用內聯 CSS 的示例

讓我們再次重寫上面的示例，但是在這裡我們將在 HTML 元素中使用這些元素的style屬性編寫樣式表規則。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Inline CSS</title>
</head>
<body>
   <p style="color:red;">This is red</p>
   <p style="font-size:20px;">This is thick</p>
   <p style="color:green;">This is green</p>
   <p style="color:green;font-size:20px;">
      This is thick and green
   </p>
</body>
</html>

列印頁面