樣式控制-QSS 樣式表

概念：

from PyQt5.Qt import * #剛開始學習可以這樣一下導入
import sys

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS的學習")
        self.resize(400,400)
        self.set_ui()


    def set_ui(self):
        box1 = QWidget(self)
        box2 = QWidget(self)

        box1.setStyleSheet("background-color:orange;")
        box2.setStyleSheet("background-color:cyan;")

        #box1
        label1 = QLabel("標簽1",box1)
        label1.move(50,50)
        btn1 = QPushButton("按鈕1",box1)
        btn1.move(100,100)

        #box2
        label2 = QLabel("標簽1",box2)
        label2.move(50,50)
        btn2 = QPushButton("按鈕1",box2)
        btn2.move(100,100)
        
        ###########################################################
        # 此時box1 和box2 中的控件 也默認跟隨它們設置的顏色
        ###########################################################

        v_layout = QVBoxLayout()
        self.setLayout(v_layout)

        v_layout.addWidget(box1)
        v_layout.addWidget(box2)



if __name__ == '__main__':
    app =QApplication(sys.argv)

    window = Window()
    window.show()

    sys.exit(app.exec_())

 

使用：

from PyQt5.Qt import * #剛開始學習可以這樣一下導入
import sys

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS的學習")
        self.resize(400,400)
        self.set_ui()


    def set_ui(self):
        box1 = QWidget(self)
        box2 = QWidget(self)

        # box1.setStyleSheet("background-color:orange;")
        # box2.setStyleSheet("background-color:cyan;")
        box1.setStyleSheet("QPushButton {background-color:orange;}")
        #給box1 加上選擇器  
        

        #box1
        label1 = QLabel("標簽1",box1)
        label1.move(50,50)
        btn1 = QPushButton("按鈕1",box1)
        btn1.move(100,100)

        #box2
        label2 = QLabel("標簽1",box2)
        label2.move(50,50)
        btn2 = QPushButton("按鈕1",box2)
        btn2.move(100,100)

        ###########################################################
        # 此時box1 和box2 中的控件 也默認跟隨它們設置的顏色
        ###########################################################

        v_layout = QVBoxLayout()
        self.setLayout(v_layout)

        v_layout.addWidget(box1)
        v_layout.addWidget(box2)



if __name__ == '__main__':
    app =QApplication(sys.argv)

    window = Window()
    window.show()

    sys.exit(app.exec_())

from PyQt5.Qt import * #剛開始學習可以這樣一下導入
import sys

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS的學習")
        self.resize(400,400)
        self.set_ui()


    def set_ui(self):
        box1 = QWidget(self)
        box2 = QWidget(self)

        # box1.setStyleSheet("background-color:orange;")
        # box2.setStyleSheet("background-color:cyan;")
        self.setStyleSheet("QPushButton {background-color:orange;}")
        #給self 加上選擇器


        #box1
        label1 = QLabel("標簽1",box1)
        label1.move(50,50)
        btn1 = QPushButton("按鈕1",box1)
        btn1.move(100,100)

        #box2
        label2 = QLabel("標簽1",box2)
        label2.move(50,50)
        btn2 = QPushButton("按鈕1",box2)
        btn2.move(100,100)



        v_layout = QVBoxLayout()
        self.setLayout(v_layout)

        v_layout.addWidget(box1)
        v_layout.addWidget(box2)



if __name__ == '__main__':
    app =QApplication(sys.argv)

    window = Window()
    window.show()

    sys.exit(app.exec_())

 

from PyQt5.Qt import * #剛開始學習可以這樣一下導入
import sys

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS的學習")
        self.resize(400,400)
        self.set_ui()
        self.other_btn = QPushButton("按鈕3")
        self.other_btn.show()

    def set_ui(self):
        box1 = QWidget(self)
        box2 = QWidget(self)

        # box1.setStyleSheet("background-color:orange;")
        # box2.setStyleSheet("background-color:cyan;")
        self.setStyleSheet("QPushButton {background-color:orange;}")
        #給self 加上選擇器


        #box1
        label1 = QLabel("標簽1",box1)
        label1.move(50,50)
        btn1 = QPushButton("按鈕1",box1)
        btn1.move(100,100)

        #box2
        label2 = QLabel("標簽1",box2)
        label2.move(50,50)
        btn2 = QPushButton("按鈕1",box2)
        btn2.move(100,100)



        v_layout = QVBoxLayout()
        self.setLayout(v_layout)

        v_layout.addWidget(box1)
        v_layout.addWidget(box2)



if __name__ == '__main__':
    app =QApplication(sys.argv)

    window = Window()
    window.show()

    sys.exit(app.exec_())

