制作 .css
创建CSS文件的基本步骤
新建一个纯文本文件，将文件扩展名改为.css，例如styles.css。使用文本编辑器或代码编辑器（如VS Code、Sublime Text）打开该文件。
在文件中编写CSS规则，每个规则由选择器和声明块组成。选择器指定样式应用的目标，声明块包含一组属性和值，用大括号{}包裹。
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #333;
text-align: center;
}链接CSS到HTML
在HTML文件的<head>部分使用<link>标签引入外部CSS文件。确保href属性指向正确的CSS文件路径。
<head>
<link rel="stylesheet" href="styles.css">
</head>CSS语法规则
每个CSS规则由选择器和声明块构成。声明块内可以包含多个属性-值对，每个属性与值之间用冒号:分隔，不同属性之间用分号;分隔。
selector {
property1: value1;
property2: value2;
}常用CSS选择器
- 元素选择器：直接使用HTML标签名，如
p、div - 类选择器：以点
.开头，如.container - ID选择器：以井号
#开头，如#header - 属性选择器：如
[type="text"] - 伪类选择器：如
:hover、:nth-child()
组织CSS代码
将相关样式分组，可以使用注释分隔不同部分。推荐按布局、排版、颜色等分类组织代码。
/* Layout */
.container {
width: 80%;
margin: 0 auto;
}
/* Typography */
h1, h2, h3 {
font-family: 'Helvetica', sans-serif;
}调试CSS
使用浏览器开发者工具（F12或右键检查）查看和修改CSS。可以实时看到样式变化，帮助定位问题。
CSS预处理器
考虑使用Sass或Less等预处理器，它们提供变量、嵌套、混合等功能，使CSS更易维护。需要编译为普通CSS才能在浏览器中使用。
$primary-color: #333;
body {
color: $primary-color;
}响应式设计
使用媒体查询创建适应不同屏幕尺寸的布局。在CSS中添加@media规则定义特定条件下的样式。
@media (max-width: 600px) {
.container {
width: 100%;
}
}
