QT樣式表單

建立步驟：

 1、建立文字檔案，寫入樣式表內容，更改檔案字尾名為qss；

 2、在工程中新建資原始檔*.qrc，新增字首檔案（/名稱），將qss檔案加入字首檔案中；

 3、通過傳入路徑/檔名的方式建立一個QFile物件，以readonly的方式開啟，然後readAll，最後qApp->setStyleSheet就可以使qss生效。

QT的樣式表單允許我們在對程式不做任何程式碼上的更改的情況下輕鬆改變應用程式的外觀。

其思想來源於網頁設計中的CSS，即可以將功能設計和美學設計分開。

它的語法和概念和HTML CSS也是差不多的。

其原理可簡單理解為：QT內部存在一個CSS語法解析器，我們將我們的樣式控制以CSS語法定義到外部檔案，CSS語法解析器解析後在呼叫相應的功能模組以完成樣式變化。（其實這部分功能我們完全可以通過程式碼實現，只是這麼做既麻煩而且一旦更改會很不方便）

比如：我在CSS定義字型顏色和大小，那麼CSS語法解析器解讀出我的意圖後，可能就會呼叫freetype模組來實現此功能。

好處：1.將功能設計和美學設計分開

2.CSS設計資源多，查詢容易

說明：QT Style 樣式語法雖然和CSS語法差不多，但是其功能是其子集，在使用QT style時需具備CSS語法知識

CSS語法學習：http://www.w3school.com.cn/h.asp

CSS 參考手冊：http://www.w3school.com.cn/cssref/index.asp

基本語法

1.      樣式表單由一系列樣式規則組成。每條規則可以分成兩部分：選擇器和宣告

         選擇器表示規則作用到哪些控制元件上；宣告則詳細說明了是什麼規則。

2.      Qt的樣式表語法不區分大小寫，所以color，Color，coLor，coloR都表示同樣的顏色屬性。但是指代類的類名的時候，是區分大小寫的。

3.      多個選擇器可以並列使用，它們之間用逗號隔開，例如：

         QPushButton,QLineEdit, QComboBox{ color: red }

4.      宣告部分也可以有多個並列，之間用分號隔開。當我們要設定的選擇器有多個屬性的時候，就需要並列多個宣告，例如：

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

        這條樣式規則讓按鈕的字型變成紅色，同時背景色變成白色。

選擇器類別

Qt樣式表單支援所有在CSS2中定義的選擇器型別，下面介紹幾種最為常用的選擇器定義。

屬性選擇器

可用於QT中所有具有toString方法的屬性，例如QPushButton的text、checked等屬性。

當屬性是一個QStringList時，可以用~=這個符號來匹配其中的某一項。

因為屬性往往是動態的，當屬性更改了的時候，需要調整樣式表，通常做法是刪除樣式表，再重新載入

選擇器類別

精細控制（子控制元件）

對於比較複雜的控制元件，往往由多個子控制元件構成，比如QComboBox則由文字框和下拉按鈕構成，對於QT STYLE 允許我們分別對子控制元件進行樣式設定，這就大大增強了樣式的靈活性

舉例：QComboBox的下拉點選按鈕設定背景圖片：

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

關於子控制元件更多資訊與使用方法可以訪問

http://qt-project.org/doc/qt-5/stylesheet-examples.html#customizing-qcombobox

偽狀態控制

根據具體控制元件的狀態不同，選擇器也可以有不同的狀態，依次對應控制元件在不同狀態的現實效果

基本寫法：

1.      偽狀態和選擇器類名之間，用一個冒號分隔。

QPushButton:hover { color: white }

2.      偽狀態也可以反向選擇。

例如：當我們要設定除了滑鼠懸停狀態外其他所有狀態的字型顏色，則可以像下面這樣設定：QRadioButton:!hover { color: red }

3.      偽狀態也可以並列，之間用冒號連線，表示偽狀態之間用AND計算：

QCheckBox:hover:checked { color: white }

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

4.      偽狀態之間可以用OR計算：

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

5.      偽狀態可以和子控制元件合起來使用：

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

STYLE基礎知識的說明

我們控制STYLE主要是將STYLE新增到控制元件上，通過控制控制元件不同狀態的STYLE以達到整體的顯示效果

那對於控制元件，我將其分解為以下幾部分來理解

Ø  從層次上來說：

控制元件可分為前景與背景

前景：多包含檔案，圖片等內容

背景：多包含圖片，圖形等內容

Ø  從結構上來說：

由於QT style是模擬CSS的佈局結構，因此其滿足CSS的盒子模型

從裡到外的4個區域分別是：

1： content

2:  padding

3:  border

4:  margin

通過控制一個控制元件的前景，背景內容已經結構上的4個區域，我們就可以達到對一個控制元件為所欲為的控制

QT如何下使用QSS

1.       定義樣式檔案

2.       將樣式檔案新增到資源中

3.       程式碼端載入樣式檔案

CSS基本功能

CSS的強大在於組合功能的強大，這裡只是簡單介紹基本功能，將簡單功能組合起來才能實現好看的效果。

CSS 背景屬性（Background）

CSS 邊框屬性（Border 和 Outline）

Box 屬性

CSS 字型屬性（Font）

CSS 外邊距屬性（Margin）

CSS 內邊距屬性（Padding）

CSS 定位屬性（Positioning）

CSS 文字屬性（Text）

網址：http://blog.csdn.net/tiankefeng19850520/article/details/27183403?utm_source=tuicool&utm_medium=referral