級聯樣式表 (CSS) 包含應用於網頁中的元素的樣式規則。CSS樣式定義元素的顯示方式以及元素在頁中的放置位置。可以創建一個通用規則，只要 Web瀏覽器遇到一個元素實例，或遇到一個分配給某個特定樣式類的元素，該規則就立刻應用屬性，而不是將屬性逐個分配給頁中的每個元素。
CSS 樣式可以通過內聯方式放置在單個 HTML元素內，也可以在網頁 head部分的 style塊內加以分組，或從單獨的樣式表中導入。如果樣式是在單獨的樣式表中創建的，則可以將多個網頁鏈接到該樣式表，從而爲整個網站提供一個通用的外觀。如果使用
CSS設置 Web控件的樣式，則應使用 CssClass屬性來定義要與控件或控件元素關聯的 CSS類名，然後在樣式表中爲這些控件或控件元素指定樣式時引用該類名。
下面將通過幾個例子來介紹一下怎樣使用Qt 中的部件類型設計。自定義的前臺背景與後臺背景的顏色：
如果需要樣一個文本編輯器的背景變爲黃色， 下面是代碼行：
qApp->setStyleSheet("QLineEdit { background-color: yellow }");
針對一個對話框的內容中使用QLineEdit 以及QLineEdit 的子類的背景都變成黃色，下面是代碼：
myDialog->setStyleSheet("QLineEdit { background-color: yellow }");
如果只需要制定一個QLineEdit 的內容，將使用QObject::setObjectName()下面是一個實例：
myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");
同時也可以針對每一個指定的部件做直接的類型設置， 下面是一個實例：
nameEdit->setStyleSheet("background-color: yellow");
爲了做一個鮮明的對比， 將要爲文本設置合適的顏色。
nameEdit->setStyleSheet("color: blue; background-color: yellow");
當然最好的辦法還有針對選擇的文本來進行設置， 下面設置了一個選擇文本的類型屬性：
nameEdit->setStyleSheet("color: blue;"
"background-color: yellow;"
"selection-color: yellow;"
"selection-background-color: blue;");
在有一些情況下，不需要用戶參與，而有軟件設計人員來自己制定樣式，即使這些是有違審美角度。 下面就從應用程序開發角度來設計樣式。
*[mandatoryField="true"] { background-color: yellow }
上面的意思是一些強制的區域是需要用Qt 的屬性管理來強制設置成爲黃色的背景。
這樣一些強制的部件，將需要通過函數來設置當前的屬性已經被強制設置，
下面是實現的代碼：
QLineEdit *nameEdit = new QLineEdit(this);
nameEdit->setProperty("mandatoryField", true);
QLineEdit *emailEdit = new QLineEdit(this);
emailEdit->setProperty("mandatoryField", true);
QSpinBox *ageSpinBox = new QSpinBox(this);
ageSpinBox->setProperty("mandatoryField", true);
QPushButton：
下面我們將通過一個按鈕的部件來設置屬性樣式：
首先來設置一下樣式：
QPushButton#evilButton { background-color: red }
說明設置的當前的按鈕爲紅色。 作爲一個flat平滑的按鈕時沒有邊界的。下面是來改進一下對邊界的設置。
QPushButton#evilButton {
background-color: red;
border-style: outset;
border-width: 2px;
border-color: beige;
}
在這裏設置了一個邊界的類型與邊界的寬度。 這樣看上去就好多了，文檔中無法展現圖片，有興趣可以去Qt的變成環境當中去嘗試。即使這樣設計，按鈕看上去也是顯得混亂，與主部件沒有辦法分開。首先是在邊界設置出一個空間出來，並且強制的制定最小寬度，與環繞的弧度，並且提供一個按鈕的字體設置，似的按鈕看上去比較好看。
QPushButton#evilButton {
background-color: red;
border-style: outset;
border-width: 2px;
border-radius: 10px;
border-color: beige;
font: bold 14px;
min-width: 10em;
padding: 6px;
}
如此這樣當我們點擊按鈕的時候按鈕也不會發生什麼樣的深刻變化。 所以就需要指定一個合適的背景顏色與不一樣的邊界類型。
QPushButton#evilButton {
background-color: red;
border-style: outset;
border-width: 2px;
border-radius: 10px;
border-color: beige;
font: bold 14px;
min-width: 10em;
padding: 6px;
}
QPushButton#evilButton:pressed {
background-color: rgb(224, 0, 0);
border-style: inset;
}
指定QPushButton 菜單指示器的子控制
子控提供了訪問子子元素的功能，例如通常的時候一個按鈕將會管理一個菜單，
QPushButton#evilButton::menu-indicator {
image: url(myindicator.png);
}
同時如果美化一個按鈕的話， 那麼將可以通過定位符來確定美化按鈕的路徑，通常可以是一個圖片。
QPushButton::menu-indicator {
image: url(myindicator.png);
subcontrol-position: right center;
subcontrol-origin: padding;
left: -2px;
}
經過以上的設置那麼QPushButton將會在方格的中心顯示一個myindicator.png的圖片。
定製按鈕
border: 2px solid #8f8f91;
border-radius: 6px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #f6f7fa, stop: 1 #dadbde);
min-width: 80px;
}
QPushButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}
QPushButton:flat {
border: none; /*
沒有邊框的按鈕 */
}
QPushButton:default {
border-color: navy; /*
使得按鈕顯示變得更加突出 */
}
QPushButton:open { /* when the button has its menu open */
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}
QPushButton::menu-indicator {
image: url(menu_indicator.png);
subcontrol-origin: padding;
subcontrol-position: bottom right;
}
QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open {
position: relative;
top: 2px; left: 2px; /* shift the arrow by 2 px */
}
QSlider：
下面的橫向的slider
QSlider::groove:horizontal {
border: 1px solid #999999;
height: 8px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
margin: 2px 0;
}
QSlider::handle:horizontal {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
border: 1px solid #5c5c5c;
width: 18px;
margin: -2px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
border-radius: 3px;
}
QSlider::groove:vertical {
background: red;
position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */
left: 4px; right: 4px;
}
QSlider::handle:vertical {
height: 10px;
background: green;
margin: 0 -4px; /* expand outside the groove */
}
QSlider::add-page:vertical {
background: white;
}
QSlider::sub-page:vertical {
background: pink;
}
QSizeGrip：
一般講通過一個圖片進行設置 ：
QSizeGrip {
image: url(:/images/sizegrip.png);
width: 16px;
height: 16px;
}
定製QSplitter：
QSplitter::handle {
image: url(images/splitter.png);
}
QSplitter::handle:horizontal {
height: 2px;
}
QSplitter::handle:vertical {
width: 2px;
}
QStatusBar：
將提供一個狀態欄的邊框與項目的定製：
QStatusBar {
background: brown;
}
QStatusBar::item {
border: 1px solid red;
border-radius: 3px;
}
QTabWidget與QTabBar：
QTabWidget::pane { /* The tab widget frame */
border-top: 2px solid #C2C7CB;
}
QTabWidget::tab-bar { /* move to the right by 5px */
left: 5px;
}
/* Style the tab using the tab sub-control. Note that
it reads QTabBar _not_ QTabWidget */
QTabBar::tab { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border: 2px solid #C4C4C3;
border-bottom-color: #C2C7CB; /* same as the pane color */
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
QTabBar::tab:selected {
border-color: #9B9B9B;
border-bottom-color: #C2C7CB; /* same as pane color */
}
QTabBar::tab:!selected {
margin-top: 2px; /* make non-selected tabs look smaller */
}
QTabWidget::pane { /* The tab widget frame */
border-top: 2px solid #C2C7CB;
}
QTabWidget::tab-bar {
left: 5px; /* move to the right by 5px */
}
/* Style the tab using the tab sub-control. Note that
it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border: 2px solid #C4C4C3;
border-bottom-color: #C2C7CB; /* same as the pane color */
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
QTabBar::tab:selected {
border-color: #9B9B9B;
border-bottom-color: #C2C7CB; /* same as pane color */
}
QTabBar::tab:!selected {
margin-top: 2px; /* make non-selected tabs look smaller */
}
/* make use of negative margins for overlapping tabs */
QTabBar::tab:selected {
/* expand/overlap to the left and right by 4px */
margin-left: -4px;
margin-right: -4px;
}
QTabBar::tab:first:selected {
margin-left: 0; /* the first selected tab has nothing to overlap with on the left */
}
QTabBar::tab:last:selected {
margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
}
QTabBar::tab:only-one {
margin: 0; /* 如果只有一個頁面, 我們不能重疊邊緣 */
}
QTabWidget::pane { /* The tab widget frame */ border-top: 2px solid #C2C7CB;
position: absolute;
top: -0.5em;
}
QTabWidget::tab-bar {
alignment: center;
}
/* Style the tab using the tab sub-control. Note that
it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border: 2px solid #C4C4C3;
border-bottom-color: #C2C7CB; /* same as the pane color */
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
QTabBar::tab:selected {
border-color: #9B9B9B;
border-bottom-color: #C2C7CB; /* same as pane color */
}
定製 QTableWidget
下面將設置QTableWidget 的粉色選中區域，與白色背景。
QTableWidget {
selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5,
stop: 0 #FF92BB, stop: 1 white);
}
QTableWidget QTableCornerButton::section {
background: red;
border: 2px outset red;
}
QToolBox：
下面是對工具條的一些選項進行定製
QToolBar {
background: red;
spacing: 3px; /* spacing between items in the tool bar */
}
QToolBar::handle {
image: url(handle.png); // 可以設置工具條的背景圖片
}
定製 QToolBox
將使用到 tab 的子控部分
QToolBox::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border-radius: 5px;
color: darkgray;
}
QToolBox::tab:selected { /* italicize selected tabs */
font: italic;
color: white;
}
定製 QToolButton
QToolButton { /* all types of tool button */
border: 2px solid #8f8f91;
border-radius: 6px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #f6f7fa, stop: 1 #dadbde);
}
QToolButton[popupMode="1"] { /* only for MenuButtonPopup */
padding-right: 20px; /* make way for the popup button */
}
QToolButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}
/* the subcontrols below are used only in the MenuButtonPopup mode */
QToolButton::menu-button {
border: 2px solid gray;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
/* 16px width + 4px for border = 20px allocated above */
width: 16px;
}
QToolButton::menu-arrow {
image: url(downarrow.png);
}
QToolButton::menu-arrow:open {
top: 1px; left: 1px; /* shift it a bit */
}
QTreeView：
QTreeView::branch {
background: palette(base);
}
QTreeView::branch:has-siblings:!adjoins-item {
background: cyan;
}
QTreeView::branch:has-siblings:adjoins-item {
background: red;
}
QTreeView::branch:!has-children:!has-siblings:adjoins-item {
background: blue;
}
QTreeView::branch:closed:has-children:has-siblings {
background: pink;
}
QTreeView::branch:has-children:!has-siblings:closed {
background: gray;
}
QTreeView::branch:open:has-children:has-siblings {
background: magenta;
}
QTreeView::branch:open:has-children:!has-siblings {
background: green;
}