制作 .css
创建 CSS 文件的基本步骤
新建一个文本文件，将文件扩展名改为 .css。例如 styles.css。可以使用任何文本编辑器（如 Notepad++、VS Code、Sublime Text）来编辑该文件。
在文件中编写 CSS 规则，格式为选择器加上声明块。声明块包含属性和值，用花括号包裹。
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}链接 CSS 到 HTML
在 HTML 文件的 <head> 部分使用 <link> 标签引入 CSS 文件。
<link rel="stylesheet" href="styles.css">确保 href 属性中的路径与 CSS 文件的实际位置匹配。如果 CSS 文件在子文件夹中，路径可能是 css/styles.css。
常用 CSS 属性
-
控制文本样式：
h1 { color: #333; font-size: 24px; text-align: center; } -
设置盒模型：
.box { width: 200px; padding: 20px; margin: 10px; border: 1px solid #ddd; } -
调整背景：
header { background-image: url('bg.jpg'); background-size: cover; }
使用 CSS 选择器
-
类选择器（以点开头）：
.highlight { background-color: yellow; } -
ID 选择器（以井号开头）：
#main-content { width: 80%; } -
伪类选择器：
a:hover { color: red; }
响应式设计
使用媒体查询针对不同屏幕尺寸应用不同样式。
@media (max-width: 600px) {
.menu {
display: none;
}
}CSS 预处理器
考虑使用 Sass 或 Less 等预处理器来增强 CSS 功能。这些工具支持变量、嵌套规则等特性。
$primary-color: #3498db;
.button {
background: $primary-color;
&:hover {
background: darken($primary-color, 10%);
}
}调试 CSS
浏览器开发者工具（按 F12 打开）可以检查元素应用的 CSS 规则，实时修改并查看效果。使用 border: 1px solid red; 临时添加边框有助于识别元素边界。
最佳实践
- 使用有意义的类名
- 避免过度使用
!important - 组织代码结构（如将相关样式分组）
- 考虑使用 CSS 重置或标准化文件
- 定期验证 CSS 代码（可使用 W3C CSS 验证服务）
性能优化
- 合并多个 CSS 文件
- 压缩 CSS 文件（移除空格和注释）
- 避免过于复杂的选择器
- 使用 CSS 精灵图减少 HTTP 请求
- 考虑关键 CSS 内联以提升首屏渲染速度
