基础选择器与文字样式
选择器回答“样式应用给谁”。本节先掌握标签、类、ID 和通配选择器，再用字体、字号、行高和颜色建立管理后台的文字层级。根据结构、属性和状态选择元素放在下一节。
选择需要设置样式的元素
标签选择器
选择要格式化的元素，最常用的标准可能是元素的名称或类型。例如，可能要让所有的h1 元素以大字号、粗体显示，让所有的p元素以无衬线字体显示
下方是这张图的内联 HTML 示意，重点标出标签选择器 h1：
body {
color: #273142;
}
h1 {
font-size: 28px;
}
p {
line-height: 1.7;
}标签选择器会匹配页面中的同名元素，适合设置稳定的基础样式。不要为了修改一个局部段落而改变全站所有 p。
类选择器
类选择器使用 .（英文点号）进行标识，后面紧跟类名。
下方是这张图的内联 HTML 示意，点号和类名一起构成 .very 选择器：
HTML：
<h1 class="page-title">学员管理</h1>
<p class="status status-active">正常</p>
<p class="status status-disabled">已停用</p>CSS：
.page-title {
color: #17233d;
}
.status {
font-size: 14px;
font-weight: 600;
}
.status-active {
color: #16803c;
}
.status-disabled {
color: #b42318;
}类选择器以 . 开头，可以重复用于多个元素。一个元素也可以拥有多个类，类名之间用空格分隔。
课程项目大部分可复用样式使用类选择器。
课堂案例：
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span><style>
.blue {color: blue;font-size: 100px;}
.red {color: red;font-size: 100px;}
.orange {color: orange;font-size: 100px;}
.green {color: green;font-size: 100px;}
</style>ID 选择器
id 选择器使用 # 进行标识，后面紧跟 id 名
<section id="student-search">...</section>下方用内联 HTML 重现图中的 #gaudi 示例；后面的 #student-search 采用相同写法：
#student-search {
background-color: #ffffff;
}ID 选择器以 # 开头，同一页面中的 id 应保持唯一。ID 还用于表单标签、页内锚点和 JavaScript 定位，因此不建议把大量视觉样式绑定在 ID 上。
通配选择器
通配符选择器用 * 号表示，* 就是选择所有的标签他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
下方用内联 HTML 重现图中的 * { color: red; }；后面的 box-sizing 示例使用同一个选择器：
* {
box-sizing: border-box;
}* 匹配所有元素。它适合少量全局基础设置，不适合随意添加复杂规则。
常见的盒模型初始化写法：
*,
*::before,
*::after {
box-sizing: border-box;
}box-sizing 和伪元素会在后续章节讲解。
比较基础选择器
基础选择器我们一共学了 4 个，每个都有自己的价值，可能再某个地方都能用到。但是如果说，一定要找个最常用的，那么，肯定是类选择器。
| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如 p | 不能差异化选择 | 较多 | p { color：red;} |
| 类选择器 | 可以选出一个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| id 选择器 | 一次只能选择器一个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 不推荐使用 | * {color: red;} |
常见使用场景
| 需求 | 推荐选择器 |
|---|---|
| 所有页面使用相同正文颜色 | body |
| 多张统计卡片使用相同外观 | .stat-card |
| 正常状态使用绿色 | .status-active |
| 页面唯一的结构锚点 | id，样式仍优先使用类 |
类名描述角色或状态，例如 .search-form、.student-card、.is-active。避免 .red-text、.left-box 这类只描述当前外观的名称。
字体
字体族
body {
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}浏览器从左到右查找可用字体，最后的 sans-serif 是通用无衬线字体族。包含空格的字体名使用引号。
不要假设每台设备都安装同一种字体。
- 网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑
- 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体， 如果都没有，则以我们电脑默认的字体为准。
p {font-family: Arial,"Microsoft Yahei", "微软雅黑";}字号
font-size 属性用于设置字号
p {
font-size: 20px;
}单位：
- 可以使用相对长度单位，也可以使用绝对长度单位。
- 页面字号优先考虑
rem，局部组件可根据上下文使用em，边框等精细尺寸常使用px。
| 相对长度单位 | 说明 |
|---|---|
rem | 相对于根元素的字体尺寸，适合建立页面字号体系 |
em | 对 font-size 通常相对于父元素字号，对其他属性通常相对于当前元素字号 |
px | CSS 像素，适合边框和需要精确控制的局部尺寸 |
| 绝对长度单位 | 说明 |
|---|---|
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
注意：
- 浏览器通常以
16px作为根元素的默认字号，但用户可能会调整默认字号，因此不要把所有文字都锁死为像素值。 - 可以在根元素或组件上使用
rem建立可缩放的字号体系。 - 响应式标题可以使用
clamp()在最小值和最大值之间平滑变化：
.page-title {
font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
}字重
- 在 html 中如何将字体加粗我们可以用标签来实现
- 使用 b 和 strong 标签是文本加粗。
- 可以使用 CSS 来实现，但是 CSS 是没有语义的。
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100~900 | 400 等同于 normal，而 700 等同于 bold 我们重点记住这句话 |
提倡：
用数字来表示加粗和不加粗更加方便。
案例：
.page-title {
font-size: 28px;
font-weight: 700;
}
.field-label {
font-size: 14px;
font-weight: 600;
}
.help-text {
font-size: 13px;
font-weight: 400;
}字体风格
- 在
html中如何将字体倾斜我们可以用标签来实现- 字体倾斜除了用 i 和 em 标签，
- 可以使用 CSS 来实现，但是 CSS 是没有语义的
font-style 属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
| 属性 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 font-style: normal; |
| italic | 浏览器会显示斜体的字体样式。 |
小技巧：
平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。
文字外观
行高
body {
line-height: 1.6;
}无单位行高会随当前字号计算，适合正文继承。也可以使用固定长度：
.page-title {
font-size: 28px;
line-height: 40px;
}正文行高过小会拥挤，过大则会破坏段落联系。基础页面通常从 1.5 到 1.8 之间试验。
颜色
.page-title {
color: #17233d;
}
.panel {
background-color: rgb(255 255 255);
}
.overlay {
background-color: rgb(15 23 42 / 60%);
}常见颜色写法：
- 关键字：
white、transparent。 - 十六进制：
#17233d。 - RGB：
rgb(23 35 61)。 - 带透明度的 RGB：
rgb(23 35 61 / 60%)。
正文文字和背景应保持足够对比度，不要只依靠红绿颜色区分状态，还应保留“正常”“停用”等文字。
文字对齐与装饰
.page-title {
text-align: left;
}
.table-number {
text-align: right;
}
.nav-link {
color: inherit;
text-decoration: none;
}text-align控制行内内容在容器中的水平对齐。text-decoration控制下划线等装饰。
删除链接下划线后，应使用颜色、悬停或焦点样式继续表明它可以点击。
处理单行文字溢出
单行长文字常见组合：
.student-email {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}这三个属性需要配合，并且元素需要受到宽度约束。溢出会在后续章节正式讲解。
完成学员状态面板
目前卡片还没有间距、边框和排列，这是后面盒模型与布局章节的任务。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学员状态</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<main class="page">
<h1 class="page-title">学员状态</h1>
<p class="page-description">查看当前班级的学员状态。</p>
<section class="student-card">
<h2 class="student-name">张三</h2>
<p><span class="field-label">班级：</span>FastAPI Web 1 班</p>
<p><span class="field-label">邮箱：</span>zhangsan@example.com</p>
<p class="status status-active">正常</p>
</section>
<section class="student-card">
<h2 class="student-name">李四</h2>
<p><span class="field-label">班级：</span>FastAPI Web 1 班</p>
<p><span class="field-label">邮箱：</span>lisi@example.com</p>
<p class="status status-disabled">已停用</p>
</section>
</main>
</body>
</html>body {
background-color: #f4f7fb;
color: #273142;
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
font-size: 16px;
line-height: 1.6;
}
.page-title {
color: #17233d;
font-size: 28px;
line-height: 1.4;
}
.page-description {
color: #667085;
}
.student-card {
background-color: #ffffff;
}
.student-name {
color: #17233d;
font-size: 20px;
}
.field-label,
.status {
font-weight: 600;
}
.status-active {
color: #16803c;
}
.status-disabled {
color: #b42318;
}小结
- 元素选择器适合基础样式，类选择器适合可复用组件和状态。
- ID 应保持唯一，不建议大量绑定视觉样式。
- 字体、字号、字重、行高与颜色共同建立文字层级。
- 类名优先表达角色与状态，不只描述颜色或位置。
- 选择器负责选中元素，具体布局会在后续章节完成。