一、簡述

Qt樣式表（以下統(tǒng)稱QSS）的術(shù)語和語法規(guī)則幾乎和CSS相同。如果你熟悉CSS，可以快速瀏覽以下內(nèi)容。不熟悉的話可以先去W3School - CSS或者本人的CSS博客隨筆簡單了解一下。

在講解樣式表語法前，我們先看一個例子：

/*按鈕普通態(tài)*/ QPushButton {/*字體為微軟雅黑*/font-family:Microsoft Yahei;/*字體大小為20點(diǎn)*/font-size:20pt;/*字體顏色為白色*/ color:white;/*背景顏色*/ background-color:rgb(14 , 150 , 254);/*邊框圓角半徑為8像素*/ border-radius:8px; }/*按鈕停留態(tài)*/ QPushButton:hover {/*背景顏色*/ background-color:rgb(44 , 137 , 255); }/*按鈕按下態(tài)*/ QPushButton:pressed {/*背景顏色*/ background-color:rgb(14 , 135 , 228);/*左內(nèi)邊距為3像素，讓按下時字向右移動3像素*/ padding-left:3px;/*上內(nèi)邊距為3像素，讓按下時字向下移動3像素*/ padding-top:3px; }

上面例子是實(shí)現(xiàn)按鈕三態(tài)效果的樣式表。

注：程序設(shè)置的樣式表比ui文件里設(shè)置的優(yōu)先級更高。

二、樣式表語法

2.1 樣式規(guī)則

QSS包含了一個樣式規(guī)則，一個樣式規(guī)則由一個選擇器和聲明組成，選擇器指定哪些部件由規(guī)則影響，聲明指定哪些屬性應(yīng)該在部件上進(jìn)行設(shè)置。例如：

QPushButton { color: red }

上面的例子中QPushButton是選擇器，{ color: red }是聲明，該規(guī)則指定QPushButton及其子類（例如：MyPushButton）應(yīng)使用紅色作為前景色。

幾個選擇器可以指定相同的聲明，使用逗號（,）來分隔選擇器。例如：

QPushButton, QLineEdit, QComboBox { color: red }

相當(dāng)于三個規(guī)則序列：

QPushButton { color: red } QLineEdit { color: red } QComboBox { color: red }

聲明部分的規(guī)則是一個屬性值對（property: value）列表，包含在花括號中，以分號分隔。例如：

QPushButton { color: red; background-color: white }

參考助手：Qt Style Sheets Reference中List of Properties部分。

注：QSS通常不區(qū)分大小寫（即：color、Color、COLOR、cOloR指同一屬性），唯一例外就是類名（class names）、對象名（object names）、屬性名（property names）區(qū)分大小寫。

2.2 選擇器類型

下表總結(jié)了最有用的選擇器，所有示例使用了選擇器中最簡單的類型，類型選擇器QSS支持所有的selectors defined in CSS2。

選擇器示例說明

通用選擇器	*	匹配所有部件
類型選擇器	QPushButton	匹配QPushButton及其子類的實(shí)例
屬性選擇器	QPushButton[flat=”false”]	匹配QPushButton中flat屬性為false的實(shí)例。
類選擇器	.QPushButton	匹配QPushButton的實(shí)例，但不包含子類。相當(dāng)于*[class~=”QPushButton”]。
ID選擇器	QPushButton#okButton	匹配所有objectName為okButton的QPushButton實(shí)例。
后代選擇器	QDialog QPushButton	匹配屬于QDialog后代（孩子，孫子等）的QPushButton所有實(shí)例。
子選擇器	QDialog > QPushButton	匹配屬于QDialog直接子類的QPushButton所有實(shí)例。

2.3 子控件

對于樣式復(fù)雜的部件，需要訪問子控件，例如：QComboBox的下拉按鈕或QSpinBox的上下箭頭。選擇器可能包含子控件，使得可以限制特有部件子控件的應(yīng)用規(guī)則。例如：

