九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
QSS-pyqt樣式表

 

QSS即Qt StyleSheet(Qt樣式表)的簡(jiǎn)稱,是一種用來自定義控件外觀的強(qiáng)大機(jī)制,QSS可以讓我們的程序界面更加漂亮

每條QSS樣式都由兩部分組成:1. 選擇器,該部分指定要美化的控件  2. 聲明,該部分指定要在控件上使用的屬性

 

聲明:

 

 樣式:

import sys
from PyQt5.QtWidgets import QApplication, QWidget,QLabel,QPushButton

class BTN(QPushButton):
    pass

class Demo(QWidget):

    def __init__(self):
        super(Demo, self).__init__()
        self.resize(300,400)
        self.setWindowTitle('QSS學(xué)習(xí)')
        label=QLabel('測(cè)試文本',self)
        label.move(50,50)
        label.resize(100,100)

        self.setStyleSheet('QLabel{border-style:solid;border-width:16;border-color: red yellow blue green;}')  #設(shè)置樣式
        #樣式是個(gè)鍵值對(duì),用;隔開
        # background-color   設(shè)置背景色
        # color 前景色
        # font-size:20px  字體大小
        # font-family:黑體
        # border:3px solid red  邊框---上下左右可以分開設(shè)置
            # border---四條邊相同樣式
                    #border-style  四條線統(tǒng)一設(shè)置--上 右 下 左
                    #四條邊分開設(shè)置 border-top-style    border-right-style  border-bottom-style  border-left-style
            # 3px 邊框像素---寬度-單位:像素,也可以em,1em=16px
                #border-width 上 右 下 左  ----- 邊框?qū)挾?/span>
                #分開設(shè)置:border-top-width   border-right-width  border-bottom-width  border-left-width
            # solid 實(shí)線----邊框樣式   dotted 點(diǎn)狀邊框    none無邊框     dashed 虛線
                # double    雙線    groove 定義3D凹槽邊框。其效果取決于border-color的值
                # ridge 定義3D壟狀邊框。其效果取決于 border-color的值
                # inset 定義3D inset邊框。其效果取決于 border-color的值
                # outset 定義3D outset邊框。其效果取決于 border-color的值
        # red 紅色
            #統(tǒng)一設(shè)置 border-color 上 右 下 左
            #四條線分開設(shè)置 border-top-color  border-right-color  border-bottom-color  border-left-color
            #顏色 可以用rgb(2,2,2)   也可以  #00FF00
            #常用顏色 https://blog.csdn.net/zy_heu/article/details/78952173
        # width: 40px   設(shè)置寬度
        # height: 40px  設(shè)置高度
        # image:url(./大象.png)   添加圖片
        # margin    外邊距
        # padding   內(nèi)邊距
        # content  內(nèi)容矩形
        # 設(shè)置多個(gè)屬性用;隔開



if __name__ == '__main__':
    app = QApplication(sys.argv)
    demo = Demo()
    demo.show()
    sys.exit(app.exec_())

 

 漸變色:

 

線性漸變:
qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 white, stop: 0.4 gray, stop:1 yellow)

 

x1:0, y1:0, x2:1, y2:0   決定方向
stop: 0.4 gray    定義位置的顏色   把整條線分層10分,0.4的位置是gray顏色

輻射漸變:

qradialgradient(cx:0.7, cy:0.7, radius:0.5, fx:0.5, fy:0.5, stop:0 red,  stop:1 blue)  

cx:0.7, cy:0.7  是圓心位置

radius:0.5   是半徑

 fx:0.5, fy:0.5  光源位置

stop:0 red     位置的顏色

角度漸變:

qconicalgradient(cx:0.5, cy:0.5, angle:90, stop:0 red, stop:1 blue)   

cx:0.5, cy:0.5     圓心位置

angle:90     起始角度

stop:0 red    位置顏色

 

 

邊框圓角 :

 四個(gè)邊框統(tǒng)一設(shè)置:---四個(gè)角相同

border-radius:20px         圓角半徑  單位 像素

四個(gè)邊框分別設(shè)置:

 border-top-left-radius:20px

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

 

邊框圖片:

border-image:url(./邊框圖片.png) 30 30 30 30 stretch;border-width:30

 

四個(gè)角不會(huì)變 

30 30 30 30   裁剪值    上右下左

中間塊的處理方式:stretch  拉伸     round  平鋪      repeat 重復(fù)

border-width:30    邊框?qū)挾?---必須有

 

 

外邊距: 

統(tǒng)一設(shè)置   margin  上 右 下 左

分開設(shè)置:margin-top       margin-right        margin-bottom        margin-left  

常用取值    16px   1em

