二、QSS加載方式
方式一：
1 myDialog->setStyleSheet("QLineEdit { background-color: yellow }"); 2 nameEdit->setStyleSheet("background-color: yellow");
方式二：
1 QFile file(":/qss/main.qss"); 2 file.open(QFile::ReadOnly); 3 QTextStream filetext(&file); 4 QString stylesheet = filetext.readAll(); 5 this->setStyleSheet(stylesheet); 6 file.close();
三、QSS選擇器類型
3.1 通配選擇器
*
匹配所有的控件
3.2 類型選擇器
QPushButton
匹配所有QPushButton和其子類的實例
QPushButton {background: gray;}
3.3 屬性選擇器
QPushButton[flat="false"]
匹配所有flat屬性是false的QPushButton實例，注意該屬性可以是自定義的屬性，不一定非要是類本身具有的屬性
QPushButton[level='dangerous'] { background: magenta; } /*openButton->setProperty("level", "dangerous");*/
3.4 類選擇器
.QPushButton
匹配所有QPushButton的實例，但是並不匹配其子類。這是與CSS中的類選擇器不一樣的地方，注意前面有一個點號
1 .RedButton { background: magenta; } 2
3 /*
4 openButton->setProperty("class", "RedButton"); 5 closeButton->setProperty("class", "RedButton"); 6 */
3.5 ID選擇器
#myButton
匹配所有id為myButton的控件實例，這里的id實際上就是objectName指定的值
#openButton, #closeButton { background: magenta; }
3.6 后代選擇器
QDialog QPushButton
所有QDialog容器中包含的QPushButton，不管是直接的還是間接的
1 QDialog {background: gray;} 2 /* 設置 QDialog中的 QPushButton 的 QSS */
3 QDialog QPushButton { 4 border: 2px solid magenta; 5 border-radius: 10px; 6 background: white; 7 padding: 2px 15px; 8 }
3.7 子選擇器
QFrame> QPushButton
所有QFrame容器下面的QPushButton，其中要求QPushButton的直接父容器是QFrame,注意和后代選擇器的區別
1 QFrame {background: gray;} 2 QFrame > QPushButton { 3 border: 2px solid magenta; 4 border-radius: 10px; 5 background: white; 6 padding: 2px 15px; 7 }
3.8 偽類選擇器
選擇器:狀態 作為選擇器，支持 ! 操作符，表示 非。
1 QPushButton:hover { color: white } 2 QCheckBox:checked { color: white } 3 QCheckBox:!checked { color: red }
所有的這些選擇器可以聯合使用，並且支持一次設置多個選擇器類型，用逗號隔開，這點與CSS一樣，例如：
#frameCut,#frameInterrupt,#frameJoin
表示所有這些id使用一個規則。
#mytable QPushButton
表示選擇所有id為mytable的容器下面的QPushButton實例
四、QSS常用屬性
4.1 字體
大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到，只要用數值就可以，單位：PX、PD
樣式 {font-style: oblique;}(偏斜體) italic;(斜體) normal;(正常)
行高 {line-height: normal;}(正常) 單位：PX、PD、EM
粗細 {font-weight: bold;}(粗體) lighter;(細體) normal;(正常)
變體 {font-variant: small-caps;}(小型大寫字母) normal;(正常)
大小寫 {text-transform: capitalize;}(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)
修飾 {text-decoration: underline;}(下划線) overline;(上划線) line-through;(刪除線) blink;(閃爍)
字體名：
微軟雅黑：Microsoft YaHei
宋體：SimSun
黑體：SimHei
仿宋： FangSong
楷體： KaiTi
隸書：LiSu
幼圓：YouYuan
華文細黑：STXihei
華文楷體：STKaiti
華文宋體：STSong
華文中宋：STZhongsong
華文仿宋：STFangsong
方正舒體：FZShuTi
方正姚體：FZYaoti
華文彩雲：STCaiyun
華文琥珀：STHupo
華文隸書：STLiti
華文行楷：STXingkai
華文新魏：STXinwei
1 font: 15px "Segoe UI"; /* 字體:大小 名稱 */
2 font-family: "Segoe UI"; /* 字體名稱 */
4.2 顏色
17種標准色：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,olive, orange, purple, red, silver, teal, white, yellow
1 colo:rgb(255,255,255); 2 color: #F5F5F5; /* 前景(文本)顏色 */ 3 color: qlineargradient(); /* 前景(文本)顏色:線性漸變*/ 4 color: qradialgradient(); /* 前景(文本)顏色:輻射漸變*/ 5 color: qconicalgradient(); /* 前景(文本)顏色:梯形漸變*/
4.3 內邊距
1 padding: 4px; /* 文字邊距 */ 2 padding-left: 5px; /* 文字左邊距 */ 3 padding-right: 10px; /* 文字右邊距 */ 4 padding-top: 3px; /* 文字頂邊距 */ 5 padding-bottom: 3px; /* 文字底邊距 */
4.4 外邊距
1 margin: 14px 18px 20px 18px; /*外邊距 順序上右下左 */
2 margin-top: 14px; 3 margin-right: 18px; 4 margin-bottom: 20px; 5 margin-left: 18px;
4.5 背景
1 background-color: #202122; /* 背景顏色 */ 2 background-color: qlineargradient(); /* 背景顏色:線性漸變*/
3 background-color: qradialgradient(); /* 背景顏色:輻射漸變*/
4 background-color: qconicalgradient(); /* 背景顏色:梯形漸變*/
5 background-image:url(boder.png); /* 背景圖片 */ 6 background-position: ; /* 背景圖片對齊方式 */ 7 background-repeat: ; /* 背景圖片平鋪方式 */
4.6 邊框
border-style: dotted;(點線) dashed;(虛線) solid; double;(雙線) groove;(槽線) ridge;(脊狀) inset;(凹陷) outset;
border-width:; 邊框寬度
border-color:#;
簡寫方法border：width style color; /*簡寫*/
border: 1px solid #FDBC03; /* 邊框:寬度 顏色*/ border-image:url(boder.png) 4 8 12 16; /* 邊界圖 切線 */ border-radius: 4px; /* 角弧度 */ border-top-left-radius: ; /* 角弧度:左上角*/ border-top-right-radius: ; /* 角弧度:右上角*/ border-bottom-left-radius: ; /* 角弧度:左下角*/ border-bottom-right-radius: ; /* 角弧度:右下角*/
4.7 寬高
1 width:12px; /*設置寬度 單位像素*/
2 height:40px /*設置高度*/
3 min-width:65px; /*最小寬度 設置width無效可以嘗試設置min-width */ 4 min-height:12px; /*最小高度*/ 5 max-width:12px; 6 max-height:12px;
五：QSS偽狀態與子控件
偽狀態列表
1 :checked /*button部件被選中*/
2 :unchecked /*button部件未被選中*/
3 :disabled /*部件被禁用*/
4 :enabled /*部件被啟用*/
5 :focus /*部件獲得焦點*/
6 :hover /*鼠標位於部件上*/
7 :indeterminate /*checkbox或radiobutton被部分選中*/
8 :off /*部件可以切換，且處於off狀態*/
9 :on /*部件可以切換，且處於on狀態*/
10 :pressed /*部件被鼠標按下*/
子部件列表
1 ::down-arrow /*combo box或spin box的下拉箭頭*/
2 ::drop-down /*combo box的下拉箭頭*/
3
4 ::indicator /*checkbox、radio button或可選擇group box的指示器*/
5 ::item /*menu、menu bar或status bar的子項目*/
6 ::menu-indicator /*push button的菜單指示器*/
7 ::title /*group box的標題*/
8
9 ::down-button /*spin box的向下按鈕*/
10 ::up-arrow /*spin box的向上箭頭*/
11 ::up-button /*spin box的向上按鈕*/