正心全栈编程

认识 CSS ​

HTML 已经能表达学员页面的内容和结构，但管理后台还需要清楚的颜色、间距、边框和布局。CSS 负责这些视觉表现，本节先通过同一张学员卡片观察它怎样改变页面。

观察 CSS 怎样改变页面 ​

准备同一份 HTML ​

html
<article class="student-card">
  <h2>张三</h2>
  <p>班级：FastAPI Web 1 班</p>
  <p class="student-status">状态：正常</p>
</article>

没有 CSS 时，浏览器使用默认样式。结构仍然正确，只是缺少项目需要的视觉层次。

加入下面的 CSS：

css
.student-card {
  max-width: 360px;
  padding: 24px;
  border: 1px solid #d9e1ec;
  border-radius: 12px;
  background-color: #ffffff;
}

.student-card h2 {
  margin-top: 0;
  color: #17233d;
}

.student-status {
  color: #16803c;
}

页面内容没有变化，但信息层级更容易识别。这就是 CSS 的核心职责：选择页面元素，并为它们声明样式。

写出第一条 CSS 规则 ​

css
.student-status {
  color: #16803c;
  font-weight: 600;
}
text
.student-status  -> 选择器：选择谁
color            -> 属性：修改哪一项样式
#16803c          -> 属性值：改成什么

一条规则可以包含多个声明，每个声明使用 属性: 值; 的格式。

理解 CSS 的职责 ​

区分 HTML、CSS 与 JavaScript ​

需求主要由谁负责
这是页面一级标题HTML h1
这是导航区域HTML nav
标题使用深色、较大字号CSS
卡片之间留出间距CSS
点击按钮后更新列表JavaScript
从接口读取学员数据后续 Web API

不要用多个 <br> 制造间距，也不要用表格搭建页面布局。HTML 表达含义，CSS 统一控制视觉。

明确本部分范围 ​

这一部分会覆盖管理后台最常用的样式能力：

  1. 颜色、字体、字号、行高和文字对齐。
  2. 宽高、内外边距、边框、圆角和盒子尺寸。
  3. 元素的显示方式、隐藏、溢出和背景。
  4. 角标、遮罩等局部定位。
  5. 使用 Flex 完成顶栏、侧栏和工具条等一维布局。
  6. 使用 Grid 完成统计卡片等二维布局。
  7. 使用设计令牌和少量媒体查询改善页面维护性与窄屏显示。

课程不追求记住所有 CSS 属性。重点是能读懂、能组合、能借助开发者工具排错。

初步认识层叠 ​

CSS 全称是 Cascading Style Sheets，中文常译为“层叠样式表”。“层叠”表示同一个元素可能同时匹配多条样式规则，浏览器会根据来源、重要性、选择器优先级和书写顺序决定最终结果。

css
p {
  color: #5b6472;
}

.student-status {
  color: #16803c;
}

状态段落同时匹配两条规则，最终显示绿色。具体判断方法会在复合选择器章节学习，现在先理解“一个元素可以受到多条规则共同影响”。

使用开发者工具观察样式 ​

在浏览器中打开页面，按 F12 或右键选择“检查”：

  1. 在 Elements（元素）面板选择 .student-card。
  2. 在 Styles（样式）面板查看匹配的 CSS 规则。
  3. 暂时取消某个声明前的复选框，观察页面变化。
  4. 修改颜色或间距，确认效果后再写回源码。
  5. 在 Computed（计算后样式）中查看最终生效值。

开发者工具里的临时修改在刷新后会消失，它适合试验和定位问题，不代替保存源码。

了解本部分学习路线 ​

text
CSS 作用
  ↓
引入方式与路径
  ↓
基础选择器与文字
  ↓
复合选择器、状态与层叠
  ↓
盒模型、显示模式与背景
  ↓
设计令牌与基础重置
  ↓
定位、Flex 与 Grid
  ↓
静态管理后台综合案例

最终案例只使用 HTML 和 CSS。JavaScript 交互会在后续部分加入。

完成第一张学员卡片 ​

先整体运行，不要求立即理解所有属性。后面会逐项拆开。

html
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学员卡片</title>
    <style>
        body {
            background-color: #f4f7fb;
            color: #273142;
            font-family: "Microsoft YaHei", sans-serif;
        }

        .student-card {
            max-width: 360px;
            margin: 40px auto;
            padding: 24px;
            border: 1px solid #d9e1ec;
            border-radius: 12px;
            background-color: #ffffff;
        }

        .student-card h1 {
            margin-top: 0;
            font-size: 24px;
        }

        .student-status {
            color: #16803c;
            font-weight: 600;
        }
    </style>
</head>
<body>
<article class="student-card">
    <h1>张三</h1>
    <p>班级：FastAPI Web 1 班</p>
    <p class="student-status">状态：正常</p>
</article>
</body>
</html>

小结 ​

  1. HTML 表达内容与结构，CSS 控制视觉与布局。
  2. CSS 规则由选择器和声明块构成。
  3. 一个元素可以匹配多条规则，最终结果由层叠规则决定。
  4. 开发者工具是观察和排查 CSS 的重要工具。
  5. 本部分最终完成纯 HTML/CSS 的静态管理后台。