QSS-qt样式表

Posted liming19680104

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了QSS-qt样式表相关的知识,希望对你有一定的参考价值。

QSS即Qt StyleSheet(Qt样式表)的简称,是一种用来自定义控件外观的强大机制,QSS可以让我们的程序界面更加漂亮

每条QSS样式都由两部分组成:1. 选择器,该部分指定要美化的控件  2. 声明,该部分指定要在控件上使用的属性

 

 1 import sys
 2 from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QLabel, QLineEdit,  3     QComboBox, QStackedWidget, QGroupBox, QVBoxLayout
 4 
 5 class Demo(QWidget):
 6     def __init__(self):
 7         super(Demo, self).__init__()
 8         self.button1 = QPushButton(button1, self)
 9         self.button2 = QPushButton(button2, self)
10         self.button2.setProperty(‘name‘, ‘btn‘)  #给控件添加一个属性
11         #属性名:name
12         #属性值:‘btn‘
13 
14         self.lineedit1 = QLineEdit(self)
15         self.lineedit1.setPlaceholderText(direct)
16         self.lineedit2 = SubLineEdit()
17 
18         my_list = [A, B, C, D]
19         self.combo = QComboBox(self)
20         self.combo.addItems(my_list)
21         self.combo.setObjectName(‘cb‘) #将控件的objectName设置为cb
22 
23         self.gb = QGroupBox()
24         self.label1 = QLabel(label1)
25         self.label2 = QLabel(label2)
26         self.stack = QStackedWidget()
27         self.stack.addWidget(self.label2)
28 
29         self.gb_layout = QVBoxLayout()
30         self.gb_layout.addWidget(self.label1)  #分组框gb直接包含label1
31         self.gb_layout.addWidget(self.stack)   #分组框gb间接包含label2
32         self.gb.setLayout(self.gb_layout)
33 
34         self.v_layout = QVBoxLayout()
35         self.v_layout.addWidget(self.button1)
36         self.v_layout.addWidget(self.button2)
37         self.v_layout.addWidget(self.lineedit1)
38         self.v_layout.addWidget(self.lineedit2)
39         self.v_layout.addWidget(self.combo)
40         self.v_layout.addWidget(self.gb)
41         self.setLayout(self.v_layout)
42 
43 class SubLineEdit(QLineEdit):
44     def __init__(self):
45         super(SubLineEdit, self).__init__()
46         self.setPlaceholderText(indirect)
47 
48 if __name__ == __main__:
49     app = QApplication(sys.argv)
50     demo = Demo()
51     qss = ‘‘‘
52           * {color: red}
53           QPushButton {background-color: blue}
54           QPushButton[name=‘btn‘] {background-color: green}
55           .QLineEdit {font: bold 20px}
56           QComboBox#cb {color: blue}
57           QGroupBox QLabel {color: blue}  
58           QGroupBox > QLabel {font: 30px}
59           ‘‘‘
    #定义样式
60 demo.setStyleSheet(qss) #给demo对象设置样式 61 demo.show() 62 sys.exit(app.exec_())

 

 

 

 

选择器:

*                                                   匹配所有控件

QPushButton                               匹配所有QPushButton实例及其子类

QPushButton[name=‘btn‘]            匹配所有name属性为btn的QPushButton实例

QPushButton[name~=‘btn‘]        ~=匹配所有name属性中包含btn的QPushButton实例

.QPushButton                              匹配所有QPushButton实例,但不匹配其子类。等同于*[class~="QPushButton"]  

QComboBox#cb                        匹配所有objectName为cb的QComboBox实例

QGroupBox QLabel {color: blue}     把所有包含在QGroupBox中的QLabel控件的文本颜色设为蓝色(无论直接包含还是间接包含)

QGroupBox > QLabel {font: 30px}     把所有QGroupBox直接包含的QLabel文本字体大小设为30px

有些小伙伴可能就问了:* {color: red} 明明这条样式是让所有的文本颜色变为红色,但是有些控件的文本并没有根据这条来,为什么?

这里就涉及到一个“具体与笼统”的概念,当选择器写的越具体,选择器的优先程度越高。通配符*这一选择器写法非常笼统,而之后几条样式的选择器都是指定了控件名称的,比通配符更加具体,所以优先度更高

 

属性:

color: red                                 前景色
background-color: green        背景色
font: bold 20px                       字体

 

qss = ‘QPushButton {color: red}‘       单选择器单属性

qss =‘QPushButton {color: red; background-color: blue}‘    单选择器多属性

