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)】
聯(lián)系客服