### CSS2 速查表知识点解析
#### 一、概述
CSS2（Cascading Style Sheets Level 2）是Web设计中的一个重要组成部分，用于控制网页的布局与样式。本速查表涵盖了CSS2的主要特性与指令，对于前端开发人员来说是不可或缺的参考资料。
#### 二、速查表主要内容解析
##### 1. 简化写法 (Shorthand)
简化写法允许开发者用更简洁的方式书写CSS属性，提高代码的可读性和维护性。
- **示例**：
```css
margin: 10px 5px 15px 20px;
/* 分别对应 top, right, bottom, left */
```
##### 2. 注释 (Comments)
在CSS中添加注释可以帮助他人理解代码的作用。
- **语法**：`/* 这是一个注释 */`
##### 3. 伪类选择器 (PseudoSelectors)
伪类选择器可以为特定状态下的元素应用样式。
- **常见伪类**：
- `:hover` — 当用户将鼠标悬停在元素上时应用。
- `:active` — 用户激活（例如点击或按键盘）元素时应用。
- `:focus` — 元素获得焦点时应用。
- `:link` — 对未访问过的链接应用样式。
- `:visited` — 对已访问过的链接应用样式。
- `:first-line` — 仅对元素的第一行文本应用样式。
- `:first-letter` — 仅对元素的第一个字母应用样式。
##### 4. 媒体类型 (MediaTypes)
媒体类型定义了样式表的应用范围，可以根据不同的设备和输出方式选择不同的样式表。
- **常见媒体类型**：
- `all` — 所有设备。
- `braille` — 触觉反馈设备。
- `embossed` — 凸版印刷设备。
- `handheld` — 移动设备。
- `print` — 打印机。
- `projection` — 大屏幕投影仪。
- `screen` — 计算机显示器。
- `speech` — 文本转语音软件。
- `tty` — 终端设备。
- `tv` — 电视。
##### 5. 单位 (Units)
单位用于定义CSS属性的具体值。
- **常用单位**：
- `%` — 百分比。
- `em` — 相对于父元素的字体大小。
- `pt` — 点。
- `px` — 像素。
##### 6. 字体 (Font)
- **属性**：
- `font-size` — 设置字体大小。
- `font-family` — 指定使用的字体。
- `letter-spacing` — 设置字母之间的间距。
- `line-height` — 设置行间距。
- `text-align` — 设置文本对齐方式。
- `text-decoration` — 设置文本装饰效果。
- `text-indent` — 设置首行缩进。
- `text-transform` — 设置文本转换规则。
- `vertical-align` — 设置垂直对齐方式。
- `word-spacing` — 设置单词之间的间距。
##### 7. 列表 (List)
- **属性**：
- `list-style-type` — 设置列表项标记的类型。
- `disc` — 实心圆点。
- `circle` — 空心圆圈。
- `square` — 实心方块。
- `decimal` — 阿拉伯数字。
- `lower-roman` — 小写罗马数字。
- `upper-roman` — 大写罗马数字。
##### 8. 背景 (Background)
- **属性**：
- `background-color` — 设置背景颜色。
- `background-image` — 设置背景图像。
- `background-repeat` — 设置背景图像的重复方式。
- `background-position` — 设置背景图像的位置。
- `background-attachment` — 设置背景图像是否随页面滚动。
##### 9. 定位 (Position)
- **属性**：
- `clear` — 指定元素周围不允许出现浮动元素的方向。
- `float` — 设置元素的浮动方向。
- `left` — 设置元素相对于定位上下文左侧的位置。
- `top` — 设置元素相对于定位上下文顶部的位置。
- `z-index` — 设置元素的堆叠顺序。
- `position` — 设置元素的定位模式。
##### 10. 边框 (Border)
- **属性**：
- `border-width` — 设置边框宽度。
- `border-color` — 设置边框颜色。
- `border-style` — 设置边框样式。
##### 11. 内外边距 (Margins+Padding)
- **属性**：
- `margin` — 设置元素周围的空白区域。
- `padding` — 设置元素内容与边框之间的空白区域。
##### 12. 语法 (Syntax)
- **外部样式表**：通过 `<link>` 标签引入外部CSS文件。
```html
<link rel="stylesheet" type="text/css" href="style.css" />
```
- **内部样式表**：在 `<style>` 标签内定义样式。
```html
<style type="text/css">
selector { property: value; }
</style>
```
- **内联样式**：直接在HTML元素中定义样式。
```html
<tag style="property: value;">
```
CSS2提供了丰富的特性和指令来帮助开发者更好地控制网页的表现形式。熟练掌握这些知识对于前端开发来说至关重要。
