qss能實作界面與樣式風格互相分離，形成同web相同的可以随意換膚的效果。
能實作控件樣式的變化，如位置，前景色，背景色，邊框是圓角還是方角等。
參考文獻：
Qt樣式表QSS基本使用
qss樣式表筆記大全(一)：qss名詞解析（包含相關示例）
一、Qss的使用流程
qss由一個選擇器和具體的樣式描述組成，選擇器指定了是對象，樣式描述指定了具體的樣式風格。
例如：QPushButton { color: red }
指QPushButton對象的前景色為紅色。 選擇器主要包括“類名”，“對象名”，“Qt 屬性名”，這三樣東西是大小寫敏感的，而樣式描述是大小寫不敏感的，如color 與Color 代表同一屬性。
二、選擇器（selector）
選擇器的選擇方式有七種，如下表：
| 選擇對象 | 示例 | 描述 |
| 所有控件 | * | 選擇所有目前控件和其下的所有視窗部件 |
| 所有某類的控件對象，被其子控件對象繼承 | QPushButton | 選擇該類的所有執行個體，以及該類的子控件執行個體（允許該類型） |
| 所有某類的控件對象，不被其子控件對象繼承 | .QPushButton | 選擇該類的所有執行個體，不包括子控件執行個體 |
| 某類的指定控件對象 | QPushButton#objectName | 選擇該類執行個體中對象名為objectName的執行個體 |
| 選擇比對某屬性的控件對象 | QPushButton[y=”0”] | 選擇該類滿足該屬性條件的所有執行個體 |
| 某類控件的子控件對象 | QFrame > QPushButton | 選擇指定該類下的直接子控件執行個體 |
| 某類控件的子孫控件對象 | QFrame QPushButton | 選擇指定該類下的所有子孫控件執行個體 |
2.1 子控件選擇器
1）對于複雜的控件，可能會在其中包含其他子控件，如一個QComboxBox 中有一個drop-down 的按鈕。那麼現在如果要設定QComboxBox 的下拉按鈕的話，就可以這樣通路：
QComboBox::drop-down { image: url(dropdown.png) }
2）子控件選擇器是用位置的引用來代表一個元素，這個元素可是一個單一控件或是另一個包含子控件的複合控件。使用subcontrol-origin 屬性可以改變子控件的預設放置位置，如：
QComboBox {margin-right: 20px;}
QComboBox::drop-down {subcontrol-origin: margin;}
3）相對位置屬性可以用來改變子控件相對于最初位置的偏移量，如當一個QCombox 的drop-down 按鈕被按下時，我們可以用一個内部的小偏移量來表示被按下的效果，如下：
QComboBox::down-arrow {image: url(downarrow.png);}
QComboBox::down-arrow:pressed {position: relative;top: 1px; left: 1px;}
4）絕對位置屬性允許子控件改變自己的位置和大小而不受引用元素的控件。一但位置被設定了，這些子控件就可以被當成一般的widget 來對待，并且可以使用盒模型。
2.2 僞選擇器
1）僞選擇器以冒号（:）表示，與css 裡的僞選擇器相似，是基于控件的一些基本狀态來限定程式的規則，如hover 規則表示滑鼠經過控件時的狀态，而press 表示按下按鈕時的狀态。如：
QPushButton:hover {Background-color:red;}
表示滑鼠經過時QPushButton 背景變紅。
2）僞選擇器支援否定符号（！），如：
QRadioButton:!hover { color: red }
表示沒有滑鼠移上QRadioButton 時他顯示的顔色是red。
3）僞選擇器可以被串連在一起，比如：
QPushButton:hover:!pressed { color: blue; }
表示QPushButton 在滑鼠移上卻沒有點選時顯示blue 字，但如果點選的時候就不會顯示blue 顔色了。
4）同樣可以和之前所講的子控件選擇器一起聯合使用，如：
QSpinBox::down-button:hover{ image: url(btn-combobox-press.bmp) }。
5）僞選擇器，子控件選擇器等都是可以用逗号“,”分隔表示連續相同的設定的，如：
QPushButton:hover,QSpinBox::down-button,QCheckBox:checked{ color: white ;image: url(btn-combobox-press.bmp);}。
三、樣式描述
3.1 屬性（property）
屬性，是一個視窗部件所固有的特征，每一個類型的視窗控件都會有屬于他們自己的屬性，如width，height（輔助選擇器才有），color等等，定制控件的不同外觀。
屬性值，跟在每一個屬性後面有一個值，可以是bool，int，10px，red，rgb(0,0,0)等等，根據屬性的不同，屬性值的類型不同，通過修改指定控件的指定屬性的屬性值來實作不同的效果。
如示例1：background-color，
執行個體2：width、height、background-color。
注意：屬性是使用邏輯否(!)操作符，如!hover，是滑鼠未放在上面的其他狀态。
3.2 盒模型（box model）
盒模型，包含了4個影響布局的矩形。
- content rectangle：繪制視窗部件的内容的區域，如文字，圖檔。
- padding rectangle：包圍content rectangle，由padding屬性指定填充操作，主要是視窗部件内容與邊緣線（border）之間的空隙，由top，right，bottom和left設定他的大小，預設為0。
- border rectangle：包圍padding rectangle，為邊界預留白間，可認為是視窗的外框線。
- margin rectangle：最外面的矩形，主要是負責與其他視窗部件間的距離。
注意：若都沒有指定，預設是四個重合在一起。
3.3 角弧度（radius）
視窗部件4個角弧度，設定radius設定角的弧度，如border-radius：4px。
3.4 前景色（color）
視窗部件的前景色使用者繪制視窗部件上面的文本，由color設定。
3.5 背景色（背景圖檔）
視窗部件背景色，用于填充矩形，可通過background-color屬性設定。當需要使用圖檔時，可使用background-image屬性，指定資源控制，背景圖檔在盒模式區域的對齊和平鋪方式可通過background-position和background-repeadr屬性指定。注意：筆者設定背景圖一般直接使用border-image，該屬性預設是預設是進行平鋪和拉伸的。
3.6 九宮格（border-image，border-width）
用于有邊框分割的圖像，圖像可縮放和平鋪其中的每個部分。一個本元素可将圖檔分成9個區域，四個角區域是不會變化，其他5個區域按照特定的方式進行變化。效果如下圖：
使用border-image和border-width屬性，文法如下：
QLabel#label_6 {
border-image:url("E:/111.jpg") 18 16 15 14 repeat repeat;
border-width:18 16 15 14;
}
berder-image: url [top left bottom right [repeat|no-repeat repeate|no-repeat];
berder-width: top left bottom right;
技巧：這裡筆者提供一個小技巧，可先僅使用border-image: url top leftbottom right來确認邊界，如下表的label_2。
3.7 漸變色（Gradient）
- 線性漸變（qlineargradient）：兩點連成的線，線上設定不同顔色，位置範圍[0,1]，參考示例。
- 圓心輻射漸變（qradialgradient）：從圓心開始向外輻射，圓心屬性為cx，cy，半徑為radius，fx是stop為0時相對半徑範圍的位置，參考示例。
- 圓心角度漸變（qconicalgradient）：從圓心開始，以x軸為0°逆時鐘轉，圓心屬性為cx，cy，
示例：QPushButton使用qlineargradient線性漸變色
QPushButton#pushButton_3 {
background: qlineargradient( x1:0, y1:0,x2:1, y2:1,
stop:0 rgba(0, 0, 0, 255),
stop:0.5 rgba(0,0, 0, 0),
stop:1 rgba(255, 255, 255, 255));
}
示例：QPushButton使用qradialgradient圓心輻射漸變色
QPushButton#pushButton_4 {
background: qradialgradient( cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,
stop:0 rgba(0, 0, 0, 255),
stop:0.5 rgba(0, 0, 0, 0),
stop:1 rgba(255, 255, 255, 255))
}
QPushButton#pushButton_6 {
background: qradialgradient( cx:0.5, cy:0.5, radius:0.5, fx:1.0, fy:0.0,
stop:0 rgba(0, 0, 0, 255),
stop:0.5 rgba(0, 0, 0, 0),
stop:1 rgba(255, 255, 255, 255))
}
示例：QPushButton使用qconicalgradient圓心角度漸變
QPushButton#pushButton_5 {
background:qconicalgradient( cx:0.5, cy:0.5, angle:0,
stop:0 rgba(255, 0, 0, 255),
stop:0.25 rgba(0, 255, 0, 255),
stop:0.5 rgba(0, 0, 255, 255),
stop:0.75 rgba(0, 0, 0, 0),
stop:1.0 rgba(0, 0, 0, 255));
}
QPushButton#pushButton_7 {
background:qconicalgradient( cx:0.4, cy:0.4, angle:45,
stop:0 rgba(255, 0, 0, 255),
stop:0.25 rgba(0, 255, 0, 255),
stop:0.5 rgba(0, 0, 255, 255),
stop:0.75 rgba(0, 0, 0, 0),
stop:1.0 rgba(0, 0, 0, 255));
}