from PyQt5.Qt import * #剛開始學習可以這樣一下導入
import sys

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS的學習")
        self.resize(400,400)
        self.set_ui()
        self.other_btn = QPushButton("按鈕3")
        self.other_btn.show()

    def set_ui(self):
        box1 = QWidget(self)
        box2 = QWidget(self)

        # box1.setStyleSheet("background-color:orange;")
        # box2.setStyleSheet("background-color:cyan;")


        #box1
        label1 = QLabel("標簽1",box1)
        label1.move(50,50)
        btn1 = QPushButton("按鈕1",box1)
        btn1.move(100,100)

        #box2
        label2 = QLabel("標簽1",box2)
        label2.move(50,50)
        btn2 = QPushButton("按鈕1",box2)
        btn2.move(100,100)



        v_layout = QVBoxLayout()
        self.setLayout(v_layout)

        v_layout.addWidget(box1)
        v_layout.addWidget(box2)



if __name__ == '__main__':
    app =QApplication(sys.argv)

    app.setStyleSheet("QPushButton {background-color:orange;}")
    #給整個app 加顏色

    window = Window()
    window.show()

    sys.exit(app.exec_())

 

from PyQt5.Qt import * #剛開始學習可以這樣一下導入
import sys

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS的學習")
        self.resize(400,400)
        self.set_ui()
        self.other_btn = QPushButton("按鈕3")
        self.other_btn.show()

    def set_ui(self):
        box1 = QWidget(self)
        box2 = QWidget(self)

        # box1.setStyleSheet("background-color:orange;")
        # box2.setStyleSheet("background-color:cyan;")


        #box1
        label1 = QLabel("標簽1",box1)
        label1.move(50,50)
        btn1 = QPushButton("按鈕1",box1)
        btn1.move(100,100)

        #box2
        label2 = QLabel("標簽1",box2)
        label2.move(50,50)
        btn2 = QPushButton("按鈕1",box2)
        btn2.setObjectName("btn2")
        btn2.move(100,100)



        v_layout = QVBoxLayout()
        self.setLayout(v_layout)

        v_layout.addWidget(box1)
        v_layout.addWidget(box2)



if __name__ == '__main__':
    app =QApplication(sys.argv)

    app.setStyleSheet("QPushButton#btn2{background-color:orange;}")
    #給整個app 加顏色

    window = Window()
    window.show()

    sys.exit(app.exec_())

 

from PyQt5.Qt import * #剛開始學習可以這樣一下導入
import sys

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS的學習")
        self.resize(400,400)
        self.set_ui()
        self.other_btn = QPushButton("按鈕3")
        self.other_btn.show()

    def set_ui(self):
        box1 = QWidget(self)
        box2 = QWidget(self)

        # box1.setStyleSheet("background-color:orange;")
        # box2.setStyleSheet("background-color:cyan;")


        #box1
        label1 = QLabel("標簽1",box1)
        label1.move(50,50)
        btn1 = QPushButton("按鈕1",box1)
        btn1.move(100,100)

        #box2
        label2 = QLabel("標簽1",box2)
        label2.move(50,50)
        btn2 = QPushButton("按鈕1",box2)
        btn2.setObjectName("btn2")
        btn2.move(100,100)



        v_layout = QVBoxLayout()
        self.setLayout(v_layout)

        v_layout.addWidget(box1)
        v_layout.addWidget(box2)



if __name__ == '__main__':
    app =QApplication(sys.argv)

    app.setStyleSheet("QLabel {background-color:red;}  QPushButton#btn2{background-color:orange;}")
    #給整個app 加顏色

    window = Window()
    window.show()

    sys.exit(app.exec_())

 

如果，qss語句 太多，我們一般就將其寫入到qss 文件中了，

這里是分為了這三個文件！

#test.py
from PyQt5.Qt import * #剛開始學習可以這樣一下導入
import sys

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS的學習")
        self.resize(400,400)
        self.set_ui()
        self.other_btn = QPushButton("按鈕3")
        self.other_btn.show()

    def set_ui(self):
        box1 = QWidget(self)
        box2 = QWidget(self)

        #box1
        label1 = QLabel("標簽1",box1)
        label1.move(50,50)
        btn1 = QPushButton("按鈕1",box1)
        btn1.move(100,100)

        #box2
        label2 = QLabel("標簽1",box2)
        label2.move(50,50)
        btn2 = QPushButton("按鈕1",box2)
        btn2.setObjectName("btn2")
        btn2.move(100,100)

        v_layout = QVBoxLayout()
        self.setLayout(v_layout)

        v_layout.addWidget(box1)
        v_layout.addWidget(box2)

if __name__ == '__main__':
    from Tool import QSSTool
    app =QApplication(sys.argv)

    QSSTool.setQssToObj("test.qss",app)  # 設置樣式表

    window = Window()
    window.show()

    sys.exit(app.exec_())

class QSSTool:
    @staticmethod
    def setQssToObj(file_path,obj):
        with open(file_path,'r') as f:
            obj.setStyleSheet(f.read())

QLabel {
    background-color:red;
    border:6px dotted yellow;
}
QPushButton#btn2{
    background-color:orange;
}

 

QSS語法：

這主要是為了說明哪些控件 在哪些狀態 下 有哪些外觀！

QSS語法之選擇器：

通配符選擇器：

 

類型選擇器：

它是包含子類的。

類選擇器：

不包含子類：

 

ID選擇器：

