CSS 样式基础与视觉设计：从单位到字体

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;
}