導語
一個完善的應用程序不僅應該有實用的功能，還要有一個漂亮的外觀，這樣才能使應用程序更加友善，更加吸引用戶。作爲一個跨平臺的UI開發框架，Qt提供了強大而靈活的界面外觀設計機制。
Qt樣式表是一個可以自定義部件外觀的十分強大的機制。Qt樣式表的概念、術語和語法都受到了HTML的層疊樣式表（Cascading StyleSheets，CSS）的啓發，不過與CSS不同的是，Qt樣式表應用於部件的世界。
環境：Windows Xp + Qt 4.8.5+QtCreator2.8.0
目錄
一、簡介
二、在設計模式使用Qt樣式表
三、在代碼中設置Qt樣式表
四、樣式表語法
正文
一、簡介
要學習Qt樣式表，需要對其有一個全面的瞭解，應該知道它到底有什麼用，可以給哪些部件設置樣式。爲了瞭解這些內容，我們先在Qt幫助中查看Qt StyleSheets關鍵字，如下圖所示。
這裏將所有內容分爲了幾部分：The Style Sheet Syntax中介紹了Qt樣式表的語法，就是一些使用規則；Qt Designer Integration中介紹瞭如何在設計器中使用Qt樣式表；CustomizingQt Widgets Using Style Sheets中介紹瞭如何使用Qt樣式表來定製部件樣式；QtStyle Sheets Reference中羅列了Qt中所有可以使用樣式表的部件；QtStyle Sheets Examples中列出了常用部件使用樣式表的例子，這個是我們後面學習使用時的重要參考。
二、在設計模式使用Qt樣式表
1.新建Qt Gui應用，項目名稱爲myStyle，其他保持默認即可。完成後打開mainwindow.ui進入設計模式，然後拖入一個Push
Button按鈕。
2.在按鈕部件上右擊，選擇“改變樣式表”菜單項，在彈出的編輯樣式表對話框中點擊“添加顏色”下拉框，然後選擇background-color，我們爲其添加背景顏色。如下圖所示。
這時會彈出選擇顏色按鈕，大家可以隨便選擇一個顏色，這裏選擇了紅色，然後點擊確定按鈕關閉對話框。添加好的代碼如下圖所示。這種方法可以快速設置樣式表，當然我們也可以自己手動來添加代碼。
3.完成後大家可能發現按鈕的顏色並沒有改變，不要着急，這時運行程序，發現已經有效果了。如下圖所示。
4.其實在設計模式還可以很容易地使用背景圖片，這個需要使用Qt資源，大家可以試試，這裏就不再介紹。
三、在代碼中設置Qt樣式表
既然在設計器中可以使用樣式表，那麼使用代碼就一定可以實現。在代碼中可以使用setStyleSheet()函數來設置樣式表，不過用兩種設置方法。
1.設置所有的相同部件都使用相同的樣式。我們在mainwindow.cpp的構造函數中添加如下代碼：
setStyleSheet("QPushButton { color: white }");
這時運行程序，效果如下圖所示。
可以看到按鈕的文本顏色變成了白色，不過這種方式是給所有QPushButton類對象設置的樣式。也就是說，我們再往界面上拖放其他的Push Button，它的文本顏色也會變成白色。
2.那麼怎樣才能只給特定的一個按鈕設置樣式表呢，這就需要使用第二種方式了。我們接着在mainwindow.cpp構造函數中添加代碼：
ui->pushButton->setStyleSheet("color: blue");
這樣就是隻給先前添加的pushButton按鈕設置了樣式，將文本顏色設置爲藍色。爲了有一個對比，大家可以再往界面上拖入一個Push
Button按鈕，然後運行程序，如下圖所示。
也許現在又會問了，怎麼按鈕的背景不是紅色的了？這是因爲一個部件只能單獨設置一個樣式表，我們在代碼中爲pushButton設置了樣式表就會屏蔽設計器中設置的。這裏只是說單獨爲一個部件同時設置了多個樣式表會出現這種情況，如果對其父類進行設置，則只會對其有影響，但是不會屏蔽掉自己的樣式表，比如前面按鈕的紅底白字就是這種情況。
下面我們把代碼更改如下：
ui->pushButton->setStyleSheet("background-color:red; color: blue");
再次運行程序，可以發現已經是紅底藍字了。效果如下圖所示。
現在大家應該可以瞭解到，我們前面在設計模式中就是隻爲指定的pushButton按鈕設置了背景。
四、樣式表語法
1.樣式規則
樣式表包含了一系列的樣式規則，一個樣式規則由一個選擇符（selector）和一個聲明（declaration）組成。選擇符指定了受該規則影響的部件；聲明指定了這個部件上要設置的屬性。例如：
QPushButton{color:red}
在這個樣式規則中，QPushButton是選擇符，{color:red}是聲明，而color是屬性，red是值。這個規則指定了QPushButton和它的子類應該使用紅色作爲它們的前景色。Qt樣式表中一般不區分大小寫，例如color、Color、COLOR和COloR表示相同的屬性。只有類名，對象名和Qt屬性名是區分大小寫的。一些選擇符可以指定相同的聲明，只需要使用逗號隔開，例如：
QPushButton,QLineEdit,QComboBox{color:red}
一個樣式規則的聲明部分是一些屬性：值對組成的列表，它們包含在大括號中，使用分號隔開。例如：
QPushButton{color:red;background-color:white}
2.子控件（Sub-Controls）
對一些複雜的部件修改樣式，可能需要訪問它們的子控件，例如QComboBox的下拉按鈕，還有QSpinBox的向上和向下的箭頭等。選擇符可以包含子控件來對部件的特定子控件應用規則，例如：
QComboBox::drop-down{image:url(dropdown.png)}
這樣的規則可以改變所有的QComboBox部件的下拉按鈕的樣式。在Qt Style Sheets Reference關鍵字對應的幫助文檔的List
of Stylable Widgets一項中列出了所有可以使用樣式表來自定義樣式的Qt部件，在List of Sub-Controls一項中列出了所有可用的子控件。
3.僞狀態（Pseudo-States）
選擇符可以包含僞狀態來限制規則在部件的指定的狀態上應用。僞狀態出現在選擇符之後，用冒號隔離，例如：
QPushButton:hover{color:white}
這個規則表明當鼠標懸停在一個QPushButton部件上時才被應用。僞狀態可以使用感嘆號來表示否定，例如要當鼠標沒有懸停在一個QRadioButton上時才應用規則，那麼這個規則可以寫爲：
QRadioButton:!hover{color:red}
僞狀態還可以多個連用，達到邏輯與效果，例如當鼠標懸停在一個被選中的QCheckBox部件上時才應用規則，那麼這個規則可以寫爲：
QCheckBox:hover:checked{color:white}
如果有需要，也可以使用逗號來表示邏輯或操作，例如：
QCheckBox:hover,QCheckBox:checked{color:white}
在Qt Style Sheets Reference關鍵字對應的幫助文檔的List of Pseudo-States一項中列出了Qt支持的所有的僞狀態。
4.例子
大家可以在Qt Style Sheets Examples頁面找到很多相關的例子來學習，例如，下面是QSpinBox部件的一段樣式表：
QSpinBox {
padding-right:
15px; /* make room for the arrows */
border-image:
url(:/images/frame.png) 4;
border-width:
3;
}
QSpinBox::up-button
{
subcontrol-origin:
border;
subcontrol-position:
top right; /* position at the top right corner */
width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */
border-image:
url(:/images/spinup.png) 1;
border-width:
1px;
}
QSpinBox::up-button:hover
{
border-image:
url(:/images/spinup_hover.png) 1;
}
QSpinBox::up-button:pressed
{
border-image:
url(:/images/spinup_pressed.png) 1;
}
QSpinBox::up-arrow
{
image: url(:/images/up_arrow.png);
width: 7px;
height: 7px;
}
QSpinBox::up-arrow:disabled,
QSpinBox::up-arrow:off { /* off state when value is max */
image: url(:/images/up_arrow_disabled.png);
}
QSpinBox::down-button
{
subcontrol-origin:
border;
subcontrol-position:
bottom right; /* position at bottom right corner */
width: 16px;
border-image:
url(:/images/spindown.png) 1;
border-width:
1px;
border-top-width:
0;
}
QSpinBox::down-button:hover
{
border-image:
url(:/images/spindown_hover.png) 1;
}
QSpinBox::down-button:pressed
{
border-image:
url(:/images/spindown_pressed.png) 1;
}
QSpinBox::down-arrow
{
image: url(:/images/down_arrow.png);
width: 7px;
height: 7px;
}
QSpinBox::down-arrow:disabled,
QSpinBox::down-arrow:off
{ /* off state when value in min */
image: url(:/images/down_arrow_disabled.png);
}
結語
要想爲軟件設計一個漂亮的界面，需要靈活使用Qt樣式表，不過這需要一定的CSS功底，還需要有美工經驗。這一節只是簡單介紹了下Qt中樣式表的應用，只爲拋磚引玉。大家也可以參考《QtCreator快速入門》第8章的相關內容，裏面還涉及到了換膚、透明窗體、不規矩窗體等內容。