制作外置css
创建CSS文件
新建一个文本文件，将其命名为styles.css（或其他自定义名称），确保文件扩展名为.css。使用代码编辑器（如VS Code、Sublime Text等）打开该文件。
编写CSS内容
在styles.css文件中编写CSS规则。例如：
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.header {
background-color: #333;
color: white;
padding: 10px 20px;
text-align: center;
}链接CSS到HTML文件
在HTML文件的<head>部分添加<link>标签，引用外置CSS文件。确保href属性指向正确的CSS文件路径：
<!DOCTYPE html>
<html>
<head>
<title>示例页面</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="header">这是页眉</div>
</body>
</html>路径注意事项
- 同级目录：若CSS文件与HTML文件在同一文件夹，直接写文件名（如
styles.css）。 - 子目录：若CSS文件在子文件夹（如
css/styles.css），路径为href="css/styles.css"。 - 上级目录：若CSS文件在上级目录，使用
../（如href="../styles.css"）。
验证链接
保存文件后，在浏览器中打开HTML文件，检查样式是否生效。若未生效，需检查：
- CSS文件名和路径是否正确。
- 浏览器开发者工具（F12）中是否有加载错误提示。
- 文件权限是否允许访问。
优化与维护
- 使用注释分隔CSS文件中的不同部分：
/* 全局样式 */ body { ... }
/ 页眉样式 / .header { ... }
- 通过工具（如PostCSS、Sass）增强CSS的可维护性。
