Qt樣式表之二：QSS語法及常用樣式

一、簡述

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 css樣式大全(整理版）