文章目录
- [1 -> QSS 概述](#1 -> QSS 概述)
- [2 -> QSS 基本语法结构](#2 -> QSS 基本语法结构)
-
- [2.1 -> 选择器（Selector）](#2.1 -> 选择器（Selector）)
- [2.2 -> 属性（Property）](#2.2 -> 属性（Property）)
- [2.3 -> 注释](#2.3 -> 注释)
- [3 -> QSS 样式设置方式](#3 -> QSS 样式设置方式)
-
- [3.1 -> 指定控件样式设置](#3.1 -> 指定控件样式设置)
- [3.2 -> 全局样式设置](#3.2 -> 全局样式设置)
- [3.3 -> 从文件加载样式表](#3.3 -> 从文件加载样式表)
- [3.4 -> 使用 Qt Designer 编辑样式](#3.4 -> 使用 Qt Designer 编辑样式)
- [4 -> 样式优先级与层叠性](#4 -> 样式优先级与层叠性)
-
- [4.1 -> 优先级规则](#4.1 -> 优先级规则)
- [4.2 -> 样式叠加](#4.2 -> 样式叠加)
- [5 -> 常用 QSS 属性简介](#5 -> 常用 QSS 属性简介)
-
- [5.1 -> 字体与文本](#5.1 -> 字体与文本)
- [5.2 -> 背景与边框](#5.2 -> 背景与边框)
- [5.3 -> 尺寸与间距](#5.3 -> 尺寸与间距)
- [5.4 -> 状态样式](#5.4 -> 状态样式)
- [6 -> 盒模型（Box Model）](#6 -> 盒模型（Box Model）)
- [7 -> 代码示例](#7 -> 代码示例)
- [8 -> 总结](#8 -> 总结)
1 -> QSS 概述
QSS（Qt Style Sheets）是 Qt 框架中用于界面美化的样式表语言，其设计灵感来源于网页开发中的 CSS（Cascading Style Sheets）。通过 QSS，开发者可以方便地对 Qt 应用程序中的控件进行视觉样式定制，包括但不限于颜色、字体、边框、背景、间距等属性，从而实现更加美观、统一的用户界面。
与 CSS 类似，QSS 采用声明式的语法结构，将样式描述与控件逻辑分离，大大提升了界面设计的灵活性和可维护性。虽然 QSS 在功能上不如 CSS 全面，但它足以满足大多数 Qt 应用程序的界面美化需求，且学习成本相对较低，即使没有 CSS 基础的学习者也能快速上手。
2 -> QSS 基本语法结构
QSS 的基本语法结构非常简单，遵循以下格式：
选择器 {
属性名: 属性值;
}2.1 -> 选择器（Selector）
选择器用于指定样式规则应用的对象，即"哪些控件会受到影响"。QSS 支持多种选择器类型，常见的有：
- 类型选择器 ：根据控件的类名进行匹配，例如
QPushButton会匹配所有QPushButton及其子类的实例。 - 类选择器 ：使用
.前缀，例如.QPushButton仅匹配QPushButton类，不包括其子类。 - ID 选择器 ：使用
#前缀，匹配控件的objectName，例如#btnSubmit。 - 后代选择器 ：用于选择某个控件的后代元素，例如
QDialog QPushButton会选择所有位于QDialog内部的QPushButton。 - 伪类选择器 ：根据控件的状态进行匹配，例如
:hover、:pressed、:checked等。
2.2 -> 属性（Property）
属性用于描述控件的具体样式，每个属性由一个属性名和一个属性值组成，中间用冒号分隔，并以分号结束。例如：
color: red;
font-size: 16px;
background-color: #f0f0f0;2.3 -> 注释
QSS 支持使用 /* */ 进行多行注释，例如：
/* 这是一个注释 */
QPushButton {
color: blue; /* 按钮文字颜色 */
}3 -> QSS 样式设置方式
QSS 样式可以通过以下几种方式应用于控件：
3.1 -> 指定控件样式设置
通过调用控件的 setStyleSheet() 方法，可以为单个控件设置样式。这种方式设置的样式仅对该控件及其子控件生效。
3.2 -> 全局样式设置
通过 QApplication::setStyleSheet() 方法，可以为整个应用程序设置全局样式。这种方式适用于统一多个控件的样式，提升代码复用性和可维护性。
3.3 -> 从文件加载样式表
将 QSS 样式内容保存在独立的 .qss 文件中，通过读取文件的方式加载样式。这种方式实现了样式与代码的分离，便于管理和更新。
3.4 -> 使用 Qt Designer 编辑样式
在 Qt Designer 中可以直接编辑控件的样式表，并实时预览效果。样式内容会保存在 .ui 文件中，与界面设计紧密结合。
4 -> 样式优先级与层叠性
QSS 继承了 CSS 的"层叠性"（Cascading）特性，即多个样式规则可以同时作用于同一个控件，并按照一定的优先级进行叠加。
4.1 -> 优先级规则
- 如果多个样式规则设置同一属性发生冲突，则优先级高的规则生效。
- 优先级顺序一般为：内联样式（指定控件样式） > ID 选择器 > 类选择器/伪类选择器 > 类型选择器 > 全局样式。
- 选择器描述越具体，优先级越高。
4.2 -> 样式叠加
如果多个样式规则设置不同的属性，则这些属性会叠加生效。例如，全局样式设置文字颜色，局部样式设置字体大小，则控件同时具有这两种样式。
5 -> 常用 QSS 属性简介
QSS 支持丰富的样式属性，以下是一些常用属性类别：
5.1 -> 字体与文本
font-family：字体类型font-size：字体大小color：文字颜色text-align：文本对齐方式
5.2 -> 背景与边框
background-color：背景颜色background-image：背景图片border：边框样式（可设置宽度、样式、颜色）border-radius：边框圆角
5.3 -> 尺寸与间距
width、height：控件尺寸padding：内边距margin：外边距
5.4 -> 状态样式
通过伪类选择器设置不同状态下的样式，如：
:hover：鼠标悬停:pressed：鼠标按下:checked：选中状态:disabled：禁用状态
6 -> 盒模型（Box Model）
QSS 中的控件样式通常基于"盒模型"进行设计。盒模型将控件划分为四个区域：
- 内容（Content）：显示控件实际内容（如文本、图标）的区域。
- 内边距（Padding）：内容与边框之间的空白区域。
- 边框（Border）：围绕内容和内边距的边界线。
- 外边距（Margin）：边框与控件外部其他元素之间的空白区域。
通过 padding、margin、border 等属性，可以灵活调整控件的布局与外观。
7 -> 代码示例
widget.h
cpp
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE
class Widget : public QWidget
{
Q_OBJECT
public:
Widget(QWidget *parent = nullptr);
~Widget();
private:
Ui::Widget *ui;
};
#endif // WIDGET_Hwidget.cpp
cpp
#include "widget.h"
#include "ui_widget.h"
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
//ui->pushButton->setStyleSheet("QPushButton { color:skyblue }");
this->setStyleSheet("QPushButton { color:skyblue }");
}
Widget::~Widget()
{
delete ui;
}
8 -> 总结
QSS 是 Qt 中强大的界面美化工具，它通过类似 CSS 的语法结构，让开发者能够以声明式的方式定义控件样式，大大提升了界面设计的效率与一致性。虽然 QSS 在功能上不及 CSS 全面，但对于大多数 Qt 应用程序而言，它已足够应对常见的样式定制需求。
掌握 QSS 的基本语法和常用属性，不仅能够实现更加美观的用户界面，还能增强代码的可读性和可维护性。在实际开发中，建议将样式与逻辑分离，优先使用外部样式表或全局样式，以便于统一管理和后期调整。
此外，QSS 的学习也是一个渐进的过程，初期只需掌握常用选择器和属性，随着项目的深入，再逐步了解伪类、子控件选择器、渐变、动画等高级特性。最终，结合良好的设计规范与用户体验思考，才能打造出既美观又实用的 Qt 应用程序界面。
提示：在实际开发中，若遇到样式不生效的情况，可从全局样式、局部样式、外部文件、UI 文件等多个角度进行排查，同时注意样式优先级与叠加规则的影响。
感谢各位大佬支持！！！
互三啦！！！