QSS样式设置及语法规则

QSS（Qt Style Sheets）是Qt的一个功能强大的样式表语言。它类似于CSS（Cascading Style Sheets），可以用于定义和控制应用程序的外观和样式。QSS可以应用于Qt部件（Widgets）和绘制元素，以定制和美化用户界面。

使用QSS，开发人员可以轻松地更改应用程序的颜色、字体、大小、背景等视觉属性，以及控制各种部件的布局和样式。QSS还允许开发人员在状态或事件触发时改变部件的外观，以实现动态的交互效果。

QSS有以下特点：

1. 语法简单易学：QSS的语法与CSS类似，具有很高的学习曲线。
2. 高度可定制：开发人员可以根据自己的需求，通过QSS定制出独特的应用程序外观，以满足用户的个性化需求。
3. 跨平台：QSS是Qt的一部分，因此可以在各种不同的平台上使用，并且在不同的Qt版本之间保持兼容。
4. 功能强大：通过QSS，可以实现丰富多样的样式效果，包括渐变、阴影、边框、圆角等。

总之，QSS是Qt开发人员的一个有用工具，可以通过定义和应用样式表，轻松地改变应用程序的外观和样式。它使开发人员能够创建出个性化的用户界面，提供更丰富、更吸引人的用户体验。

通过ui界面设置按钮样式

通过局内代码设置按钮样式

// 通过代码设置按钮悬停时的样式
ui->pushButton_2->setStyleSheet("QPushButton:hover {"
                                    "background-color: #ff55ff;"
                                "}");

通过QSS文件设置

1、添加资源文件

1、打开Qt Creator，并打开你的项目。
2、在项目树中，右击项目文件夹或者需要添加资源文件的子文件夹，选择"Add New"
或者"Add Existing Files..."。
3、在对话框中，选择"Qt" -> "Qt Resource File"，然后点击"Choose"按钮。
4、弹出的对话框中，输入资源文件的名称，例如"resources"，点击"Next"按钮。
5、在下一个对话框中，点击"Finish"按钮。
6、添加资源文件后，会在项目文件夹中生成一个新的.qrc文件。双击打开该文件，可以看到
Qt Creator的资源编辑器界面。
7、在资源编辑器中，可以通过拖放方式将需要添加的文件添加到资源文件中。也可以使用右击菜单
选择"Add Files"或"Add Directory"命令来添加文件或目录。
8、添加完所有需要的资源文件后，保存资源文件。
9、在代码中使用资源文件中的资源时，可以使用路径形式来访问，例如
使用:/resources/image.png来访问资源文件中的图片。
10、最后，重新构建并运行项目，资源文件会被自动编译和链接到生成的可执行文件中。

2、创建一个.qss文件，内容如下：

/* 设置窗口背景颜色和字体样式 */
QWidget {
	// 背景色为绿色
    background-color: #53c23c;
    font-family: Arial;
}

/* 鼠标悬停时按钮的样式 */
// 名称为pushButton的按钮的样式
QPushButton#pushButton:hover {
	// 蓝色
    background-color: #6b6bdd;
    border-color: #0056b3;
}

/* 按钮按下时的样式 */
// 名称为pushButton的按钮的样式
QPushButton#pushButton:pressed {
	// 黑色
    background-color: #000000;
    border-color: #002d5c;
}

/* 设置标签的颜色和字体样式 */
QLabel {
    color: #333;
    font-size: 16px;
}

3、将qss文件导入项目后

添加资源文件后的目录结构为

使用时的路径访问为

":/Style.qss"

4、代码中使用QSS文件

	QFile qssFile(":/C:\\Users\\zh'n\\Desktop/Style.qss");
    qssFile.open(QFile::ReadOnly | QFile::Text);
    QString qss = qssFile.readAll();

		// 给ui界面中名称为pushButton设置样式
    ui->pushButton->setStyleSheet(qss);
    // 设置整个widget的样式
    setStyleSheet(qss);
		
		// 通过代码的方式设置样式，不是通过qss文件
    ui->pushButton_2->setStyleSheet("QPushButton:hover {"
                                    "background-color: #ff55ff;"
                                "}");

    qssFile.close();