其他分享
首页 > 其他分享> > PyQt5最全95 窗口之QSS基础超细

PyQt5最全95 窗口之QSS基础超细

作者:互联网

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 - 定义隐藏边框

比如:

QPushButton{border-style: dotted;}

(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设计(行人检测和识系统设计),点个关注吧~

标签:QPushButton,color,超细,PyQt5,边框,QSS,background,border
来源: https://blog.csdn.net/m0_63993933/article/details/122072523