如何在 HTML 中正确引用 CSS 文件？

在HTML中引用CSS有几种方法，包括内联样式、内部样式表和外部样式表。

在HTML中引用CSS有多种方式，主要包括行内样式、内部样式表、外部样式表和导入样式表，这些方法各有优缺点，适用于不同的场景，下面将详细介绍这几种方法，并提供相应的代码示例和表格对比。

1. 行内样式（Inline Styles）

行内样式是将CSS规则直接写在HTML元素的style属性中，这种方法简单快捷，但不利于维护和重用。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Inline Styles Example</title>
</head>
<body>
    <h1 style="color: blue; textalign: center;">This is a heading with inline styles</h1>
    <p style="fontsize: 16px; color: gray;">This is a paragraph with inline styles.</p>
</body>
</html>

2. 内部样式表（Internal Stylesheet）

内部样式表是将CSS规则放在HTML文档的<head>部分中的<style>标签内，这种方法适用于单个页面，便于集中管理样式。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Internal Stylesheet Example</title>
    <style>
        body {
            backgroundcolor: lightblue;
        }
        h1 {
            color: navy;
            marginleft: 20px;
        }
    </style>
</head>
<body>
    <h1>This is a heading with internal styles</h1>
    <p>This is a paragraph with internal styles.</p>
</body>
</html>

3. 外部样式表（External Stylesheet）

外部样式表是将CSS规则写在一个独立的.css文件中，然后在HTML文档中通过<link>标签引入，这种方法最常用，因为它可以实现样式的复用和集中管理。

示例代码：

styles.css

body {
    backgroundcolor: lightgreen;
}
h1 {
    color: olive;
    textalign: center;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>External Stylesheet Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>This is a heading with external styles</h1>
    <p>This is a paragraph with external styles.</p>
</body>
</html>

4. 导入样式表（Import Stylesheet）

导入样式表使用@import规则将外部样式表导入到内部样式表中，这种方法较少使用，通常用于在多个样式表之间创建依赖关系。

示例代码：

reset.css

/* CSS reset */
{
    margin: 0;
    padding: 0;
    boxsizing: borderbox;
}

styles.css

@import url('reset.css');
body {
    backgroundcolor: lightcoral;
}
h1 {
    color: maroon;
    textalign: right;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Import Stylesheet Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>This is a heading with imported styles</h1>
    <p>This is a paragraph with imported styles.</p>
</body>
</html>

表格对比不同引用CSS的方式

方式	可维护性	性能	适用场景	示例代码位置
行内样式	低	高	快速原型、一次性样式调整	HTML元素的`style`属性
内部样式表	中等	中等	单个页面的样式定义	HTML文档的部分
外部样式表	高	高	多页面共享样式、大型项目	独立的`.css`文件，HTML文档中引用
导入样式表	高	中等	多个样式表之间的依赖关系	HTML文档的部分或`.css`文件