qss样式表笔记大全(一)：qss名词解析（包含相关示例）
**
前話
**
qss可以說是qt版本的css，語法類似但也存在不同點，建議閱讀本文檔之前先直接百度以下學習qss的基本使用方式。
qss主要是用于qt對ui界面的美化。
實踐方法：直接打開qmake目錄下的qtdesigner，新建控件后，右鍵點擊設置樣式。
該筆記主要參考《最全Qt樣式表使用說明》，學習實踐以及做項目過程中重新整理筆記，最終目標為形成一套qss樣式表大全，將隨著時間持續更新。
**
閱讀方式
**
本筆記可當作手冊，也可以當作學習教材，參考資料。
先了解基本的“名詞解析”后，可按照以下三個方式閱讀：
方式一：詳細查看示例，按照示例，一步一步閱讀。
方式二：需要設置某個類qss時，根據索引找，查看詳細示例。
方式三：直接閱讀所有樣式，適合系統的查漏補缺學習。
**
名詞解析
**
**
選擇器（selector）
**
選擇特定的類，如示例1中的QPushButton#pushButton_shutdown，選擇器的選擇方式有七種，如下表：
**
示例：QPusuButton使用選擇器
**
QPushButton#pushButton_shutdown {background-color: rgb(0, 255, 0, 100); // rgb可使用rgba } QPushButton#pushButton_shutdown:hover {background-color: rgb(0, 255, 0); // rgb可使用rgb，默認a為255 } QPushButton#pushButton_shutdown:pressed {background-color: red; // 可使用預知的關鍵字 } QPushButton#pushButton_shutdown:checked {background-color: red; // 可使用預知的關鍵字 }
**
子控件（sub-control）
**
子控件（同輔助選擇器），對于復雜的控件有必要對其子控件窗口進行控制，不同的控件類包含不同的子控件，如示例2中的QCheckBox中包含indicator子控件。
**
示例：QCheckBox包含sub-control
**
QCheckBox#checkBox::indicator{width:10px;height:10px;background-color: red; }**
狀態選擇器（pseudo-states）
**
狀態選擇器，可根據不同控件的不同狀態對窗口進行控制，如”hover”表示鼠標放上時的狀態，”pressed”表示鼠標保持按下時的狀態，可根據狀態設置不同的外觀，如示例1的QPushbutton的三種狀態。
**
屬性（property）
**
屬性，是一個窗口部件所固有的特征，每一個類型的窗口控件都會有屬于他們自己的屬性，如width，height（輔助選擇器才有），color等等，定制控件的不同外觀。注意：屬性是使用邏輯否(!)操作符，如!hover，是鼠標未放在上面的其他狀態。
**
屬性值（value）
**
屬性值，跟在每一個屬性后面有一個值，可以是bool，int，10px，red，rgb(0,0,0)等等，根據屬性的不同，屬性值的類型不同，通過修改指定控件的指定屬性的屬性值來實現不同的效果，如示例1：background-color，實例2：width、height、background-color。
**
盒模型（box model）
**
盒模型，包含了4個影響布局的矩形，如下圖：
content rectangle：繪制窗口部件的內容的區域，如文字，圖片。
padding rectangle：包圍content rectangle，由padding屬性指定填充操作，主要是窗口部件內容與邊緣線（border）之間的空隙，由top，right，bottom和left設置他的大小，缺省為0。
border rectangle：包圍padding rectangle，為邊界預留空間，可認為是窗口的外框線。
margin rectangle：最外面的矩形，主要是負責與其他窗口部件間的距離。
注意：若都沒有指定，缺省是四個重合在一起。
**
角弧度（radius）
**
窗口部件4個角弧度，設置radius設置角的弧度，如border-radius：4px。
**
前景色（color）
**
窗口部件的前景色用戶繪制窗口部件上面的文本，由color設置。
**
背景色（背景圖片）
**
窗口部件背景色，用于填充矩形，可通過background-color屬性設置。當需要使用圖片時，可使用background-image屬性，指定資源控制，背景圖片在盒模式區域的對齊和平鋪方式可通過background-position和background-repeadr屬性指定。注意：筆者設置背景圖一般直接使用border-image，該屬性缺省是缺省是進行平鋪和拉伸的。
**
九宮格（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 bottomright [repeat|no-repeat repeate|no-repeat];
berder-width: top left bottom right;
技巧：這里筆者提供一個小技巧，可先僅使用border-image: url top leftbottom right來確認邊界，如下表的label_2。
**
示例：QLabel使用九宮格
**
效果
**
漸變色（Gradient）
**
線性漸變（qlineargradient）：兩點連成的線，線上設置不同顏色，位置范圍[0,1]，參考示例。
圓心輻射漸變（qradialgradient）：從圓心開始向外輻射，圓心屬性為cx，cy，半徑為radius，fx是stop為0時相對半徑范圍的位置，參考示例。
圓心角度漸變（qconicalgradient）：從圓心開始，以x軸為0°逆時鐘轉，圓心屬性為cx，cy，
示例：QPushButton使用qlineargradient線性漸變色
**
示例：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)); }總結
以上是生活随笔為你收集整理的qss样式表笔记大全(一)：qss名词解析（包含相关示例）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： QT乱码总结9.编码测试和总结四
- 下一篇： 《qss样式表笔记大全(二)：可设置样式