CSS 核心基础 —— 长度单位、颜色表示与字体样式

一、CSS 长度单位

CSS 中的长度单位分为 绝对单位 和 相对单位，实际开发中相对单位使用更为频繁，因为能更好地适配不同设备和布局。

1. 绝对单位

绝对单位的尺寸一旦设定，不会随其他因素改变。常见的绝对单位有 px（像素）、in（英寸）、cm（厘米）等。

px（像素） ：也叫 CSS 像素 / 程序员像素，是前端开发中最常用的绝对单位。
- 在 PC 端，1 个 CSS 像素 ≈ 1 个物理像素，对应屏幕上一个 1*1 的发光小方块。
- 像素可以通过放大屏幕观测到，放大到一定程度会出现锯齿感。

2. 相对单位

相对单位的尺寸会随参考元素的变化而变化，适配性更强，常用于响应式布局。

单位	参考对象	核心特点
`%`（百分比）	父元素的对应属性值	父元素宽高变化时，子元素会同步按比例变化，适合流式布局
`em`	当前元素的 `font-size`	1em = 当前元素的 1 个 `font-size`；若当前元素未设置 `font-size`，则继承祖先元素的 `font-size`，最终默认继承根元素（`html`）的 `16px`
`rem`	根元素（`html`）的 `font-size`	1rem = 根元素的 1 个 `font-size`，不受当前元素和父元素字体大小影响，是响应式布局的常用单位
`vw`	视口宽度	1vw = 视口宽度的 1%，100vw 等于整个视口宽度
`vh`	视口高度	1vh = 视口高度的 1%，100vh 等于整个视口高度

注意：vw 和 vh 的参考对象是设备视口，而非父元素，在移动端适配中尤为实用。

二、CSS 颜色表示方法

CSS 提供了多种颜色表示方式，满足不同开发场景的需求，核心原理均基于 RGB 颜色模型（红、绿、蓝三原色混合）。

1. 颜色单词表示

直接使用颜色的英文单词，如 red、yellow、blue、orange 等。

优点：语法简单，直观易懂。
缺点：颜色种类有限，无法表示复杂颜色，实际开发中很少使用。
示例代码：

css 复制代码

div {
    background-color: red;
}

2. RGB 表示法

通过 rgb(红, 绿, 蓝) 定义颜色，三个参数的取值范围均为 0-255（0 表示无该颜色，255 表示该颜色最强）。

使用技巧：可以通过系统截图工具的取色器获取目标颜色的 RGB 值，直接复制使用。
示例代码：

css 复制代码

p {
    /* 纯红色：红255，绿0，蓝0 */
    background-color: rgb(255, 0, 0);
}

3. RGBA 表示法

在 RGB 的基础上增加了 透明度参数 alpha ，语法为 rgba(红, 绿, 蓝, alpha)。

alpha 取值范围：0-1，0 表示完全透明，1 表示完全不透明，0.5 表示半透明。
示例代码：

css 复制代码

h1 {
    /* 半透明蓝色 */
    color: rgba(0, 0, 255, 0.5);
}

4. 十六进制 RGB 表示法

这是开发中最常用的颜色表示方式，语法为 #RRGGBB，原理和 RGB 一致，只是将 0-255 的十进制数转换为 00-FF 的十六进制数。

简化规则 ：如果颜色值的每两位都相同，可以简写为 3 位。例如 #ff0000 可简写为 #f00。
常用简写颜色 ：#f00（红）、#00f（蓝）、#0f0（绿）、#ccc（浅灰）、#333（深灰）、#000（黑）、#fff（白）。
示例代码：

css 复制代码

span {
    /* 简写的纯绿色 */
    color: #0f0;
}

5. HSL/HSLA 表示法

HSL：语法为 hsl(色相, 饱和度, 明度)，色相取值 0-360，饱和度和明度取值 0%-100%。
HSLA：在 HSL 基础上增加透明度参数，语法为 hsla(色相, 饱和度, 明度, alpha)。
适用场景：适合需要精细调整颜色明暗、饱和度的场景。

三、CSS 字体样式

字体样式是页面排版的核心，常用属性包括 color、font-size、font-family，还可以通过 @font-face 引入自定义字体。

1. 核心字体属性

属性	作用	取值说明
`color`	设置字体颜色	支持所有 CSS 颜色表示方式
`font-size`	设置字体大小	支持 `px`、`em`、`rem` 等单位，默认继承父元素
`font-family`	设置字体类型	可以指定具体字体名（如 `Microsoft YaHei`）或字体大类

2. 字体五大分类

CSS 将字体分为 5 个大类，当指定具体字体不存在时，浏览器会自动选择大类中的字体兜底，通常作为 font-family 的最后一个值。

serif：衬线字体（如 Times New Roman），笔画末端有装饰性线条。
sans-serif：非衬线字体（如 Arial、微软雅黑），笔画简洁，适合屏幕显示。
monospace：等宽字体，每个字符宽度相同，常用于代码展示。
cursive：草书字体，模拟手写效果。
fantasy：虚幻字体，装饰性强，适合标题。

示例代码：

css 复制代码

p {
    /* 优先使用微软雅黑，无则使用非衬线字体兜底 */
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 16px;
    color: #333;
}

3. 引入自定义字体：@font-face

当系统默认字体无法满足需求时，可以通过 @font-face 引入自定义字体文件（如 ttf、woff 格式），步骤如下：

定义自定义字体 ：通过 @font-face 指定字体名和字体文件路径。
使用自定义字体 ：在 font-family 中引用定义的字体名。

示例代码：

css 复制代码

/* 定义自定义字体 */
@font-face {
    /* 自定义字体名 */
    font-family: "MyCustomFont";
    /* 字体文件路径（可从字体天下等网站下载） */
    src: url("./fonts/MyCustomFont.ttf") format("truetype");
}

/* 使用自定义字体 */
h2 {
    font-family: "MyCustomFont", serif;
}

四、自加技巧

快速生成测试文本 ：在 VS Code 中输入 lorem + 数字（如 lorem5），可快速生成指定数量的英文测试单词。
取色器使用 ：Windows 按 Win + Shift + S 打开截图工具，移动鼠标即可查看目标颜色的 RGB / 十六进制值。

总结

本文详细讲解了 CSS 长度单位、颜色表示和字体样式三大核心基础，这些知识点是前端页面样式设计的基石。掌握相对单位的灵活运用、颜色的精准表示和字体的合理排版，能够帮助我们开发出更美观、更适配的页面。