# QSS 界面美化 —— 教学补充示例

> 对应方案书「C++方向 Day2」："基础 UI 控件、布局管理与 QSS 界面美化"。
> 仓库 `p03/` 的 wiki 抓取内容里没有 QSS 相关代码，本示例是手工补写的教学补充，
> **不属于** `tools/gen_part3.py` 的生成产物，重新生成 `p01`/`p03` 不会影响它。

## 概念

QSS（Qt Style Sheets）是 Qt 提供的类 CSS 样式语言，用来把"控件长什么样"和"控件
做什么"分离开：

- 类型选择器：`QPushButton { ... }` —— 命中所有该类型控件；
- ID 选择器：`QPushButton#okButton { ... }` —— 通过 `setObjectName()` 精确命中
  某一个控件；
- 伪状态：`:hover`、`:pressed`、`:disabled` 等 —— 不用手写事件处理就能做交互反馈；
- 既可以调用 `qApp->setStyleSheet(...)` 全局生效，也可以 `widget->setStyleSheet(...)`
  只作用于这个控件和它的子控件。

## 代码走读

见 [`qt_qss_styling.cpp`](qt_qss_styling.cpp)：

1. 三个控件（标题 `QLabel`、确定/取消两个 `QPushButton`）分别设置 `objectName`；
2. 整个窗口调一次 `setStyleSheet()`，用 ID 选择器分别美化每个控件，
   `okButton`/`cancelButton` 还各自定义了 `:hover`/`:pressed` 效果；
3. 不改变任何业务逻辑（没有新增信号槽），只改变外观——这正是 QSS 的定位：
   与逻辑正交。

## 验证方式

```bash
QT_QPA_PLATFORM=offscreen tools/run_qt.sh qt_qss_styling   # 离屏跑通，200ms 自动退出
tools/run_qt.sh qt_qss_styling                              # 有 X 环境可直接看窗口
```

## 练习方向（供任务卡引用）

- 把 `okButton`/`cancelButton` 换成类型选择器 `QPushButton { ... }` 一次性美化，
  对比 ID 选择器和类型选择器的适用场景差异；
- 给 `title` 加一个 `:hover` 伪状态（`QLabel` 默认不接收鼠标事件，需要先
  `setAttribute(Qt::WA_Hover)` 之类的前置条件——留给学员自己踩一次坑）。

## 参考

- 本仓库对照：[`p03/ch08/custom_widget.cpp`](../../../../p03/ch08/custom_widget.cpp)
  （展示了 `QHBoxLayout` 布局管理，可与本示例的样式部分组合练习）
- Qt 官方文档：*Qt Style Sheets Reference*（doc.qt.io，选读·需联网）