QComboBox::drop-down { image: url(dropdown.png) }

上述規(guī)則指定了QComboBoxe下拉按鈕樣式，雖然雙冒號（::）語法讓人想起CSS3偽元素，但Qt子控件從概念上講有不同的級聯(lián)語義。

子控件定位總是相對于另一個參考元素，這個參考元素可能是小部件或其它子控件。例如：QComboBox的::drop-down放置，默認(rèn)的放置在QComboBox區(qū)域的右上角。而::drop-down放置，默認(rèn)的在::drop-down子控件的中央。

width和height屬性可用于控制子控件的大小，注意：設(shè)置一個圖片會隱式地設(shè)置子控件的大小。相對定位（position : relative）：可以改變子控件相對初始位置的偏移量。例如：按下QComboBox下拉按鈕時，我們可能更喜歡用內(nèi)部箭頭偏移量來產(chǎn)生一個被按下的效果。要做到這一點(diǎn)，我們可以指定：

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 偽選擇器

選擇器可以包含偽狀態(tài)，意味著限制基于部件狀態(tài)的應(yīng)用程序規(guī)則。偽狀態(tài)出現(xiàn)在選擇器后面，用冒號（:）關(guān)聯(lián)。例如，鼠標(biāo)劃過按鈕：

QPushButton:hover { color: white }

偽狀態(tài)可以用感嘆號（!）運(yùn)算符表示否定。例如，當(dāng)鼠標(biāo)不劃過QRadioButton：

QRadioButton:!hover { color: red }

偽狀態(tài)可以連接使用，這種情況下，相當(dāng)于隱含了一個邏輯與。例如，當(dāng)鼠標(biāo)滑過選中的QCheckBox：

QCheckBox:hover:checked { color: white }

否定的偽狀態(tài)也可以連接使用，例如，當(dāng)鼠標(biāo)劃過一個非按下時按鈕：

QPushButton:hover:!pressed { color: blue; }

如果需要，也可以使用逗號操作來表示邏輯或：

QCheckBox:hover, QCheckBox:checked { color: white }

偽狀態(tài)也可以與子控件組合，例如：

QComboBox::drop-down:hover { image: url(dropdown_bright.png) }

參見助手：Qt Style Sheets Reference中List of Pseudo-States部分。

2.5 解決沖突

示例一

當(dāng)樣式中指定相同的屬性具有不同的值時，就會出現(xiàn)沖突。例如：

QPushButton#okButton { color: blue } QPushButton { color: red }

要解決這個沖突，必須考慮到的選擇器的特殊性。上面的例子，QPushButton＃okButton 被認(rèn)為比 QPushButton 更具體，因為它通常是指單個對象，而不是一類的所有實(shí)例。所以 okButton 這個按鈕文本顏色會設(shè)置為blue，而其它按鈕文本仍然設(shè)置為red。

示例二

同樣的，利用偽狀態(tài)比不指定偽狀態(tài)那些選擇器更具體。因此，下面的樣式指定一個QPushButton應(yīng)該有鼠標(biāo)懸停文本顏色為白色，否則文本顏色為紅色。

QPushButton:hover { color: white } QPushButton { color: red }

示例三

QPushButton:hover { color: white } QPushButton:enabled { color: red }

這里，兩個選擇器有相同的特殊性，但后一條規(guī)則優(yōu)先，即QPushButton:enabled { color: red }優(yōu)先級更高，所以按鈕默認(rèn) enabled 的情況下，無論鼠標(biāo)是否懸停在按鈕上，文本顏色始終為白色。

QPushButton:enabled { color: red } QPushButton:hover { color: white }

想要鼠標(biāo)是否懸停在按鈕上文本顏色為白色，根據(jù)后面規(guī)則優(yōu)先級更高的原則，則使顏色為white的規(guī)則在后面即可，如上所示。

或者，可以使文本顏色為白色的規(guī)則更加具體：

QPushButton:hover:enabled { color: white } QPushButton:enabled { color: red }