resize調(diào)整的是包含外邊距的尺寸 

 

內(nèi)邊距:

統(tǒng)一設(shè)置   padding  上 右 下 左

分開設(shè)置    padding-top      padding-right      padding-bottom       padding-left

常用取值   16px    1em

 

 

背景:

background-color:yellow       背景顏色

background-color:rgb(255,0,0)  

background-color:#FF0000

常用顏色 https://blog.csdn.net/zy_heu/article/details/78952173

 

background-image:url(./大象.png);background-repeat:no-repeat       背景圖片

背景圖片的處理方式:background-repeat:no-repeat     不重復(fù)  

background-repeat:repeat-x     x方向重復(fù)

background-repeat:repeat-xy     xy方向重復(fù)

background-position:right top     圖片位置

top    left     right     bottom  

 background-origin:content      參照位置---圖片貼著誰

padding   默認(rèn)

content

border

margin

 background-clip:padding     背景裁剪---在指定范圍外的都裁剪掉

padding   默認(rèn)

content   

border

background-attachment :scroll       背景圖像是否跟隨滾動(dòng)

scroll       跟隨滾動(dòng)

fixed       不跟隨滾動(dòng)

 

字體: 

分開設(shè)置:

font-family:隸書         設(shè)置字體

font-size:32px           字體大小   單位 16px=1em

font-style:italic     字體樣式:

normal    默認(rèn)值.顯示一個(gè)標(biāo)準(zhǔn)的字體樣式

italic   顯示一個(gè)斜體的字體樣式

oblique   顯示一個(gè)傾斜的字體樣式

font-weight:normal       字體重量

normal      默認(rèn)值。定義標(biāo)準(zhǔn)的字符

bold         定義粗體字符

bolder     定義更粗的字符

lighter     定義更細(xì)的字符

100

200

300

400

500

600

700

800

900

400 等同于 normal,而 700 等同于 bold

color:red      前景色

 

最小最大尺寸:

min-width
min-height
max-width
max-height

 

 

復(fù)合控件的子控件:

QSpinBox::up-button{Subcontrol-Position:left top}

選擇器   QSpinBox::up-button    子控件向上按鈕

Subcontrol-Position:left top     子控件位置

 

Subcontrol-Origin:border     子控件相對(duì)父控件的參照位置

bottom:10px     移動(dòng)10像素

bottom    向底部移動(dòng)

top

left

right

position: relative;      相對(duì)位置移動(dòng)

position: absolute;    絕對(duì)位置移動(dòng)

 

 

三方庫樣式表 :---qdarkgraystyle

安裝:文件--->設(shè)置--->

--->輸入 qdarkgraystyle---->

--->安裝成功顯示

 

 

 

我的報(bào)錯(cuò)   不知為何???

 

 

 

 

 

 

 

 

選擇器: 

 

import sys
from PyQt5.QtWidgets import QApplication, QWidget,QVBoxLayout,QLabel,QPushButton,QCheckBox

class BTN(QPushButton):
    pass

