制作外置css
创建外置CSS文件
新建一个文本文件，将文件后缀名改为.css。例如styles.css。确保文件名具有描述性且与HTML文件关联。
在CSS文件中编写样式规则，无需包含<style>标签。直接写入选择器和属性，例如：
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #333;
}链接CSS到HTML文件
在HTML文件的<head>部分使用<link>标签引入CSS文件。确保href属性路径正确：
<link rel="stylesheet" href="styles.css">若CSS文件位于子文件夹中，路径需调整为"css/styles.css"；若在上级目录则为"../styles.css"。
验证路径与调试
检查浏览器开发者工具（F12）的“Network”选项卡，确认CSS文件是否成功加载。若出现404错误，需检查文件路径拼写或位置。
清除浏览器缓存（Ctrl+F5）确保加载最新样式。使用相对路径而非绝对路径以提高可移植性。
组织CSS结构
按功能模块分组样式规则，例如：
/* 全局样式 */
body { ... }
/* 导航栏样式 */
.nav { ... }
/* 响应式设计 */
@media (max-width: 600px) { ... }添加注释说明模块用途，便于后期维护。
最佳实践
避免使用内联样式或<style>标签，保持样式与内容分离。对于大型项目，可拆分多个CSS文件（如layout.css、theme.css）按需加载。
使用预处理器（如Sass/Less）时，需额外编译步骤生成最终CSS文件。确保开发环境配置正确。
