HTML基础：如何在HTML文件中引入外部CSS文件？

针对你的文件结构的具体操作 #

你的文件结构应为：

├── 1.html
└── CSS/
    └── style.css

要在1.html中引入CSS/style.css，只需在HTML的<head>标签内添加<link>标签，指定正确的文件路径即可：

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

HTML引入CSS的三种基础方法 #

1. 内联样式（Inline CSS） #

直接在HTML元素的style属性中编写CSS规则，仅对当前元素生效：

<div style="color: red; font-size: 16px;">这是一段红色文本</div>

2. 内部样式表（Internal CSS） #

在HTML的<head>标签内使用<style>标签定义CSS规则，作用于整个HTML文件：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div>这是一段蓝色加粗文本</div>
</body>
</html>

3. 外部样式表（External CSS） #

将CSS代码单独写在.css文件中，通过<link>标签引入，是最常用的方式，便于代码维护和复用。根据文件位置不同，href属性的写法分为几种：

• 同一目录：href="style.css"
• 子目录（你的场景）：href="CSS/style.css"
• 父目录：href="../style.css"
• 绝对路径：href="/项目根路径/CSS/style.css"（适用于服务器或大型项目）

内容的提问来源于stack exchange，提问作者Mahdi Jalali Jam