class Demo(QWidget):

    def __init__(self):
        super(Demo, self).__init__()
        self.resize(300,400)
        self.setWindowTitle('QSS學(xué)習(xí)')
        self.setup_ui()

    def setup_ui(self):
        box1=QWidget(self)
        box1.setObjectName('box1')
        box3=QWidget(box1)
        box3.setStyleSheet('.QWidget{background-color:yellow}')
        box2 = QWidget(self)

        #box1.setStyleSheet('color: red')  #設(shè)置樣式
        #注意:包括控件本身和所有子控件
        #color 前景色
        
        bl = QVBoxLayout()
        self.setLayout(bl)

        bl.addWidget(box1)
        bl.addWidget(box2)
        label1 = QLabel('標(biāo)簽1', box1)
        label1.setObjectName('lm')  # 設(shè)置ObjectName
        label1.setProperty('notice_level','error')  #給控件設(shè)置自定義屬性和屬性值
        label1.move(50, 50)
        btn1 = QPushButton('按鈕1', box1)
        btn1.move(150, 50)
        btn=BTN('按鈕',box1)
        btn.move(150,100)
        label11 = QLabel('標(biāo)簽11', box3)



        label2 = QLabel('標(biāo)簽2', box2)
        label2.move(50, 50)
        btn2 = QPushButton('按鈕2', box2)
        btn2.move(150, 50)
        btn2.setObjectName('lm')
        label2.setProperty('notice_level', 'warning')  # 給控件設(shè)置自定義屬性和屬性值

        #選擇器:---指明樣式對(duì)什么控件使用

        #通配符選擇器--匹配所有控件
        #box1.setStyleSheet('* {background-color: yellow;}')
        #* 表示所有控件

        #類型選擇器---通過控件類型來匹配控件
        #self.setStyleSheet('.QPushButton{background-color: yellow}')
        #QPushButton  表示匹配QPushButton類控件及其子類控件
        #.QPushButton  表示匹配QPushButton類控件---不包括子類控件

        #ID選擇器:----通過ObjectName屬性進(jìn)行選擇--使用#
        #self.setStyleSheet('#lm{background-color: yellow}')
        #ObjectName屬性為lm的控件

        #self.setStyleSheet('QPushButton#lm{background-color: yellow}')
        #在QPushButton類控件當(dāng)中ObjectName屬性為lm的控件

        #屬性選擇器:--根據(jù)setProperty自定義屬性和屬性值進(jìn)行選擇--使用[]
        #self.setStyleSheet('.QLabel[notice_level]{background-color: blue}.QLabel[notice_level="error"]{border:3px solid red} .QLabel[notice_level="warning"]{border:3px solid yellow}')
        #[notice_level]  具有notice_level屬性
        #[notice_level="error"]   notice_level屬性值是error的

        #包含選擇器:---用空格
        #self.setStyleSheet('QWidget#box1 QLabel {background-color: blue}')
        #QWidget#box1中包含的QLabel類控件及其所有子控件--直接包含 間接包含都行

        #直接包含選擇器---- 用 >
        #self.setStyleSheet('QWidget#box1 >QLabel {background-color: blue}')
        # QWidget#box1中包含的QLabel類控件及其子控件--只能直接包含不包括間接包含

        #子控件選擇器:---復(fù)合控件中的控件--用::
        cb1=QCheckBox('物理',box2)
        cb1.move(50,100)
        #self.setStyleSheet('QCheckBox::indicator {image:url(./大象.png);width:40px;height:40px;}')
        #::indicator  表示復(fù)選框中的指示器--勾選框
        #QCheckBox  QRadioButton  都有indicator控件
        #QComboBox  有drop-down控件
        #QSpinBox,QDateEdit,QDateTimeEdit,QTimeEdit  有up-button   down-button  up-arrow  down-arrow控件
        #其它看  https://www.cnblogs.com/liming19680104/p/11146956.html

        #self.setStyleSheet('#lm,#box1{background-color: blue}')
        # 上面選擇器分類可以組合使用, 使用逗號(hào)隔開即可


        #偽狀態(tài):---在什么狀態(tài)下使用樣式表---使用:
        #self.setStyleSheet('QPushButton#lm:hover{background-color: yellow}  QPushButton#lm:pressed{background-color: blue}')
        #:hover   鼠標(biāo)懸停在上面時(shí)
        #:pressed   控件被按下時(shí)
        #:checked   控件被選中
        #:unchecked   控件未被選中
        #:indeterminate   checkBox或者radioButton被部分選中(半選中)
        #:focus   控件獲取焦點(diǎn)
        #:disabled   控件失效
        #:enabled   控件有效
        #:on   控件處于on狀態(tài)---選擇按鈕開
        #:off   控件處于off狀態(tài)
        #這部分不寫時(shí)就是普通狀態(tài)時(shí)
        #注意:不同的控件可能有某種特定的偽狀態(tài), 無法通用, 具體查看官方文檔
        #! 可以否定  :!checked  沒有被選中時(shí)
        #可以多個(gè)連用  :hover:checked  鼠標(biāo)在上且被選中時(shí)

        #例子
        #self.setStyleSheet('QCheckBox::indicator{width:40;height:40} QCheckBox::indicator:checked{image:url(./對(duì)勾.png)} QCheckBox::indicator:unchecked{image:url(./圓圈.png)}')

if __name__ == '__main__':
    app = QApplication(sys.argv)
    demo = Demo()
    demo.show()
    sys.exit(app.exec_())

 

 

 

級(jí)聯(lián)和沖突:

兩個(gè)選擇器包含相同控件,而同一樣式設(shè)置了不同屬性時(shí),以特異性更強(qiáng)的為準(zhǔn);如果選擇器的特異性相同,取后者

【特異性:對(duì)選擇器和樣式來說,誰包含的屬性項(xiàng)多,誰的特異性就強(qiáng)】

 

 

 

 

 

 

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
淺談樣式表QSS的應(yīng)用
[轉(zhuǎn)載] QT皮膚(QSS)編程
QT樣式表
QSS總結(jié)以及最近做的Qt項(xiàng)目
Qt之Tab鍵切換焦點(diǎn)順序
Qt 按鈕設(shè)置樣式表
更多類似文章 >>
生活服務(wù)
熱點(diǎn)新聞
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服