CSS - 如何新增

使用 CSS 將樣式新增到 HTML 文件有三種方法。在本教程中，我們將學習將 CSS 新增到網頁的方法。

如何將 CSS 新增到 HTML？

有四種方法可以將 CSS 樣式新增到 HTML 網頁中，

內部 CSS： 這些樣式直接新增到 HTML 檔案中。
外部 CSS： 為 CSS 建立一個單獨的檔案，並將其匯入 HTML 檔案。
內聯 CSS： 可以使用“style”屬性為每個標籤單獨提供樣式。

內部 CSS

您可以使用<style> 元素將 CSS 樣式包含到 HTML 文件中。使用此語法定義的規則將應用於文件中所有可用的元素。

示例

<!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

您可以使用任何 HTML 元素的 style 屬性來定義樣式規則。這些規則將僅應用於該元素。

示例

<html>
    <head>
    </head>

    <body>
        <h1 style = "color:#36C;"> 
            This is inline CSS 
        </h1>
    </body>
</html>

外部 CSS

可以使用<link> 元素在 HTML 文件中包含外部樣式表文件。

外部樣式表是一個單獨的文字檔案，副檔名為 .css。您在此文字檔案中定義所有樣式規則，然後可以使用 <link> 元素將此檔案包含在任何 HTML 文件中。

<head>
   <link type = "text/css" href = "path/to/style.css" media = "..." />
</head>

style.css 將如下所示。

body{
    color: black;
}

級聯順序

當使用此處提到的不同方法為一個元素指定多個樣式時會發生什麼？我們有 CSS 特異性 順序適用於每個樣式表。以下是該順序的概述。

任何內聯樣式表都具有最高優先順序。因此，它將覆蓋在 <style>...</style> 標籤中定義的任何規則或在任何外部樣式表文件中定義的規則。
在 <style>...</style> 標籤中定義的任何規則將覆蓋在任何外部樣式表文件中定義的規則。
在外部樣式表文件中定義的任何規則都具有最低優先順序，並且只有在以上兩個規則都不適用時才會應用在此檔案中定義的規則。

列印頁面