1.QSS简介

在PyQt5中，QSS（Qt Style Sheets）用于定义和修改应用程序中的外观样式的技术。类似于网页开发中的CSS（Cascading Style Sheets），QSS专门用于Qt应用的控件和窗口外观的样式化。

2.QSS基础概念

QSS 全称：Qt Style Sheets，类似于 CSS，用于控制 Qt 应用程序的界面样式。
作用范围：QSS 可以应用到整个应用程序、特定窗口或特定控件。
语法相似性：QSS 的语法与 CSS 非常相似，但比CSS要简单，属性可参考CSS。

3.QSS选择器类型

类选择器：按控件类名选择，例如QPushButton、QLabel。
ID选择器：通过控件的setObjectName方法设置控件的ID，label.setObjectName('mylabel')，例如#mylabel。
属性选择器：通过控件属性选择，如QPushButton['name'='mybutton']。
通配选择器：* 可以匹配所有控件，通常用于全局样式。

4.伪状态选择器

:hover：鼠标悬停在控件上。
:pressed：控件被点击时。
:checked：用于QCheckBox和QRadioButton，当控件被选中时。
:disabled：控件被禁用时。
:focus：控件获得焦点时。
:selected：在QListView或QComboBox等控件中被选中项的状态。

5.QSS 作用范围

全局应用：使用QApplication.setStyleSheet()方法将样式表应用到整个应用程序。
局部应用：可以将样式表应用于特定控件，使用setStyleSheet()方法针对某个控件。

6.QSS属性

QSS 中的常用属性大部分与 CSS 类似，但针对 Qt 控件有部分特定的属性：

背景色和前景色：

background-color：设置控件的背景颜色。
color：设置控件文本的颜色。

边框和圆角：

border：设置边框属性，如宽度、样式和颜色。
border-radius：设置边框的圆角效果。

字体：

font-size：设置字体大小。
font-family：设置字体系列。
font-weight：设置字体粗细。

内外边距：

margin：设置控件的外边距。
padding：设置控件的内边距。

大小：

min-width、min-height：设置控件的最小宽度和高度。
max-width、max-height：设置控件的最大宽度和高度。

7.QSS文件分离案例

QSS文件可以用来集中管理应用程序的样式，并且与代码分离，使得样式定义更加整洁和易于维护

import sys
from PyQt5.QtWidgets import QApplication, QPushButton, QWidget, QVBoxLayout, QLabel



class QSSLoad:
    # 加载外部qss样式文件
    @staticmethod
    def read_qss_file(qss_file):
        with open(qss_file, 'r', encoding='utf-8') as f:
            return f.read()


class QSSDemo(QWidget):
    def __init__(self):
        super().__init__()
        self.resize(600, 400)
        self.setWindowTitle('QSS演示')

        v_layout = QVBoxLayout(self)

        btn1 = QPushButton('btn1')
        btn2 = QPushButton('btn2')
        btn3 = QPushButton('btn3')

        label1 = QLabel('label-1')
        label1.setObjectName('label-1')

        v_layout.addWidget(btn1)
        v_layout.addWidget(btn2)
        v_layout.addWidget(btn3)
        v_layout.addWidget(label1)


if __name__ == '__main__':
    app = QApplication(sys.argv)

    w = QSSDemo()
    # 加载qss样式文件
    qs = QSSLoad.read_qss_file('QSSDemo.qss')
    # 应用qss
    w.setStyleSheet(qs)
    w.show()
    app.exec()

QSSDemo.qss

QPushButton{
    background-color: blue;
    color: white;
}

#label-1{
    color: red;
}

8.QSS内嵌样式案例

import sys
from PyQt5.QtWidgets import QApplication, QPushButton, QWidget, QVBoxLayout, QLabel


class QSSDemo(QWidget):
    def __init__(self):
        super().__init__()
        self.resize(600, 400)
        self.setWindowTitle('QSS演示')

        v_layout = QVBoxLayout(self)

        btn1 = QPushButton('btn1')
        # 针对控件直接编写样式
        btn1.setStyleSheet('QPushButton{color: white;background-color: blue;}')
        btn2 = QPushButton('btn2')
        btn3 = QPushButton('btn3')

        label1 = QLabel('label-1')
        label1.setObjectName('label-1')
        label1.setStyleSheet('#label-1{color: red}')

        v_layout.addWidget(btn1)
        v_layout.addWidget(btn2)
        v_layout.addWidget(btn3)
        v_layout.addWidget(label1)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = QSSDemo()
    w.show()
    app.exec()

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

14.1 PyQt5-QSS(Qt Style Sheets)