Qt之樣式表qss基礎(chǔ)知識(shí)
前言
????? ? 本文是作者學(xué)習(xí)Qt樣式表時(shí)搜集和總結(jié)的一些制作經(jīng)驗(yàn)，總覺得市面上很缺少關(guān)于Qt的樣式表教程，就此我打算編寫一個(gè)可以給大家作為參考的qss樣式表參考。
????????往后如果大家寫qt不知道樣式如何調(diào)整，希望我的文章可以給大家一些支持。
????????如果可以幫助大家，希望可以點(diǎn)贊關(guān)注支持我一下，你們的支持就是我的動(dòng)力?。?/span>
某些我也不會(huì)的我也標(biāo)注出來，日后如果有新發(fā)現(xiàn)，我會(huì)實(shí)時(shí)更新這個(gè)專欄
歡迎關(guān)注點(diǎn)贊支持
?PyQt5學(xué)習(xí)愛好群主群：732513891（已滿）
PyQt5學(xué)習(xí)愛好群二群：937759168（已滿）
PyQt5學(xué)習(xí)愛好群三群：757679170
簡(jiǎn)單介紹樣式表使用
通常我會(huì)使用Qt Designer來輔助我設(shè)計(jì)界面。其中右鍵點(diǎn)擊控件會(huì)出現(xiàn)改變樣式表。（如圖1）
在彈出的樣式表中，我們就可以對(duì)控件進(jìn)行編寫。（如圖2）
格式可以直接寫qss代碼，用分號(hào)分割。如果想指定某控件，那么需要把控件類的名稱寫上，用大括號(hào)包好，大括號(hào)里面同樣每行代碼需要用分號(hào)分割。用類名稱編寫會(huì)讓這個(gè)控件下的所有子控件都繼承這個(gè)樣式。使用時(shí)需要注意。
如果類名稱加了點(diǎn)，表示不包括子控件。
/*選擇器*/
QFrame{
color: rgb(255, 255, 255);
? background-color: rgb(255, 255, 255);
}
QWidget{
color: rgb(255, 255, 255);
? background-color: rgb(255, 255, 255);
}
.QFrame{
color: rgb(255, 255, 255);
? background-color: rgb(255, 255, 255);
}如果需要指定某控件來可以用#加上控件名稱來指定改變樣式，不會(huì)影響其他控件
使用*號(hào)可以匹配所有控件
/*id選擇器*/
#listWidget{
color: rgb(255, 255, 255);
background-color: rgb(255, 255, 255);
}
*{
color: rgb(255, 255, 255);
background-color: rgb(255, 255, 255);
}每一個(gè)控件都是由多個(gè)小控件合并出來的，比如日歷就是由多個(gè)控件組成（如圖3）
想要改變某一個(gè)部分的樣式，就需要單獨(dú)調(diào)取，比如中間日歷天數(shù)位置就需要這樣寫來改變樣式，?
QCalendarWidgetd代表中間日歷天數(shù)的背景布，QTableView代表上面的日期數(shù)字層，用空格分割即可
/*包含選擇器*/
QCalendarWidget QTableView
{
alternate-background-color: rgba(255, 255, 255,0);
font: 14pt "Hei";
}如果想在一個(gè)控件不同狀態(tài)下改變他的樣式，則需要用上選擇器，選擇器的使用方法是在控件類或名稱后面加上冒號(hào)連著狀態(tài)。
/*子控件選擇器*/
QAbstractItemView:disabled {
background-color: rgba(255, 255, 255,0);
? ?selection-color: white;
selection-background-color: rgba(193, 231, 255,0);
font-size:20px;
}
/*復(fù)合控件選擇器*/
QCheckBox::indicator {
?width:40px;
?height:40px;
}部分控件在不同狀態(tài)下可以來進(jìn)行樣式改變。
:hover ? 鼠標(biāo)懸停在上面時(shí)
:pressed ? 控件被按下時(shí)
:checked ? 控件被選中
:unchecked ? 控件未被選中
:indeterminate ? checkBox或者radioButton被部分選中(半選中)
:focus ? 控件獲取焦點(diǎn)
:disabled ? 控件失效
:enabled ? 控件有效
:on ? 控件處于on狀態(tài)
:off ? 控件處于off狀態(tài)
:! 可以否定 例：QPushbutton:!pressed{}
:hover:checked ? 鼠標(biāo)在上且被選中時(shí)
示例：QPushbutton:pressed{color:red;} ?當(dāng)鼠標(biāo)點(diǎn)擊按鈕時(shí)，按鈕變?yōu)榧t色? ? ????那么大致的語法使用我介紹完了，接下來直接給大家寄出車輪。望大家以后的日子不用重復(fù)造輪子～
基本樣式（多數(shù)控件通用）
background-color:red ? 設(shè)置背景色
color:red 設(shè)置文字顏色
font-size:10px ? 設(shè)置字體大小
width: 20px ? 設(shè)置寬度
height: 20px ? 設(shè)置高度
image:url(./image.png) ? 添加圖片
margin: 20px ? ? 外邊距
padding: 20px ? 內(nèi)邊距
content: 20px ? 內(nèi)容矩形
border:3px solid red 設(shè)置邊框（3px粗細(xì)，solid樣式，red顏色）
border-radius:8px ? ? ? ? 圓角（半徑，單位，像素）高級(jí)樣式
/* 這個(gè)參數(shù)可以設(shè)置上下左右，同時(shí)樣式可以分成多種。 */
border:10px; 可以添加上下左右（top/bottom/right/left/）
border-width:10px; 設(shè)置粗細(xì)
border-color:rgb(0,0,0); 設(shè)置顏色
border-radius:10px; 設(shè)置圓角
邊框參數(shù)設(shè)置
border-top 單獨(dú)設(shè)置邊框樣式
border-top-width 單獨(dú)設(shè)置邊框粗細(xì)
border-top-color 單獨(dú)設(shè)置邊框顏色
border-top-radius 單獨(dú)設(shè)置圓角幅度
border:3px solid red;
樣式參數(shù)設(shè)置
solid 實(shí)線邊框 ? dotted 點(diǎn)狀邊框 ? ?none 無邊框 ? dashed 虛線 double 雙線
groove 3D凹槽邊框 ridge 3D壟狀邊框 inset 上光源3D outset 下光源3D ?高級(jí)顏色
顏色參數(shù)設(shè)置
red/black/blue... ? 可以直接寫顏色
rgb(2,2,2) 可以寫rgb顏色數(shù)值
#00FF00 可以寫十六進(jìn)制顏色信息
高級(jí)顏色設(shè)置
線性漸變色：
/* x1:0, y1:0, x2:1, y2:0 ? 決定方向 */
/* stop: 0.4 gray ? ?定義位置的顏色 ? 把整條線分層10分，0.4的位置是gray顏色 */
qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 white, stop: 0.4 gray, stop:1 yellow)
輻射漸變：
/* cx:0.7, cy:0.7 ?是圓心位置
radius:0.5 ? 是半徑
fx:0.5, fy:0.5 ?光源位置
stop:0 red ? ? 位置的顏色 */
qradialgradient(cx:0.7, cy:0.7, radius:0.5, fx:0.5, fy:0.5, stop:0 red, ?stop:1 blue)
角度漸變：
/* cx:0.5, cy:0.5 ? ? 圓心位置
angle:90 ? ? 起始角度
stop:0 red ? ?位置顏色 */
qconicalgradient(cx:0.5, cy:0.5, angle:90, stop:0 red, stop:1 blue)
后續(xù)我會(huì)制作qss模版，需要的可以在群里等待。。。
歡迎關(guān)注點(diǎn)贊支持。
?PyQt5學(xué)習(xí)愛好群主群：732513891（已滿）
PyQt5學(xué)習(xí)愛好群二群：937759168（已滿）
PyQt5學(xué)習(xí)愛好群三群：757679170
歡迎進(jìn)入我主頁，學(xué)習(xí)交流Qt樣式制作