qss = ‘QPushButton, QLabel, QLineEdit {color: red}‘       多选择器

  qss = ‘QLabel{border:3px double #242424;}‘       设置边框及边框样式。

    #dotted    点状边框                double   定义双线。双线的宽度等于 border-width 的值

    #dashed        虚线           ridge    定义 3D 垄状边框。其效果取决于 border-color 的值

    #solid   实线                inset   定义 3D inset 边框。其效果取决于 border-color 的值

    #none   定义无边框              groove  3D凹槽边框。其效果取决于 border-color 的值

    #outset   定义 3D outset 边框。其效果取决于 border-color 的值

    #inherit   规定应该从父元素继承边框样式

qss = ‘QLabel{border:3px solid #242424;border-color:red}‘        设置边框、边框样式、边框颜色

 

 

 

 

 

子控件

了解下什么是子控件:我们知道QComboBox由一个矩形框和一个下拉按钮组成,而这个下拉按钮就是QComboBox的子控件了,PyQt5允许我们使用QSS对其进行样式化

 

 1 import sys
 2 from PyQt5.QtWidgets import QApplication, QComboBox,QWidget,QSpinBox
 3 
 4 class Demo(QWidget):
 5     def __init__(self):
 6         super(Demo, self).__init__()
 7         my_list = [A, B, C, D]
 8         self.cbox=QComboBox(self)
 9         self.cbox.addItems(my_list)
10         self.sp=QSpinBox(self)
11         self.sp.move(0,50)
12 
13 
14 if __name__ == __main__:
15     app = QApplication(sys.argv)
16     demo = Demo()
17     #qss = ‘QComboBox::drop-down {image: url(D:ssssssimages3.png)}‘
18     # 更换QComboBox子控件的下拉按钮图片
19 
20     qss=‘QSpinBox::up-button {image: url(D:/ss/ssss/images/up.png)}‘ 21         ‘QSpinBox::down-button {image: url(D:/ss/ssss/images/down.png)}‘
22     #更换QSpinBox子控件的上下按钮图片
23     demo.setStyleSheet(qss)
24     demo.show()
25     sys.exit(app.exec_())

 

qss = ‘QLabel{border:3px double #242424;}‘#设置边框、边框样式。
#dotted 点状边框 double 定义双线。双线的宽度等于 border-width 的值
#dashed 虚线 ridge 定义 3D 垄状边框。其效果取决于 border-color 的值
#solid 实线 inset 定义 3D inset 边框。其效果取决于 border-color 的值
#none 定义无边框 groove 3D凹槽边框。其效果取决于 border-color 的值
#outset 定义 3D outset 边框。其效果取决于 border-color 的值
#inherit 规定应该从父元素继承边框样式

qss = ‘QLabel{border:3px solid #242424;border-color:red}‘  # 设置边框、边框样式、边框颜色




伪状态

伪状态选择器可以让我们针对某控件的不同状态进行QSS样式化操作,下面我们以QPushButton和QComboBox为例:

 

 1 import sys
 2 from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QComboBox, QVBoxLayout
 3 
 4 class Demo(QWidget):
 5     def __init__(self):
 6         super(Demo, self).__init__()
 7         self.button1 = QPushButton(button1, self)
 8         self.button2 = QPushButton(button2, self)
 9         self.button2.setProperty(name, btn2)
10 
11         my_list = [A, B, C, D]
12         self.combo = QComboBox(self)
13         self.combo.addItems(my_list)
14 
15         self.v_layout = QVBoxLayout()
16         self.v_layout.addWidget(self.button1)
17         self.v_layout.addWidget(self.button2)
18         self.v_layout.addWidget(self.combo)
19         self.setLayout(self.v_layout)
20 
21 if __name__ == __main__:
22     app = QApplication(sys.argv)
23     demo = Demo()
24     qss = """
25           QPushButton:hover {background-color: red}                     
26           QPushButton[name=‘btn2‘]:pressed {background-color: blue}
27           QComboBox::drop-down:hover {background-color: green}
28           """
29     demo.setStyleSheet(qss)
30     demo.show()
31     sys.exit(app.exec_())

 

QPushButton:hover {background-color: red}    # 当鼠标悬停在QPushButton实例或其子类上时,将背景变为红色

QPushButton[name=‘btn2‘]:pressed {background-color: blue}     当鼠标在匹配的实例或其子类上按下时,将背景变为蓝色

QComboBox::drop-down:hover {background-color: green}    当鼠标在QComboBox实例或其子类的下拉按钮子控件上悬停时,将下拉按钮的背景色改为绿色

QPushButton:!hover {background-color: red}    当鼠标不悬停在QPushButton实例或其子类上时,背景颜色才会是红色

 


















以上是关于QSS-qt样式表的主要内容,如果未能解决你的问题,请参考以下文章

CSS代码片段

CSS代码片段

关于CSS的个人理解

javascript 即兼容性升级页面样式片段

html addthis分享片段和prelim样式

将数据从底部工作表对话框片段传递到片段