一：樣式表的僞狀態
部件的外觀可以按照用戶界面元素狀態的不同來分別定義，這在樣式表中被稱爲“僞狀態”。例如，如果我們想在一個push button在被按下的時候具有sunken的外觀，我們可以指定一個叫做 :pressed 的僞狀態。
//設置按鈕按下後向下凹陷的感覺
QPushButton {
border: 2px outset green;
background: gray;
}
QPushButton:pressed {
border-style: inset;
}
下面是可用的僞狀態列表：
表 1. 僞狀態列表
僞狀態 描述
:checked button部件被選中
:disabled 部件被禁用
:enabled 部件被啓用
:focus 部件獲得焦點
:hover 鼠標位於部件上
:indeterminate checkbox或radiobutton被部分選中
:off 部件可以切換，且處於off狀態
:on 部件可以切換，且處於on狀態
:pressed 部件被鼠標按下
:unchecked button部件未被選中僞狀態
二,子部件的樣式設置
許多部件都包含有子元素，這些元素可以稱爲“子部件”。Spin box的上下箭頭就是子部件最好的例子。
子部件可以通過::來指定，例如QDateTimeEdit::up-button。定義子部件的樣式與定義部件非常相似，它們遵循前面提到的方箱模型 （即它們可以擁有自己的邊框、背景等），並且也可以和僞狀態聯合使用（例如QSpinBox::up-button:hover）。
下表列出了可用的子部件類型：
表 2. 子部件列表
子部件 描述
::down-arrow combo box或spin box的下拉箭頭
::down-button spin box的向下按鈕
::drop-down combo box的下拉箭頭
::indicator checkbox、radio button或可選擇group box的指示器
::item menu、menu bar或status bar的子項目
::menu-indicator push button的菜單指示器
::title group box的標題
::up-arrow spin box的向上箭頭
::up-button spin box的向上按鈕
通過指定subcontrol-position和subcontrol-origin屬性，子部件可以被放置在部件箱體內的任何位置。並且，子部件的位 置還可以使用相對或絕對的方式進一步的調整。具體選擇何種調整方式取決於子部件具有固定的大小，還是會隨着父部件而變化。
三,方箱模型
當使用樣式表時，每個組件會被當作有四個同心矩形：空白矩形、邊界矩形、襯底矩形、內容矩形的盒子。
1、盒子模型
四個同心矩形如下所示：
margin, border-width,padding屬性默認都是0。此時四個矩形完全相同。
可以使用background-image屬性指定組件的背景。默認，background-image只會在邊界矩形內被繪製，使用background-clip屬性可以修改。使用background-repeat屬性和background-origin屬性來控制背景圖片的重複和來源。
background-image屬性不會縮放組件的大小。爲了提供隨着組件大小縮放的皮膚或背景，必須使用border-image屬性。由於border-image屬性提供了一個可選擇的背景，當指定border-image屬性時，不會要求指定background-image屬性。當background-image屬性和border-image屬性都被指定時，border-image屬性會被繪製在background-image屬性之上。
此外，image屬性可以用於在border-image屬性上繪製一幅圖像。當組件的大小與image的大小不匹配時，指定的image不會伸縮，對齊方式可以使用image-position屬性設置。與background-image屬性和border-image屬性不同，image屬性可以指定SVG，使image根據組件的大小自動縮放。
渲染規則的步驟如下：
A、爲整個渲染操作設置clip（border-radius）
B、繪製背景（background-image）
C、繪製邊界（border-image，border）
D、繪製覆蓋圖像（image）
四，相對定位
相對定位適合於子部件具有固定大小的情形（通過width和height指定子部件大小）。使用這種方式，子部件可以以相對於subcontrol-
position和 subcontrol-origin屬性定義的原始位置進行移動調整。使用left屬性可以把子部件向右移，top屬性可以把子部件向左移。
例如：
QPushButton::menu-indicator {
image: url(menu_indicator.png);
width: 13px;
height: 13px;
subcontrol-origin: padding;
subcontrol-position: bottom right;
}
當按下按鈕時，我們可以把菜單指示器從原來的位置向右下方移動幾個像素來模擬按鈕按下的狀態。
QPushButton::menu-indicator:pressed {
position: relative;
top: 2px;
left: 2px;
}
五，絕對定位
絕對定位適合於子部件的位置隨父部件的變化而變的情形。與前面的例子相同，subcontrol-origin定義了父部件箱體的參考矩形。子部件的矩形區域則可以隨後通過相對於這個參考矩形四邊的偏移量來定義。
QPushButton::menu-indicator {
border: 2px solid red;
subcontrol-origin: padding;
position: absolute;
top: 2px;
right: 2px;
bottom: 2px;
left: 40px;
}
對於寬度或高度固定的子部件，subcontrol-position被用來說明其在subcontrol-origin指定矩形內的對其方式：
QPushButton::menu-indicator {
image: url(menu_indicator.png);
width: 13px;
subcontrol-origin: padding;
subcontrol-position: bottom right;
position: absolute;
top: 2px;
bottom: 2px;
right: 2px;
}
五，常用設置總結，以按鈕爲例
1,設置按鈕圓角：QPushButton{border:2px groove;boder-radius:7px;};
2,設置按下凹陷的感覺：QPushButton:pressed{padding-left:3px;padding-top:3px;}; //襯底左下移
或者：QPushButton:pressed{border:inset;};
3,設置按鈕的背景色QPushButton{background:red};
設置前景色：color:yellow; 設置背景圖片：border-image:url("");點擊打開鏈接
4,設置按鈕透明：background:transparent;
5,設置進度條的背景色：
QProgressBar::chunk{
//設置進度塊的背景顏色
background: #B22222;
}
樣式表使用精講