它通過objectName  來匹配 

setObjectName（）來設置

 

屬性選擇器：

屬性通過setProperty() 來設置

不過我們一般不會 直接拿一個類作為選擇器，這樣以后再定義新的對象就不行了，

一般下面：

 

后代選擇器：

間接也可以！

 

子選擇器：

它是直接包含！

間接的不行

子控件選擇器：

主要針對  復合控件的！可以單獨控制每個

 

注意：

 

 

QSS語法之偽狀態：

常見偽狀態：

disable 和enable 是 控件是否能用

on off 是只有兩態 ，它和 checked 和 unchecked 差不多  。 

 

 

注意：

連用的時候是  and  的關系 。

如果想要用或者（or）的關系表示 偽裝態，直接用兩個選擇器即可。

 

QSS語法之聲明：

語法：{ }  括 ，里面的元素以 分號 分隔 ，和字典不太一樣（字典是以逗號分隔的）

基本聲明：

盒子模型：

 

 

 

 

邊框相關：

邊框的樣式：

 

 

邊框的寬度：

邊框除了樣式和寬度，還有顏色設置：

顏色補充：漸變顏色：

線性漸變：

輻射漸變：

 

 

角度漸變：

########################################################################################

下面看邊框圓角：

from PyQt5.Qt import * #剛開始學習可以這樣一下導入
import sys

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("撲克牌小案例的學習")
        self.resize(800,800)
        self.set_ui()
    def set_ui(self):
        spinBox = QSpinBox(self)

        spinBox.move(100,100)
        spinBox.resize(100,30)

        spinBox.setStyleSheet("""
        QSpinBox{
            border-radius:10px
        }
        """)

if __name__ == '__main__':
    app =QApplication(sys.argv)

    window = Window()
    window.show()

    sys.exit(app.exec_())

 

 

邊框圖片：

可以用它自定義邊框！注意要結合border-width 使用

 

########################################################################################

外邊距：

 

########################################################################################

內邊距：

########################################################################################

背景： （它是沿Z軸方向來分的，它只是背景）

 

位置參考：默認參考的是 內邊距 。

 

 

裁剪策略，如果圖片過大時采用的裁剪策略（整個背景的裁剪）。

############################背景的小案例####################################

from PyQt5.Qt import * #剛開始學習可以這樣一下導入
import sys

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("撲克牌小案例的學習")
        self.resize(800,800)
        self.set_ui()
    def set_ui(self):
        v_layout = QVBoxLayout()
        for j in range(4):
            h_layout = QHBoxLayout()
            for i in range(13):
                btn = QPushButton(self)
                btn.setFixedSize(65,80)    #45  60
                btn.setStyleSheet("""
                    QPushButton{
                        background-image:url(img/poker.png);
                        border:10px solid red;
                        background-origin:content;
                        padding-left:-%dpx;
                        padding-top:-%dpx;
                        }
                """%(3+i*44,5+j*60))
                h_layout.addWidget(btn)
            v_layout.addLayout(h_layout)
        self.setLayout(v_layout)

if __name__ == '__main__':
    app =QApplication(sys.argv)

    window = Window()
    window.show()

    sys.exit(app.exec_())

 

 

 

默認背景是跟着滾動的。

編輯框內一般要設置為 fixed  .

 

########################################################################################

字體：

此時字體的顏色可以用 color  來設置 ，它是 前景色   背景色為 background-color  

##################################################################################

 

文本：

 

########################################################################################

最大最小：

 

########################################################################################

Subcontrol:

子控件。

一般都是相對的。

from PyQt5.Qt import * #剛開始學習可以這樣一下導入
import sys

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("撲克牌小案例的學習")
        self.resize(800,800)
        self.set_ui()
    def set_ui(self):
        spinBox = QSpinBox(self)

        spinBox.move(100,100)
        spinBox.resize(200,150)

        spinBox.setStyleSheet("""
        QSpinBox{
            font-size :26px;
            color:orange;
            border:10px soild red;
            border-radius:10px;
            background-color:lightgray;
        }
        QSpinBox::up-button,QSpinBox::down-button{
            width:50px;
            height:50px;
        }
        QSpinBox::up-button{
            subcontrol-position:left center;
            image:url(img/up.png)
        }
        QSpinBox::up-button:hover{
            bottom:5px
        }
        QSpinBox::down-button{
            subcontrol-position:right center;
            image:url(img/down.png)
        }
        QSpinBox::down-button:hover{
            top:5px
        }

        """)





if __name__ == '__main__':
    app =QApplication(sys.argv)

    window = Window()
    window.show()

    sys.exit(app.exec_())

 

 

 

########################################################################################

額外了解：

 

########################################################################################

注意：

當沖突的時候：

看特異性：（指的更准確（更明確的指出哪個控件）的優先級高。（不是看先后，只是當優先級相同的時候看先后。））

 

 

 

第三方庫樣式表，常用控件效果：

 

總結：樣式控制qss 到此為止，下面是設計工具-QtDesigner   :https://www.cnblogs.com/zach0812/p/11405289.html