QSS 样式设定

QSS 是 PyQt5 里用来设定元件样式的样式表 ( Qt Style Sheet )，使用方法和网页 CSS 非常类似，虽然 QSS 没有办法像网页 CSS 般的完整，但已经可以满足大部分的样式设计需求，这篇教学会介绍如何使用 QSS 设定元件样式。

快速导览：

• 开始使用 QSS
• 常用样式设定
• 伪状态设定
• 子控件设定

• PyQt6 版本参考：PyQt6 教学 - QSS ( Qt Style Sheet ) 样式设定
• 因为 Google Colab 不支援 PyQt5，所以请使用本机环境 ( 参考：使用 Python 虚拟环境 ) 或使用 Anaconda Jupyter 进行实作 ( 参考：使用 Anaconda )。

开始使用 QSS

在 PyQt5 里建立元件之后，元件会具有一个 setStyleSheet() 方法，在方法里撰写样式，就会修改原本元件的样式，例如下方的程序码执行后，就会将 QLabel 的文字设定为 30px 的大小和红色 ( 如果遇到多个样式，可以使用三个单引号的方式撰写 )。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

label = QtWidgets.QLabel(Form)
label.setGeometry(10,10,150,100)
label.setText('HELLO')
label.setStyleSheet('''
        font-size:30px;
        color:red;
    ''')

Form.show()
sys.exit(app.exec_())

常用样式设定

下方列出一些常用的样式 ( 完整属性参考“List of Properties”)。

样式里的 padding、margin、border-width、border-style、border-color 的简单设定规则如下 ( 以 padding 为例 )：

如果不要一次设定 padding、margin、border、border-width、border-style、border-color，也可以加上方向的名称单独设定 ( 以 padding 为例 )：

伪状态设定

除了设定主要样式，QSS 也像 CSS 一样可以设定“伪状态”( Pseudo-States )，伪类的意思是“触发了某些事件或进行某些行为后，才会出现的状态” ( 伪类会使用一个冒号开头 )，例如“鼠标移到按钮上”的行为，对应的伪状态就是“:hover”，下方列出一些常见的伪状态 ( 完整伪状态参考“List of Pseudo-States” )：

以下方的程序码为例，执行后会设定 QPushButton 的 :hover 样式 ( 注意需要额外使用 QPushButton:hover )，当鼠标移动到按钮上方时，按钮的边框会变粗，背景色会变成黄色。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

btn = QtWidgets.QPushButton(Form)
btn.setGeometry(10,10,150,100)
btn.setText('HELLO')
btn.setStyleSheet('''
    QPushButton{
        border:1px solid #000;
        background:#fff;
    }
    QPushButton:hover{
        border:5px solid #000;
        background:#ff0;
    }
''')

Form.show()
sys.exit(app.exec_())

子控件设定

在 PyQt5 里，有些元件可能会包含其他的子控件 ( 例如 QListWidget 列表选择框会包含选项的子元件 )，这些子元件也可以使用对应的 QSS 语法设定样式 ( 子控件会使用两个冒号开头 )，下方列出一些常见的子元件设定方法 ( 完整子元件设定参考“List of Sub-Controls” )：

下方的程序码执行后，会将 QSlider 数值调整滑杆更改为黑底线与红色调整杆。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

slider = QtWidgets.QSlider(Form)
slider.setGeometry(20,20,200,30)
slider.setOrientation(1)
slider.setStyleSheet('''
    QSlider {
        border-radius: 10px;
    }
    QSlider::groove:horizontal {
        height: 5px;
        background: #000;
    }
    QSlider::handle:horizontal{
        background: #f00;
        width: 16px;
        height: 16px;
        margin:-6px 0;
        border-radius:8px;
    }
    QSlider::sub-page:horizontal{
        background:#f90;
    }
''')

Form.show()
sys.exit(app.exec_())

注意事项

虽然使用 QSS 可以很方便的修改样式，但仍然有些小细节需要注意，例如 QPushButton，一旦设定了“边框”，则必须要一并设定背景色和点击样式，不然其他样式就会被清空，类似这种状况可以参考“Qt Style Sheets Reference”里有特别标注“粉红色背景”的说明。

下方的程序码执行后，会发现本来按钮的点击效果，因为设定了 border 样式而消失了。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

btn = QtWidgets.QPushButton(Form)
btn.setGeometry(10,10,150,100)
btn.setText('HELLO')
btn.setStyleSheet('border:1px solid #000')

Form.show()
sys.exit(app.exec_())

参考数据

完整 QSS 说明可以参考：Qt Style Sheets Reference

意见反馈