css文件制作
创建CSS文件的基本步骤
新建一个文本文件，将文件扩展名改为.css，例如style.css。使用代码编辑器（如VS Code、Sublime Text等）打开文件进行编辑。
CSS文件内容由选择器和声明块组成。选择器用于指定要样式化的HTML元素，声明块包含一组用花括号{}括起来的样式声明。
编写CSS语法
每个样式声明由属性和值组成，中间用冒号:分隔，多个声明之间用分号;分隔。示例：
selector {
property1: value1;
property2: value2;
}常用CSS选择器类型
类选择器：以点.开头，作用于HTML中class属性匹配的元素
.classname {
color: red;
}ID选择器：以井号#开头，作用于HTML中id属性匹配的元素
#elementid {
font-size: 16px;
}元素选择器：直接使用HTML标签名
p {
margin: 10px;
}链接CSS到HTML
在HTML文件的<head>部分使用<link>标签引入CSS文件：
<link rel="stylesheet" href="style.css">或者使用内联样式（不推荐大量使用）：
<p style="color: blue;">文本内容</p>CSS注释写法
使用/* */包裹注释内容：
/* 这是一个CSS注释 */
body {
background-color: #f0f0f0; /* 浅灰色背景 */
}常用CSS属性示例
文本样式：
h1 {
color: #333;
font-family: Arial, sans-serif;
text-align: center;
}盒模型属性：
.box {
width: 200px;
padding: 20px;
border: 1px solid #ccc;
margin: 10px auto;
}媒体查询实现响应式设计
使用@media规则为不同屏幕尺寸设置不同样式：
@media (max-width: 600px) {
.menu {
display: none;
}
}CSS预处理器使用（如Sass）
安装Sass后，创建.scss文件并编译为CSS：
$primary-color: #333;
body {
color: $primary-color;
}编译命令：
sass input.scss output.css浏览器开发者工具调试
现代浏览器都内置开发者工具，可以实时查看和修改CSS。按F12打开工具，使用元素检查器查看应用到特定元素的CSS规则。
CSS最佳实践
保持样式表组织有序，通常按以下顺序排列：
- 通用样式（body、重置样式等）
- 布局相关样式
- 组件样式
- 响应式设计媒体查询
使用有意义的类名和ID，避免过度嵌套选择器，考虑使用CSS变量提高可维护性。
