制作外置css
创建外置CSS文件
外置CSS文件是一种将样式与HTML内容分离的方法，通过单独的文件管理样式，便于维护和复用。以下是具体实现步骤：
创建CSS文件
新建一个文本文件，将后缀名改为.css，例如styles.css。文件内容直接编写CSS规则，无需<style>标签：
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
}
h1 {
color: #333;
}HTML中链接CSS文件
在HTML文件的<head>部分使用<link>标签引入CSS文件：
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>文件路径配置
相对路径
若CSS文件与HTML在同一目录，href直接写文件名。若在不同文件夹，需指定路径：
<!-- CSS在子文件夹中 -->
<link href="css/styles.css" rel="stylesheet">
<!-- CSS在父级目录中 -->
<link href="../styles.css" rel="stylesheet">绝对路径 可通过完整URL链接外部CSS文件：
<link href="https://example.com/styles.css" rel="stylesheet">CSS编写规范
选择器使用 外置CSS支持所有标准选择器，包括类、ID、伪类等：
.button {
padding: 10px 15px;
background: #007bff;
}
#header {
height: 80px;
}
a:hover {
text-decoration: underline;
}媒体查询 可添加响应式设计：
@media (max-width: 768px) {
.container {
width: 100%;
}
}验证与调试
浏览器开发者工具 按F12打开开发者工具，在"Elements"面板检查样式是否正确加载，未生效的样式会被划掉并显示原因。
缓存问题 修改CSS后若未生效，尝试强制刷新（Ctrl+F5）或清除浏览器缓存。
文件权限 确保服务器配置允许CSS文件访问，检查HTTP响应头是否包含：
Content-Type: text/css
