制作外置css
创建外置 CSS 文件
新建一个文本文件，将文件后缀名改为 .css，例如 styles.css。文件内容直接编写 CSS 规则，无需 <style> 标签。
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.header {
background-color: #f0f0f0;
padding: 20px;
}链接 CSS 到 HTML
在 HTML 文件的 <head> 部分使用 <link> 标签引入外置 CSS 文件。
<!DOCTYPE html>
<html>
<head>
<title>示例页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">这是页眉</div>
</body>
</html>文件路径规范
确保 href 属性中的路径正确：
- 同级目录直接写文件名：
href="styles.css" - 子目录需包含路径：
href="css/styles.css" - 上级目录使用
../：href="../styles.css"
验证链接是否成功
检查浏览器开发者工具（F12）的“网络”选项卡，确认 CSS 文件加载状态为 200。若加载失败，检查路径或文件名拼写。
维护与优化
将 CSS 按功能模块拆分，例如 layout.css、typography.css，通过多个 <link> 标签引入。生产环境建议合并压缩 CSS 以减少 HTTP 请求。
