一、簡述
Qt樣式表（以下統稱QSS）的術語和文法規則幾乎和CSS相同。如果你熟悉CSS，可以快速浏覽以下内容。不熟悉的話可以先去W3School - CSS或者本人的CSS部落格随筆簡單了解一下。
在講解樣式表文法前，我們先看一個例子：
/*按鈕普通态*/
QPushButton
{
/*字型為微軟雅黑*/
font-family:Microsoft Yahei;
/*字型大小為20點*/
font-size:20pt;
/*字型顔色為白色*/
color:white;
/*背景顔色*/
background-color:rgb(14 , 150 , 254);
/*邊框圓角半徑為8像素*/
border-radius:8px;
}
/*按鈕停留态*/
QPushButton:hover
{
/*背景顔色*/
background-color:rgb(44 , 137 , 255);
}
/*按鈕按下态*/
QPushButton:pressed
{
/*背景顔色*/
background-color:rgb(14 , 135 , 228);
/*左内邊距為3像素，讓按下時字向右移動3像素*/
padding-left:3px;
/*上内邊距為3像素，讓按下時字向下移動3像素*/
padding-top:3px;
}
上面例子是實作按鈕三态效果的樣式表。
注：程式設定的樣式表比ui檔案裡設定的優先級更高。
二、樣式表文法
2.1 樣式規則
QSS包含了一個樣式規則，一個樣式規則由一個選擇器和聲明組成，選擇器指定哪些部件由規則影響，聲明指定哪些屬性應該在部件上進行設定。例如：
QPushButton { color: red }
上面的例子中QPushButton是選擇器，{ color: red }是聲明，該規則指定QPushButton及其子類（例如：MyPushButton）應使用紅色作為前景色。
幾個選擇器可以指定相同的聲明，使用逗号（,）來分隔選擇器。例如：
QPushButton, QLineEdit, QComboBox { color: red }
相當于三個規則序列：
QPushButton { color: red }
QLineEdit { color: red }
QComboBox { color: red }
聲明部分的規則是一個屬性值對（property: value）清單，包含在花括号中，以分号分隔。例如：
QPushButton { color: red; background-color: white }
參考助手：Qt Style Sheets Reference中List of Properties部分。
注：QSS通常不區分大小寫（即：color、Color、COLOR、cOloR指同一屬性），唯一例外就是類名（class names）、對象名（object names）、屬性名（property names）區分大小寫。
2.2 選擇器類型
下表總結了最有用的選擇器，所有示例使用了選擇器中最簡單的類型，類型選擇器QSS支援所有的selectors defined in CSS2。
| 選擇器 | 示例 | 說明 |
| 通用選擇器 | * | 比對所有部件 |
| 類型選擇器 | QPushButton | 比對QPushButton及其子類的執行個體 |
| 屬性選擇器 | QPushButton[flat=”false”] | 比對QPushButton中flat屬性為false的執行個體。 |
| 類選擇器 | .QPushButton | 比對QPushButton的執行個體，但不包含子類。相當于*[class~=”QPushButton”]。 |
| ID選擇器 | QPushButton#okButton | 比對所有objectName為okButton的QPushButton執行個體。 |
| 後代選擇器 | QDialog QPushButton | 比對屬于QDialog後代（孩子，孫子等）的QPushButton所有執行個體。 |
| 子選擇器 | QDialog > QPushButton | 比對屬于QDialog直接子類的QPushButton所有執行個體。 |
2.3 子控件
對于樣式複雜的部件，需要通路子控件，例如：QComboBox的下拉按鈕或QSpinBox的上下箭頭。選擇器可能包含子控件，使得可以限制特有部件子控件的應用規則。例如：
QComboBox::drop-down { image: url(dropdown.png) }
上述規則指定了QComboBoxe下拉按鈕樣式，雖然雙冒号（::）文法讓人想起CSS3僞元素，但Qt子控件從概念上講有不同的級聯語義。
子控件定位總是相對于另一個參考元素，這個參考元素可能是小部件或其它子控件。例如：QComboBox的::drop-down放置，預設的放置在QComboBox區域的右上角。而::drop-down放置，預設的在::drop-down子控件的中央。
width和height屬性可用于控制子控件的大小，注意：設定一個圖檔會隐式地設定子控件的大小。相對定位（position : relative）：可以改變子控件相對初始位置的偏移量。例如：按下QComboBox下拉按鈕時，我們可能更喜歡用内部箭頭偏移量來産生一個被按下的效果。要做到這一點，我們可以指定：
QComboBox::down-arrow {
image: url(down_arrow.png);
}
QComboBox::down-arrow:pressed {
position: relative;
top: 1px; left: 1px;
}
絕對定位（position : absolute）：允許子控件改變位置和的大小而不受參考元素限制。
參考助手：Qt Style Sheets Reference中List of Sub-Controls部分，及Qt Style Sheets Examples中Customizing the QPushButton's Menu Indicator Sub-Control部分。
2.4 僞選擇器
選擇器可以包含僞狀态，意味着限制基于部件狀态的應用程式規則。僞狀态出現在選擇器後面，用冒号（:）關聯。例如，滑鼠劃過按鈕：
QPushButton:hover { color: white }
僞狀态可以用感歎号（!）運算符表示否定。例如，當滑鼠不劃過QRadioButton：
QRadioButton:!hover { color: red }
僞狀态可以連接配接使用，這種情況下，相當于隐含了一個邏輯與。例如，當滑鼠滑過選中的QCheckBox：
QCheckBox:hover:checked { color: white }
否定的僞狀态也可以連接配接使用，例如，當滑鼠劃過一個非按下時按鈕：
QPushButton:hover:!pressed { color: blue; }
如果需要，也可以使用逗号操作來表示邏輯或：
QCheckBox:hover, QCheckBox:checked { color: white }
僞狀态也可以與子控件組合，例如：
QComboBox::drop-down:hover { image: url(dropdown_bright.png) }
參見助手：Qt Style Sheets Reference中List of Pseudo-States部分。
2.5 解決沖突
示例一
當樣式中指定相同的屬性具有不同的值時，就會出現沖突。例如：
QPushButton#okButton { color: blue }
QPushButton { color: red }
要解決這個沖突，必須考慮到的選擇器的特殊性。上面的例子，QPushButton＃okButton 被認為比 QPushButton 更具體，因為它通常是指單個對象，而不是一類的所有執行個體。是以 okButton 這個按鈕文本顔色會設定為blue，而其它按鈕文本仍然設定為red。
示例二
同樣的，利用僞狀态比不指定僞狀态那些選擇器更具體。是以，下面的樣式指定一個QPushButton應該有滑鼠懸停文本顔色為白色，否則文本顔色為紅色。
QPushButton:hover { color: white }
QPushButton { color: red }
示例三
QPushButton:hover { color: white }
QPushButton:enabled { color: red }
這裡，兩個選擇器有相同的特殊性，但後一條規則優先，即QPushButton:enabled { color: red }優先級更高，是以按鈕預設 enabled 的情況下，無論滑鼠是否懸停在按鈕上，文本顔色始終為白色。
QPushButton:enabled { color: red }
QPushButton:hover { color: white }
想要滑鼠是否懸停在按鈕上文本顔色為白色，根據後面規則優先級更高的原則，則使顔色為white的規則在後面即可，如上所示。
或者，可以使文本顔色為白色的規則更加具體：
QPushButton:hover:enabled { color: white }
QPushButton:enabled { color: red }
示例四
類似的問題出現在類型選擇器一起使用。請看下面的例子：
QPushButton { color: red }
QAbstractButton { color: blue }
兩個規則應用于 QPushButton 執行個體（因為 QPushButton 繼承自 QAbstractButton）并有color屬性的沖突。因為 QPushButton 繼承 QAbstractButton，是以 QPushButton 比 QAbstractButton 更具體，本應該按鈕文本顔色為紅色。然而，對于QSS的計算，所有的類型選擇具有相同的特殊性，最後出現的規則優先，是以實際上按鈕文本顔色為藍色。如果需要設定QPushButtons為紅色文字，需要重新排序規則。
總結
為了确定一個規則的特殊性，QSS遵循CSS2規範，一個選擇器的特殊性的計算方法如下：
- 計算選擇器中ID屬性的數量（= a）
- 計算選擇器中僞狀态類和其它屬性的數量（= b）
- 計算選擇器中元素名的數量（= c）
- 忽略僞元素（即子控件）。
串聯的三個數字a-b-c（在具有大基數的數字系統）給出的特殊性。一些例子如下：
* {} /* a=0 b=0 c=0 -> specificity = 0 */
LI {} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up] {} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.color {} /* a=0 b=1 c=3 -> specificity = 13 */
LI.color.width {} /* a=0 b=2 c=1 -> specificity = 21 */
#okButton {} /* a=1 b=0 c=0 -> specificity = 100 */
2.6 級聯效應
QSS可以在QApplication、父部件、子部件中設定。沖突發生時，不論沖突規則的特殊性，部件自身的樣式表總優先于任何繼承樣式表。考慮下面的例子。首先，我們在QApplication中設定樣式表：
qApp->setStyleSheet("QPushButton { color: white }");
然後，我們設定QPushButton的樣式表：
myPushButton->setStyleSheet("color: blue");
QPushButton樣式表強制QPushButton（以及任何子部件）顯示藍色文字，盡管應用程式範圍内的樣式表提供的規則更具體。
2.7 繼承性
在經典的CSS中，當字型和顔色沒有明确設定時，它就會自動從父繼承。當使用QSS時，部件不會自動從父繼承字型和顔色。例如，一個QGroupBox中包含QPushButton：
qApp->setStyleSheet("QGroupBox { color: red; } ");
QPushButton不會繼承其父QGroupBox的顔色，而是顯示系統的顔色。
三、CSS常用樣式
3.1 CSS文字屬性
| CSS文字屬性及示例 | 說明 |
| color:#999999; | 文字顔色 |
| font-family:Microsoft Yahei,sans-serif; | 字型家族 |
| font-size:16pt; | 字型大小 |
| font-style:itelic;（normal、oblique） | 字型樣式 |
| letter-spacing:1pt; | 字間距離 |
| line-height:200%; | 設定行高 |
| font-weight:bold;（lighter、normal、數值900） | 字型粗細 |
| text-decoration:underline;（line-through、overline、none） | 字型修飾 |
| text-align:left;（right、center、justify） | 文字左對齊 |
| vertical-align:top;（bottom、middle、text-top、text-bottom） | 垂直對齊方式 |
| text-transform:uppercase;（lowercase、capitalize） | 英文大寫 |
| font-variant: small-caps;（normal） | 小型大寫字母 |
3.2 CSS背景樣式：
| CSS背景樣式及示例 | 說明 |
| background:black; | 背景顔色為黑色 |
| background-color:#F5E2EC; | 背景顔色 |
| background-image:url(/image/bg.gif); | 背景圖檔 |
| background:transparent; | 透視背景 |
| background-repeat : repeat; | 重複排列-網頁預設 |
| background-position : center; | 指定背景位置-居中對齊 |
3.3 CSS邊框空白
| CSS邊框空白及示例 | 說明 |
| padding:5px 10px 5px 10px; | 所有邊框留白白 |
| padding-top:10px; | 上邊框留白白 |
| padding-right:10px; | 右邊框留白白 |
| padding-bottom:10px; | 下邊框留白白 |
| padding-left:10px; | 左邊框留白白 |
3.4 CSS框線
| CSS框線建議書寫方式 | 說明 |
| border:1px solid red; | 所有邊框線 |
| border-top:1px solid #6699cc; | 上框線 |
| border-bottom:1px solid #6699cc; | 下框線 |
| border-left:1px solid #6699cc; | 左框線 |
| border-right:1px solid #6699cc; | 右框線 |
| border-radius:8px; | 邊框圓角半徑 |
以上是建議書寫方式，但也可以使用正常書寫方式，如下表所示:
| CSS框線正常書寫方式 | 說明 |
| border-top-color:#369; | 設定上框線顔色 |
| border-top-width:1px; | 設定上框線寬度 |
| border-top-style:solid | 設定上框線樣式 |
其他框線樣式如下：
- solid - 實線
- dotted - 虛線
- double - 雙線
- inset - 凹框
- outset - 凸框
- groove - 立體内凸框
- ridge - 立體浮雕框
3.5 CSS邊界樣式
| CSS邊界樣式及示例 | 說明 |
| margin-top:10px; | 上邊界值 |
| margin-right:10px; | 右邊界值 |
| margin-bottom:10px; | 下邊界值 |
| margin-left:10px; | 左邊界值 |
注：px:相對長度機關，像素（Pixel）。pt:絕對長度機關，點（Point）。
Qt學習路線：Qt學習路線
資料領取：「連結」
![EndNote引用批量參考文獻的正确使用方法，簡單且高效[鼓掌][鼓掌][鼓掌]大家好我是期刊課代表，今天教你如何使用正[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)