前言

最近想给程序做个换皮肤的功能，于是想起了用 QSS。QSS 这个东西也算是老古董了，博主刚工作那会就有接触过，但是没有深入去了解，趁着这一次机会来学习一下。网上翻阅了一些资料，结合 Qt 的官方文档，博主把 QSS 的相关知识点整理了一下，希望对大家有帮助，也方便自己后期回顾。

一. QSS 简介

QSS 全称为 Qt Style Sheets 也就是 Qt 样式表，它是 Qt 提供的一种用来自定义控件外观的机制。QSS 大量参考了 CSS 的内容，只不过 QSS 的功能要比 CSS 弱很多，体现在选择器要少，可以使用的 QSS 属性也要少很多，并且并不是所有的属性都可以用在 Qt 的所有控件上。

二. QSS 语法高亮

通过 “工具” -> “选项” 进入设置，通过 “text/css” 快速定位，然后在详情中添加 “*.qss” 即可实现 QSS 文件语法高亮，注意分隔符用 ‘;’

三. 如何在 Qt 程序中加载 QSS

void MainWindow::changeStyle(QString fileName)
{
    QString path = ":/qss/"+ fileName;
    QFile file(path);

    if ( file.open(QFile::ReadOnly) )
    {
        QString qss = QLatin1String(file.readAll());
        this->setStyleSheet(qss);
        file.close();
    }
}

四. QSS 语法解析

这里先献上 Qt 的 QSS 官方文档 和 QSS 官方示例，方便大家查阅对比。

1. 基础语法
   selector { attribute : value };
   其中：
   selector 选择器：通常情况下为控件类名（如 QPushButton）；
   attribute 属性：待设置的样式表属性（如 background-color）；
   value 值：属性赋值（如 rgb(40, 85, 20);）；
   示例：QPushButton { color: red }

*注：Qt 样式表通常不区分大小写（即，color、Color、color 和 color 指的是同一属性）但是类名、对象名和 Qt 属性名，它们是区分大小写的；

1. 共享属性

QCheckBox, QComboBox, QSpinBox 
{
	color:rgb(255,0,0);
	background-color:rgb(255,255,255);
	font:bold;
}

这样就设置了所有作用范围内的 QCheckBox、QComboBox、QSpinBox 的前景色、背景色和字体；

1. 选择器（SELECTOR）
   Qt 样式表支持 CSS2 中定义的所有选择器，下表总结了最常用的选择器类型：

1. 伪状态（PSEUDO-STATES）
   用户在操作时，可以根据不同的交互状态展示不同的用户样式，界面能够识别用户操作，不需要代码控制即可响应不同状态下的样式；

示例程序为一个按钮在默认、悬浮、按下和禁用时的样式：

QPushButton {
    border: 1px solid #555;
    padding: 4px;
    min-width: 65px;
    min-height: 12px;
}

QPushButton:hover {
    background-color: #999;
}

QPushButton:pressed {
    background-color: #333;
    border-color: #555;
    color: #AAA;
}

QPushButton:disabled {
    color: #333333;
}

下表为 QSS 官方文档翻译过来的全部伪状态：

1. 子控件
   要设置复杂的 widget 样式，需要访问 widget 的子控件，如 QComboBox 的下拉按钮或 QSpinBox 的上下箭头。选择器可以包含子控件，从而可以将规则的应用限制到特定的 widget 子控件；

下表为 QSS 官方文档翻译过来的全部子控件：

五. 案例展示

1. 原始经典
   
2. 爆炎黑
   
3. 天空蓝
   
4. 亚麻橙
   
5. 工业灰
   
6. 森林绿
   
7. 梦幻紫
   
8. 冰川银