QSS-声明

1、QSS声明---边框--颜色设置:(可以统一设计、也可以分开设计)

border-color:red;

QSS-声明_第1张图片

2、边框---圆角:(一个控件的边框是一个矩形,将尖的直角换成一个比较缓的圆弧),只需要确定边框的圆角半径就可。

QSS-声明_第2张图片QSS-声明_第3张图片

 3、外边距:(默认情况下,外边距、边框等都为0)

QSS-声明_第4张图片

 注意:resize调整的整个控件的尺寸(包括内外边距、边框等),如果外边距变大,边框以内的尺寸会变小。

4、内边距:(padding,通过内边距调整内容的位置)

QSS-声明_第5张图片

# 设置文本颜色
color:orange;
border:10px soild red;
# 设置内边距
padding:20px;
padding-top:150px;

 5、背景属性:(分为背景和前景:在z轴存在的情况下,两者在z轴堆叠)

(图片原始的尺寸,并不能把控件填满,设置的属于背景图像)

QSS-声明_第6张图片

{
background-color:rgb(100, 200, 100);
background-image:url("./source/xxx.png");
# 设置不重复,也可以设置某一个方向重复
background-repeat:reapeat-xy;
background-repeat:no-reapeat;
}

控制背景图片的位置:假设当前图片的属性值是不重复,图片会直接显示在背景图片的左上角,想要将图像显示在不同位置:图片属于背景层,不会遮挡前景显示的内容

QSS-声明_第7张图片

{
# 组合右下角,图片属于背景层,不会遮挡前景显示的内容
background-position: right bottom
border:20px double red;
padding:20px
}

可以控制图片,将谁作为他的原始点(原来的默认值是padding):

# 将原始的位置设置为参照边框
background-origin:border;

QSS-声明_第8张图片

background-origin:content;

QSS-声明_第9张图片设置内容矩形。(设置图片的原始点在什么地方)

 裁剪策略:background-clip:padding(超过内边距之外的东西都被裁剪掉)

QSS-声明_第10张图片QSS-声明_第11张图片

 3、背景属性案例:

from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("案例的学习")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        # 窗口控件内部的所有按钮都设置为相同的背景和颜色
        self.setStyleSheet("""
            QPushButton {
                backgroun-image:url(../source/puke.png);
                border:20px double red;
                background-origin:content;
                background-clip:padding;
                padding-left:-50px;
                padding-top:-68px;   
            } 
        """)
        h_layout = QHBoxLayout(self)
        for i in range(0, 13):
            btn = QPushButton(self)
            # 按钮的尺寸改为只能显示一张牌
            btn.setFixedSize(86, 108)
            # 将按钮的背景设置为某一张扑克牌
            # 把背景图片的移动和padding关联起来
            # 展示多个扑克牌,需要计算参数
            btn.setStyleSheet("""
            QPushButton {
                padding-left:-%dpx;
                padding-top:-%dpx;   
            } 
            """%(i * 49, 0))
            h_layout.addWidget(btn)
    

if __name__ == "__main__":
    import sys
    app = QApplication(sys.argv)
    window = Window()
    window.resize(500, 500)
    window.show()

    sys.exit(app.exec_())

 4、字体和前景色:

QSS-声明_第12张图片

 修改字体以及颜色等属性:

 QSS-声明_第13张图片

 QSS-声明_第14张图片

 字体斜体、字体加粗等:

QSS-声明_第15张图片

 代码:(700等同于bold)

QSS-声明_第16张图片

 更改字体颜色:

QSS-声明_第17张图片

 最小以及最大尺寸的控制:

QSS-声明_第18张图片     QSS-声明_第19张图片

你可能感兴趣的:(QT学习,qt)