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

1.CSS 长度单位

CSS 长度单位可分为绝对单位和相对单位两大类，它们为网页布局提供了灵活的尺寸控制方案。

1.1 绝对单位

绝对单位表示固定尺寸，不受其他元素影响。主要单位包括：

• px（像素）：屏幕显示的基本单位，1px 通常对应 1 个物理像素

1.2 相对单位

相对单位会根据父元素或视口尺寸动态调整，常见单位如下：

示例：

.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 字体分类

示例：

p { font-family: serif; }

5.其他字体样式

5.1 字体效果

p { font-style: italic; /* 斜体 */ font-weight: bold; /* 加粗 */ }

5.2 简写属性

p { font: italic bold 30px "Courier New", monospace; }