什么是CSS？
CSS是用于描述HTML或XML文档呈现方式的语言。它控制网页的布局、颜色、字体等视觉表现，让内容与表现分离。
通俗的说，html是骨头，那么css就是他的画皮。
基本语法
CSS规则由两部分组成：选择器和声明块。
选择器 {
属性: 值;
属性: 值;
}
例如：
p {
color: blue;
font-size: 16px;
}
常用选择器
-
元素选择器：直接选择HTML元素（常用）
p { ... } -
类选择器：选择具有特定class属性的元素（常用，需要编辑目标class属性）
.highlight { ... } -
ID选择器：选择具有特定ID属性的元素
#header { ... } -
后代选择器：选择特定元素内的元素
div p { ... }
常用属性
文本样式
color: 文本颜色font-family: 字体font-size: 字体大小text-align: 文本对齐方式
盒模型
width/height: 宽度/高度margin: 外边距padding: 内边距border: 边框
布局
display: 显示方式（block, inline, flex等）position: 定位方式float: 浮动
常见问题
1. 为什么CSS没效果？
- 检查选择器是否写对了
- 检查CSS文件路径是否正确
- 看看是否有拼写错误（比如
color写成colour）
2. 颜色值怎么写？
- 英文单词：
red,blue - 十六进制：
#FF0000（红色） - RGB：
rgb(255, 0, 0)（红色）
3. 单位用px还是%？
px（像素）：固定大小%（百分比）：相对大小- 初学者建议先用
px
动手小练习
- 创建一个HTML文件
- 添加一个外部CSS文件
- 尝试：
- 把所有段落文字变成蓝色
- 给页面添加一个粉色背景
- 让所有图片宽度变成300像素
下一步学习建议
掌握这些基础后，可以继续学习：
- 盒模型（理解margin/padding/border）
- 常用布局（flexbox）
- 响应式设计（让网页适配手机）
注意事项
1. 盒模型理解
CSS盒模型由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。默认情况下，元素的width和height只指定内容区域的尺寸。
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
/* 实际占用宽度 = 200 + 20*2 + 5*2 + 10*2 = 270px */
可以使用box-sizing: border-box让宽度包含padding和border：
.box {
box-sizing: border-box;
/* 现在width包含content+padding+border */
}
2. 外边距合并
相邻的垂直外边距会合并（取较大值），这在布局时可能导致意外结果：
.box1 { margin-bottom: 20px; }
.box2 { margin-top: 30px; }
/* 实际间距是30px，不是50px */
解决方案：
- 使用padding代替margin
- 添加边框或padding阻止合并
CSS看似简单，但深入掌握需要大量实践。建议从基础开始，逐步构建复杂布局，同时注意代码组织和维护性。
