CSS - 如何添加

使用 CSS 将样式添加到 HTML 文档有三种方法。在本教程中，我们将学习将 CSS 添加到网页的方法。

如何将 CSS 添加到 HTML？

有四种方法可以将 CSS 样式添加到 HTML 网页中，

内部 CSS： 这些样式直接添加到 HTML 文件中。
外部 CSS： 为 CSS 创建一个单独的文件，并将其导入 HTML 文件。
内联 CSS： 可以使用“style”属性为每个标签单独提供样式。

内部 CSS

您可以使用<style> 元素将 CSS 样式包含到 HTML 文档中。使用此语法定义的规则将应用于文档中所有可用的元素。

示例

Open Compiler

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

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

内联 CSS

您可以使用任何 HTML 元素的 style 属性来定义样式规则。这些规则将仅应用于该元素。

示例

Open Compiler

<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> 标签中定义的任何规则将覆盖在任何外部样式表文件中定义的规则。
在外部样式表文件中定义的任何规则都具有最低优先级，并且只有在以上两个规则都不适用时才会应用在此文件中定义的规则。

打印页面