1.CSS 长度单位
CSS 长度单位可分为绝对单位和相对单位两大类，它们为网页布局提供了灵活的尺寸控制方案。
1.1 绝对单位
绝对单位表示固定尺寸，不受其他元素影响。主要单位包括：
- px（像素）：屏幕显示的基本单位，1px 通常对应 1 个物理像素
1.2 相对单位
相对单位会根据父元素或视口尺寸动态调整，常见单位如下：
| 单位 | 说明 |
|---|---|
% | 相对于父元素尺寸 |
em | 相对于当前元素字体大小 |
rem | 相对于根元素(html)字体大小 |
vw | 视口宽度的 1% |
vh | 视口高度的 1% |
示例：
.box { width: 50vw; height: 50vh; background-color: red; }该示例中，.box的尺寸会随视口大小自动调整。
2.CSS 颜色表示
CSS 支持多种颜色表示方式：
2.1 命名颜色
使用预定义颜色名称，如red、blue，简单但可选范围有限。
2.2 RGB/RGBA
- RGB：通过红(0-255)、绿(0-255)、蓝(0-255)三原色混合
- RGBA：在 RGB 基础上增加透明度(0-1)
.box { background-color: rgb(255, 0, 0); /* 红色 */ } .box1 { background-color: rgba(0, 255, 0, 0.5); /* 半透明绿色 */ }2.3 十六进制颜色
以#RRGGBB格式表示，如：
#ff0000 /* 红色 */ #00ff00 /* 绿色 */2.4 HSL/HSLA
- HSL：色相(0-360)、饱和度(0-100%)、亮度(0-100%)
- HSLA：增加透明度
.box { background-color: hsl(0, 100%, 50%); /* 红色 */ }3.CSS 字体样式
3.1 基础属性
color：文本颜色font-size：字号(px/em/rem等)font-family：字体类型
p { color: red; font-size: 16px; font-family: "Arial", sans-serif; }3.2 自定义字体
使用@font-face引入外部字体：
@font-face { font-family: "MyFont"; src: url("font.ttf"); } p { font-family: "MyFont"; }4.CSS 字体分类
| 分类 | 示例 | 适用场景 |
|---|---|---|
| 衬线字体 | serif | 传统正式页面 |
| 无衬线字体 | sans-serif | 现代简洁设计 |
| 等宽字体 | monospace | 代码展示 |
| 草书字体 | cursive | 创意装饰性设计 |
| 艺术字体 | fantasy | 特殊主题设计 |
示例：
p { font-family: serif; }5.其他字体样式
5.1 字体效果
p { font-style: italic; /* 斜体 */ font-weight: bold; /* 加粗 */ }5.2 简写属性
p { font: italic bold 30px "Courier New", monospace; }
