PyQt5最全95 窗口之QSS基础
CSS教程：https://www.w3school.com.cn/css/index.asp
详细请查看链接，不过读下面的一篇文章使用是完全没有问题了。
QSS概念
QSS的全程是Qt Style Sheets，顾名思义Qt样式表。Qt样式表是一种强大的机制，除了通过子类化QStyle已经可以实现的功能外，还允许您自定义窗口小部件的外观。 Qt样式表的概念，术语和语法受到HTML级联样式表（CSS）的启发，但适用于小部件世界。
样式表是文本规范，可以使用QApplication.setStyleSheet()在整个应用程序上设置，也可以使用QWidget.setStyleSheet()在特定的窗口小部件（及其子窗口）上设置。 如果在不同级别设置了多个样式表，Qt将从所有设置的样式表中获取有效样式表。 这称为级联。
例如，以下样式表指定所有QLineEdits都应使用黄色作为其背景颜色，并且所有QCheckBox都应使用红色作为文本颜色：
QLineEdit { background: yellow }
QCheckBox { color: red }
QSS语法
Qt样式表术语和句法规则几乎与HTML CSS相同，功能上要弱些。
CSS 规则集（rule-set）由选择器和声明块组成：
QSS颜色
用的最多的 RGB颜色格式
在 CSS 中，可以使用下面的公式将颜色指定为 RGB 值：
rgb(red, green, blue)
每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。
比如（255， 0， 0）显示红色，而（0， 255， 0）显示绿色，（0， 0， 0）则显示黑色。
QPushButton{background-color:rgb(100, 100, 100)}
当然可以使用black，yellow等颜色设置
QPushButton{background-color:red}
除此之外，也可以使用HEX颜色格式，利用十六进制值指定颜色；或者可以使用色相、饱和度和明度（HSL）来指定颜色
QPushButton{background-color:#ff0000}
QPushButton{background-color:hsl(0, 100%, 50%)}
QSS背景
background-color 属性指定元素的背景色。
btn1 = QPushButton(self)
btn1.setText('按钮1')
btn1.setStyleSheet('background-color: green')
btn2 = QPushButton(self)
btn2.setText('按钮2')
btn2.setStyleSheet('background-color: lightblue')
btn3 = QPushButton(self)
btn3.setText('按钮3')
btn3.setStyleSheet('background-color: yellow')
vbox = QVBoxLayout()
vbox.addWidget(btn1)
vbox.addWidget(btn2)
vbox.addWidget(btn3)
self.setLayout(vbox)
结果
QSS背景图像
background-image:属性指定用作元素背景的图像。
QPushButton {
background-image: url("bgdesert.jpg");
}
QSS边框
border 属性允许您指定元素边框的样式、宽度和颜色
（1）边框类型border-style 属性指定要显示的边框类型
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框
比如：
QLabel{border-style: dotted;}
或者：
QLabel{border:20px solid #014F84;}
QLabel{border:20px solid rgb(10, 10, 10);}
（2）边框宽度border-width 属性指定四个边框的宽度
可以将宽度设置为特定大小（以 px、pt、cm、em 计）
QPushButton{border-style: solid;
border-width: 5px;
border-width: 5px 20px; # 上边框和下边框为 5px，其他边为 20px
border-width: 25px 10px 4px 35px; # 上边框 25px，右边框 10px，下边框 4px，左边框 35px
label = QLabel('牛牛', self)
label.setStyleSheet("QLabel{background-color: black;border:20px solid #014F84;"
"border-style: solid;border-width: 5px;border-width: 5px 20px;" # 上边框和下边框为 5px，其他边为 20px
"border-width: 25px 10px 4px 35px;}") # 上边框 25px，右边框 10px，下边框 4px，左边框 35px
（3）圆角边框border-radius 属性用于向元素添加圆角边框
border-radius: 5px;
QSS文本
（1）文本颜色和背景色： background-color 属性和 color 属性
前边有
（2）文本对齐text-align属性用于设置文本的水平对齐方式
文本可以左对齐或右对齐，或居中对齐。分别对应left right center
text-align: center;
这个属性自测pyqt没有管用，有其他意见的小伙伴请指出
label.setAlignment(Qt.AlignRight)
但是这个可行。
（3）垂直对齐vertical-align 属性设置元素的垂直对齐方式
{
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
}
这个属性同样没用，但是可以这样用：加一个V代表垂直的vertical
label.setAlignment(Qt.AlignRight | Qt.AlignVCenter)
QSS字体
（1） 文本字体font-family 属性规定文本的字体。
衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
草书字体（Cursive）- 模仿了人类的笔迹。
幻想字体（Fantasy）- 是装饰性/俏皮的字体。
font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。
注释：如果字体名称不止一个单词，则必须用引号引起来，例如：“Times New Roman”。
{
font-family: "Times New Roman", Times, serif;
font-family: Arial, Helvetica, sans-serif;
font-family: "Lucida Console", "Courier New", monospace;
}
（2）斜体文本font-style 属性主要用于指定斜体文本。
此属性可设置三个值：
normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
label.setStyleSheet("QLabel{font-family: Times New Roman, Times, serif;"
"font-style: italic;}")
（3）字体大小font-size 属性设置文本的大小
label.setStyleSheet("QLabel{font-size: 40px;}")
QSS按钮
按钮有一系列的设置，这里粘一个我代码中的style吧
button_font = ("QPushButton {border-radius: 5px;padding: 15px;color: rgb(0, 0, 100);"
"font-size: 22px;background-color: rgb(220, 220, 220);color: rgb(10, 10, 10)}"
"QPushButton:hover {background-color: rgb(180, 180, 180);}"
"QPushButton:pressed {background-color: rgb(150, 150, 150);border: 2px solid rgb(130, 141, 199);"
"color: rgb(35, 35, 35);}")
最后，为了方便测试学习，附上文中完整代码。
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
import sys
class BasicQSS(QWidget):
"""
QSS基础
QSS(Qt Style Sheets)
Qt样式表
用于设置控件的样式
类似用于Web的CSS，功能类似
"""
def __init__(self):
super(BasicQSS, self).__init__()
self.resize(300, 600)
self.setWindowTitle('QSS样式')
btn1 = QPushButton(self)
btn1.setText('按钮1')
btn1.setStyleSheet('background-color: green')
btn2 = QPushButton(self)
btn2.setText('按钮2')
btn2.setStyleSheet('background-color: lightblue')
btn3 = QPushButton(self)
btn3.setText('按钮3')
label = QLabel('牛牛12', self)
label.setMinimumSize(200, 200)
label.setStyleSheet("QLabel{background-color: black;border:20px solid #014F84;"
"border-style: solid;border-width: 5px;border-width: 5px 20px;" # 上边框和下边框为 5px，其他边为 20px
"border-width: 25px 10px 4px 35px;" # 上边框 25px，右边框 10px，下边框 4px，左边框 35px
"color: red;"
"font-family: Times New Roman, Times, serif;"
"font-style: italic;"
"font-size: 40px;}")
label.setAlignment(Qt.AlignRight | Qt.AlignVCenter)
vbox = QVBoxLayout()
vbox.addWidget(btn1)
vbox.addWidget(btn2)
vbox.addWidget(btn3)
vbox.addWidget(label)
self.setLayout(vbox)
if __name__ == '__main__':
app = QApplication(sys.argv)
form = BasicQSS()
print(form.__doc__)
# 三个引号代表多行 一对大括号
# 选择器
qssStyle = '''
QPushButton{
background-color:hsl(0, 100%, 50%)
background-color:hsl(0, 100%, 50%)
background-color:hsl(0, 100%, 50%)
}'''
form.setStyleSheet(qssStyle)
form.show()
sys.exit(app.exec_())
结果
最后的最后，喜欢的点个赞吧！花了很长时间做出来的，希望能对你有用。以后有机会的话会更新一个完整的UI设计，点个赞吧~
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
