QSS #
如果你学习过Web网页开发，就会发现这个名词和 CSS 特别的相似。
没错，它的语法和用途和 CSS 特别的相似。
如果在 Designer界面最上层的 MainWindow 对象 styleSheet 属性指定如下的内容
QPushButton {
color: red ;
font-size:15px;
}
就会发现，所有的按钮上的文字都变成了红色的，并且字体变大了。
注意这个指定界面元素显示样式的语法，由 selector 和 declaration 组成。
花括号前面的部分，比如示例中的 QPushButton 称之为 selector。
selector 选择器 #
QSS selector语法几乎和 Web CSS 的 selector语法没有什么区别。
| Selector | 示例 | 说明 |
|---|---|---|
| Universal Selector | * |
星号匹配所有的界面元素 |
| Type Selector | QPushButton |
选择所有 QPushButton类型 （包括其子类） |
| Class Selector | .QPushButton |
选择所有 QPushButton类型 ，但是不包括其子类 |
| ID Selector | QPushButton#okButton |
选择所有 对象名为 okButton 的QPushButton类型 |
| Property Selector | QPushButton[flat="false"] |
选择所有 flat 属性值为 false 的 QPushButton类型。 |
| Descendant Selector | QDialog QPushButton |
选择所有 QDialog 内部 QPushButton类型 |
| Child Selector | QDialog > QPushButton |
选择所有 QDialog 直接子节点 QPushButton类型 |
Pseudo-States 伪状态 #
我们可以这样指定当鼠标移动到一个元素上方的时候，元素的显示样式
QPushButton:hover { color: red }
再比如，指定一个元素是disable状态的显示样式
QPushButton:disabled { color: red }
再比如，指定一个元素是鼠标悬浮，并且处于勾选（checked）状态的显示样式
QCheckBox:hover:checked { color: white }
样式属性 #
背景 #
可以指定某些元素的背景色，像这样
QTextEdit { background-color: yellow }
颜色可以使用红绿蓝数字，像这样
QTextEdit { background-color: #e7d8d8 }
也可以像这样指定背景图片
QTextEdit {
background-image: url(bk1.png);
}
边框 #
可以像这样指定边框 border:1px solid #1d649c;
其中1px 是边框宽度；solid 是边框线为实线， 也可以是 dashed(虚线) 和 dotted（点）
边框可以指定为无边框 border:none
字体、大小、颜色 #
可以这样指定元素的文字字体、大小、颜色
*{
font-family:微软雅黑;
font-size:15px;
color: #1d649c;
}
宽度、高度 #
可以这样指定元素的宽度、高度
QPushButton {
width:50px;
height:20px;
}
margin、padding #
可以这样指定元素的元素的 margin；padding同理。
QTextEdit {
margin:10px 11px 12px 13px
}
分别指定了元素的上右下左margin。
也可以使用 margin-top, margin-right, margin-bottom, margin-left 单独指定元素的上右下左的margin；padding同理。
QTextEdit {
margin:10px 50px;
padding:10px 50px;
}
通过代码设置QSS #
前面的示例都是在Qt Designer软件中设置样式
如果要在代码中创建元素，则可以通过对象的setStyleSheet方法进行设置
from PySide6.QtWidgets import QApplication, QMainWindow, QWidget,QHBoxLayout
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.resize(500,300)
topWidget = QWidget(self)
self.setCentralWidget(topWidget)
main_layout = QHBoxLayout(topWidget)
naviBar = QWidget(self)
naviBar.setFixedHeight(50)
main_layout.addWidget(naviBar)
# 注意，这里没有使用 selector 选择范围，
# 就表示选择的是调用 setStyleSheet的控件本身，
# 这里就是 naviBar，而不是其任何下级控件
naviBar.setStyleSheet('background: #3c8dbc; border:1px solid red')
app = QApplication()
mw = MainWindow()
mw.show()
app.exec()
可以通过 setObjectName 方法 给控件，设置一个id名称，然后这样。
from PySide6.QtWidgets import QApplication, QMainWindow, QWidget,QHBoxLayout,QLabel
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.resize(500,300)
topWidget = QWidget(self)
self.setCentralWidget(topWidget)
main_layout = QHBoxLayout(topWidget)
naviBar = QWidget(self)
naviBar.setFixedHeight(50)
main_layout.addWidget(naviBar)
naviBar.setObjectName('naviBar')
naviBar.setStyleSheet(
'''
#naviBar {
background: #3c8dbc; border:1px solid red; color:white
}
QLabel{
color:yellow
}
''')
layout = QHBoxLayout(naviBar)
layout.setContentsMargins(0,0,0,0)
layout.addWidget(QLabel('tttttttttt',parent=naviBar))
layout.addStretch()
app = QApplication()
mw = MainWindow()
mw.show()
app.exec()