CSS（层叠样式表）在网页设计中扮演着重要的角色，它用于设置网页元素的样式和布局，当需要将CSS嵌入到多个HTML文件中时，有几种方法可以实现，下面将详细介绍如何将CSS嵌入到多个HTML文件中,以便统一网站风格和减少重复工作。
内部样式表
内部样式表是将CSS代码写在HTML文件的<style>标签中，这种方式仅在当前HTML文件中有效，若要应用到多个HTML文件，需要在每个文件中复制相同的CSS代码，虽然这种方法较为简单,但维护起来较为麻烦。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
/* 其他样式 */
</style>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
外部样式表
外部样式表是将CSS代码保存在一个单独的.css文件中，然后在需要应用样式的HTML文件中通过<link>标签引入，这种方法可以轻松地将CSS应用到多个HTML文件,只需在各个HTML文件中引入同一个CSS文件即可。
创建CSS文件
创建一个CSS文件，例如style.css,然后在文件中编写样式代码。
/* style.css */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
/* 其他样式 */
引入CSS文件
在HTML文件的<head>标签中，使用<link>标签引入创建的CSS文件。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
内联样式
内联样式是将CSS代码直接写在HTML标签的style属性中，这种方式不建议用于多个HTML文件的样式设置，因为它会导致代码冗余，不易维护，但在某些特殊情况下,可以用于临时修改某个元素的样式。
<!DOCTYPE html>
<html>
<body>
<h1 style="color: #333;">标题</h1>
<!-- 页面内容 -->
</body>
</html>
导入样式表
在CSS中，可以使用@import规则将一个样式表导入到另一个样式表中，这种方法同样适用于多个HTML文件，但需要确保HTML文件引入了包含@import规则的CSS文件。
创建主CSS文件
创建一个主CSS文件，例如main.css，并在其中使用@import规则引入其他CSS文件。
/* main.css */ @import "style.css"; /* 其他样式 */
引入主CSS文件
在HTML文件的<head>标签中,引入主CSS文件。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
通过以上四种方法，我们可以将CSS嵌入到多个HTML文件中，在实际开发过程中，建议使用外部样式表，因为它具有更好的维护性和可扩展性，只需在HTML文件中引入同一个CSS文件，即可轻松实现网站风格的统一，在项目逐渐庞大时，还可以将CSS文件拆分成多个模块,便于管理和维护。