示例四

類似的問題出現(xiàn)在類型選擇器一起使用。請看下面的例子：

QPushButton { color: red } QAbstractButton { color: blue }

兩個規(guī)則應(yīng)用于 QPushButton 實(shí)例（因為 QPushButton 繼承自 QAbstractButton）并有color屬性的沖突。因為 QPushButton 繼承 QAbstractButton，所以 QPushButton 比 QAbstractButton 更具體，本應(yīng)該按鈕文本顏色為紅色。然而，對于QSS的計算，所有的類型選擇具有相同的特殊性，最后出現(xiàn)的規(guī)則優(yōu)先，所以實(shí)際上按鈕文本顏色為藍(lán)色。如果需要設(shè)置QPushButtons為紅色文字，需要重新排序規(guī)則。

總結(jié)

為了確定一個規(guī)則的特殊性，QSS遵循CSS2規(guī)范，一個選擇器的特殊性的計算方法如下：

• 計算選擇器中ID屬性的數(shù)量（= a）
• 計算選擇器中偽狀態(tài)類和其它屬性的數(shù)量（= b）
• 計算選擇器中元素名的數(shù)量（= c）
• 忽略偽元素（即子控件）。

串聯(lián)的三個數(shù)字a-b-c（在具有大基數(shù)的數(shù)字系統(tǒng)）給出的特殊性。一些例子如下：

* {} /* 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 級聯(lián)效應(yīng)

QSS可以在QApplication、父部件、子部件中設(shè)置。沖突發(fā)生時，不論沖突規(guī)則的特殊性，部件自身的樣式表總優(yōu)先于任何繼承樣式表。考慮下面的例子。首先，我們在QApplication中設(shè)置樣式表：

qApp->setStyleSheet("QPushButton { color: white }");

然后，我們設(shè)置QPushButton的樣式表：

myPushButton->setStyleSheet("color: blue");

QPushButton樣式表強(qiáng)制QPushButton（以及任何子部件）顯示藍(lán)色文字，盡管應(yīng)用程序范圍內(nèi)的樣式表提供的規(guī)則更具體。

2.7 繼承性

在經(jīng)典的CSS中，當(dāng)字體和顏色沒有明確設(shè)置時，它就會自動從父繼承。當(dāng)使用QSS時，部件不會自動從父繼承字體和顏色。例如，一個QGroupBox中包含QPushButton：

qApp->setStyleSheet("QGroupBox { color: red; } ");

QPushButton不會繼承其父QGroupBox的顏色，而是顯示系統(tǒng)的顏色。

三、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%;	設(shè)置行高
font-weight:bold;（lighter、normal、數(shù)值900）	字體粗細(xì)
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;	重復(fù)排列-網(wǎng)頁默認(rèn)
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;	邊框圓角半徑

以上是建議書寫方式，但也可以使用常規(guī)書寫方式，如下表所示:

CSS框線常規(guī)書寫方式說明

border-top-color:#369;	設(shè)置上框線顏色
border-top-width:1px;	設(shè)置上框線寬度
border-top-style:solid	設(shè)置上框線樣式

其他框線樣式如下：

• solid - 實(shí)線
• dotted - 虛線
• double - 雙線
• inset - 凹框
• outset - 凸框
• groove - 立體內(nèi)凸框
• ridge - 立體浮雕框

3.5 CSS邊界樣式

CSS邊界樣式及示例說明

margin-top:10px;	上邊界值
margin-right:10px;	右邊界值
margin-bottom:10px;	下邊界值
margin-left:10px;	左邊界值

注：px:相對長度單位，像素（Pixel）。pt:絕對長度單位，點(diǎn)（Point）。

參考：

Qt css樣式大全(整理版）

轉(zhuǎn)載于:https://www.cnblogs.com/linuxAndMcu/p/11039769.html

總結(jié)

以上是生活随笔為你收集整理的Qt样式表之二：QSS语法及常用样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。