CSS 基础知识分享：从入门到注意事项

什么是CSS？

CSS是用于描述HTML或XML文档呈现方式的语言。它控制网页的布局、颜色、字体等视觉表现，让内容与表现分离。

通俗的说，html是骨头，那么css就是他的画皮。

基本语法

CSS规则由两部分组成：选择器和声明块。

选择器 {
  属性: 值;
  属性: 值;
}

例如：

p {
  color: blue;
  font-size: 16px;
}

常用选择器

1. 元素选择器：直接选择HTML元素（常用）

   p { ... }

2. 类选择器：选择具有特定class属性的元素（常用，需要编辑目标class属性）

   .highlight { ... }

3. ID选择器：选择具有特定ID属性的元素

   #header { ... }

4. 后代选择器：选择特定元素内的元素

   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

动手小练习

1. 创建一个HTML文件
2. 添加一个外部CSS文件
3. 尝试：
   • 把所有段落文字变成蓝色
   • 给页面添加一个粉色背景
   • 让所有图片宽度变成300像素

下一步学习建议

掌握这些基础后，可以继续学习：

1. 盒模型（理解margin/padding/border）
2. 常用布局（flexbox）
3. 响应式设计（让网页适配手机）

注意事项

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看似简单，但深入掌握需要大量实践。建议从基础开始，逐步构建复杂布局，同时注意代码组织和维护性。