淺談QT中qss樣式表

目錄

一、前言

二、什麼是qss樣式表？

三、qss樣式表内容詳解

1、基本文法

2、樣式表規則

（1）、可以為同一個聲明指定多個選擇器，使用","分隔選擇器

（2）、可以聲明多個屬性，使用";"分隔屬性

3、選擇器說明

4、子控件樣式設定

5、僞狀态

6、優先順序确定

四、常用控件屬性設定

以QPushButton為例

五、qss樣式表的使用

在main函數中的show()之前加入代碼：

六、“換膚”示例

原始版本

 皮膚1

 皮膚2

 皮膚3

 皮膚4

 皮膚5

七、qss樣式表下載下傳、附錄

附錄一：全部僞狀态

附錄二：全部子控件

附錄三：QSS全部屬性設定

一、前言

        本人是今年畢業的一名大學生，作為碼農小白，或是膜拜于代碼大神、部落格大佬，或是想在枯燥的工作生活中找些樂子，或是純粹的想記錄一下自己的成長曆程，突然就萌發了偶爾寫寫部落格的心思，抱有着記錄一下自己在工作中或是空閑時間學習到的一些知識，可能會對一些有需要的人一些啟發或是之後自己如果遇到同樣的問題可以友善的去找到解決方法。作為小白，現在的目标當然就是早日成為一名小牛，好好學習，天天向上。

二、什麼是qss樣式表？

        qss樣式表和css層疊樣式表是差不多的東西，都是用于設定QT程式UI界面中控件的背景圖檔、大小、字型顔色、字型類型、按鈕狀态變化等屬性，美化UI界面，實作界面和程式的分離，可以快速切換皮膚。qss樣式表是一種強大的機制，除了可以通過子類化QStyle實作的功能外，它還允許您自定義小部件的外觀。

三、qss樣式表内容詳解

1、基本文法

selector {
attribute:value
}
/**************************************************************/ 
/* 說明：                                                      */
/* selector：選擇器 通常情況下為控件類名(如:QPushButton)         */
/* {attribute:value}：聲明部分                                 */
/*                   attribute就是屬性，value是指定給該屬性的值  */                        
/* 示例：QPushButton { color:red };                            */
/*        這句話的意思是QPushButton及其子類的前景色是紅色         */
/* 注意：qss樣式表通常不區分大小(color、Color、cOlor...)指的      */
/*       是同一個屬性，但是類名、對象名和Qt屬性名是區分大小的       */
/***************************************************************/ 
           

2、樣式表規則

（1）、可以為同一個聲明指定多個選擇器，使用","分隔選擇器

QPushButton, QLineEdit, QComboBox {
color: red
}
           

（2）、可以聲明多個屬性，使用";"分隔屬性

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

3、選擇器說明

用法	例子	詳解
通配選擇器	*	通配所有的控件
類選擇器	QPushButton	比對QPushButton及其子類
屬性選擇器	QPushButton[flat="false"]	作用于非平面（flat=“false”）的 QPushButton 執行個體
類選擇器	.QPushButton	比對QPushButton的執行個體，但不比對其子類的執行個體。
id選擇器	QPushButton#okButton	比對對象名稱（object name）為okButton的所有QPushButton執行個體。
後代選擇器	QDialog QPushButton	隻比對QDialog中的所有層級的QPushbutton的樣式（這種層級是指qobject樹所表示的層級）
子選擇器	QDialog > QPushButton	隻比對QDialog中的第一層級的QPushbutton的樣式（這種層級是指qobject樹所表示的層級）

4、子控件樣式設定

        對于一個複雜的控件，很有必要去控制這個控件的子控件。比如QComboBox的下拉按鈕和QSpinBox的上下調整大小的箭頭按鈕。選擇器可以包含子控件，這些子控件可以将規則的應用程式限制為特定的小部件子控件。如：

QComboBox::drop-down { 
image: url(dropdown.png) 
}
//指定了下拉按鈕的填充圖檔
           

5、僞狀态

很多選擇器可能包含僞狀态，例如：QPushButton、QCheckBox等等，這些僞狀态表示根據小部件的狀态限制規則的應用。僞狀态出現在選擇器的末尾，中間有一個冒号":"。如：

QPushButton:hover { 
color: white 
} 
//表示當滑鼠懸停時顔色為白色

//僞狀态可以使用感歎号!操作符進行否定。如：

QRadioButton:!hover { 
color: red 
} 
//表示當滑鼠不是懸停時顔色為紅色

//還可以有多個僞狀态一起使用：

QCheckBox:hover:checked { 
color: white 
} 
//表示 當滑鼠懸停 并且 該複選框被選中的時候顔色為白色

QCheckBox:hover, QCheckBox:checked { 
color: white 
} 
//表示當滑鼠懸停或着被選中的時候 顔色為白色
           

6、優先順序确定

QPushButton#okButton { 
color: gray 
}
QPushButton { 
color: red 
}
           

        這兩條規則都會應用到名為okButton的按鈕上，但是他們為同一個屬性設定了不同的顔色，這會有沖突，那麼要解決這樣的沖突就必須考慮到選擇器的特異性(這個詞怎麼了解，我了解為這個特異性為更加特殊，實際上CSS上用權重表示這裡的特異性)，顯然QPushButton#okButton僅僅針對對象名為okButton的控件有效果，而QPushButton卻對所有的QPushButton的執行個體或者是其子類的執行個體有效果，顯然QPushButton#okButton選擇器更加特殊，也就是更具有特異性。是以最終okButton前景色被應用為灰色。如果兩條規則的特異性一樣，那麼就選擇放在後面的那一條。

四、常用控件屬性設定

以QPushButton為例

QPushButton {                
    background-color: #C4E5F0; //元素的背景顔色
    border-width: 2px;         //設定邊框寬度
    border-color: #74B2E5;     //設定邊框顔色
    border-style: solid;       //設定邊框樣式
    border-radius: 5;          //設定圓角邊框
    padding: 3px;              //設定内邊距屬性
    color: #F0F0F0;            //字型顔色設定
    /*min-width: 9ex;*/
   /* min-height: 2.5ex;*/
}
QPushButton:hover {            //滑鼠懸停子狀态
   background-color: #89C1E5;  //元素的背景顔色
}

QPushButton:pressed {           //滑鼠按下子狀态
    padding-left: 5px;          //設定左内邊距
    padding-top: 5px;           //設定上内邊距
    background-color: #6AADD8;  //元素的背景顔色
}
           

五、qss樣式表的使用

在main函數中的show()之前加入代碼：

QFile file("test.qss");
if (file.open(QIODevice::ReadOnly))
{
	QByteArray data = file.readAll();
	qApp->setStyleSheet(data);
}
           

六、“換膚”示例

原始版本

 皮膚1

 皮膚2

 皮膚3

 皮膚4

 皮膚5

七、qss樣式表下載下傳、附錄

        以上的一些qss樣式表大部分都來源于網上，筆者也沒自己去寫qss樣式表，相信看完這篇部落格，讀懂qss樣式表的内容應該不難，筆者寫這篇部落格的目的也有以後如若需要自己寫qss樣式表，可以得到一些資料便于書寫。如若需要以上qss樣式表可留下郵箱，筆者看到了會回複。

參考部落格：

https://blog.csdn.net/qq_34139994/article/details/114537439

https://blog.csdn.net/wei375653972/article/details/86609152?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.control

https://blog.csdn.net/nodeman/article/details/106309936?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.control&spm=1001.2101.3001.4242        

附錄一：全部僞狀态

官方文檔翻譯全部僞狀态

僞狀态	解釋
:active	此狀态在 widget 駐留在活動視窗中時設定
adjoins-item	此狀态在 QTreeView 的 ::branch 與項相鄰時設定
:alternate	當 QAbstractItemView::ternatingRowColors() 設定為 true 時，将為繪制 QAbstractItemView 的行時的每隔一行設定此狀态
:bottom	該項目位于底部。例如，标簽位于底部的 QTabBar
:checked	該項目已選中。例如，QAbstractButton 的選中狀态
:closable	這些項目可以關閉。例如，QDockWidget 打開了 QDockWidget::DockWidgetClosable 功能
:default	該項目為預設值。例如，QMenu 中的預設 QPushButton 或預設操作
:disabled	該項目已禁用
:editable	QComboBox 是可編輯的
:edit-focus	該項具有編輯焦點（請參見 QStyle::State_HasEditFocus）此狀态僅适用于 Qt 擴充應用程式
:enabled	該項目已啟用
:exclusive	該項目是獨占項目組的一部分。例如，獨占 QActionGroup 中的菜單項
:first	該項目是（清單中的）第一個項目。例如，QTabBar 中的第一個頁籤
:flat	這件物品是平的。例如，平面 QPushButton
:floatable	這些項目可以浮動。例如，QDockWidge t打開了 QDockWidget::DockWidgetFloatable 功能
:focus	該項具有輸入焦點
:has-children	該項目具有子項。例如，QTreeView 中具有子項的項
:has-siblings	該項目有同級。例如，QTreeView 中的同級項
:horizontal	該項目具有水準方向
:hover	滑鼠懸停在該項目上
:indeterminate	該項具有不确定狀态。例如，部分選中 QCheckBox 或 QRadioButton
:last	該項是（清單中的）最後一項。例如，QTabBar 中的最後一個頁籤
:left	該項目位于左側。例如，頁籤位于左側的 QTabBar
:maximized	該項目将最大化。例如，最大化的 QMdiSubWindow
:middle	項目在中間（在清單中）。例如，QTabBar 中不在開頭或結尾的制表符
:minimized	該項目被最小化。例如，最小化的 QMdiSubWindow
:movable	物品可以四處移動。例如，QDockWidget 打開了 QDockWidget::DockWidgetMoovable 功能
:no-frame	該項目沒有架構。例如，無架構的 QSpinBox 或 QLineEdit
:non-exclusive	該項是非獨占項組的一部分。例如，非獨占 QActionGroup 中的菜單項
:off	對于可以切換的項目，這适用于處于“關閉”狀态的項目
:on	對于可以切換的項目，這适用于處于“打開”狀态的 widget
:only-one	該項目是（清單中的）唯一項目。例如，QTabBar 中的一個單獨的頁籤
:open	該項目處于打開狀态。例如，QTreeView 中的展開項，或具有打開菜單的 QComboBox 或 QPushButton
:next-selected	選擇下一項（在清單中）。例如，QTabBar 的標明頁籤緊挨着該項
:pressed	正在使用滑鼠按下該項
:previous-selected	選擇上一項（在清單中）。例如，QTabBar 中標明頁籤旁邊的頁籤
:read-only	該項目标記為隻讀或不可編輯。例如，隻讀 QLineEdit 或不可編輯的 QComboBox
:right	該項目位于右側。例如，頁籤位于右側的 QTabBar
:selected	該項目即被選中。例如，QTabBar 中的標明頁籤或 QMenu 中的標明項目
:top	該項目位于頂部。例如，頁籤位于頂部的 QTabBar
:unchecked	該項目處于取消選中狀态
:vertical	該項目具有垂直方向
:window	widget是視窗（即頂層小部件）

附錄二：全部子控件

官方文檔翻譯全部子控件

子控件	說明
::add-line	QScrollBar 添加行的按鈕
::add-page	QScrollBar 的控制柄（滑塊）和添加線之間的區域
::branch	QTreeView 的分支訓示符
::chunk	QProgressBar 的進度塊
::close-button	QDockWidget 或 QTabBar 頁籤的關閉按鈕
::corner	在 QAbstractScrollArea 中兩個滾動條之間的角
::down-arrow	QComboBox、QHeaderView（排序訓示符）、QScrollBar 或 QSpinBox 的向下箭頭
::down-button	QScrollBar 或 QSpinBox 的向下按鈕
::drop-down	QComboBox 的下拉按鈕
::float-button	QDockWidget 的浮動按鈕
::groove	QSlider 的槽
::indicator	QAbstractItemView、QCheckBox、QRadioButton、可點選的 QMenu 項或可點選的 QGroupBox 的訓示器
::handle	QScrollBar、QSplitter 或 QSlider 的搖桿（滑塊）
::icon	QAbstractItemView 或 QMenu 的圖示
::item	QAbstractItemView、QMenuBar、QMenu 或 QStatusBar 的項
::left-arrow	QScrollBar 的左箭頭
::left-corner	QTabWidget 的左角。例如，此控件可用于控制 QTabWidget 中的左角小部件的位置
::menu-arrow	帶有菜單的 QToolButton 的箭頭
::menu-button	QToolButton 的菜單按鈕
::menu-indicator	QPushButton 的菜單訓示器
::right-arrow	QMenu 或 QScrollBar 的右箭頭
::pane	QTabWidget 的窗格（架構）
::right-corner	QTabWidget 的右角。例如，此控件可用于控制 QTabWidget 中右角小部件的位置
::scroller	QMenu 或 QTabBar 的滾動條
::section	QHeaderView 的部件
::separator	QMenu 或 QMainWindow 中的分隔符
::sub-line	QScrollBar 減去行的按鈕
::sub-page	QScrollBar 的控制柄（滑塊）和子行之間的區域
::tab	QTabar 或 QToolBox 的頁籤
::tab-bar	QTabWidget 的頁籤欄。這個子控件的存在隻是為了控制 QTabWidget 中 QTabBar 的位置
::tear	QTabBar 的撕裂訓示器
::tearoff	QMenu 的撕裂訓示器
::text	QAbstractItemView 的文本
::title	QGroupBox 或 QDockWidget 的标題
::up-arrow	QHeaderView（排序訓示符）、QScrollBar 或 QSpinBox 的向上箭頭
::up-button	QSpinBox 的向上按鈕

附錄三：QSS全部屬性設定

QSS背景屬性

屬性	描述
background	在一個聲明中設定所有的背景屬性。
background-attachment	設定背景圖像是否固定或者随着頁面的其餘部分滾動。
background-color	設定元素的背景顔色。
background-image	設定元素的背景圖像。
background-position	設定背景圖像的開始位置。
background-repeat	設定是否及如何重複背景圖像。
background-clip	規定背景的繪制區域。
background-origin	規定背景圖檔的定位區域。
background-size	規定背景圖檔的尺寸。

QSS邊框屬性

屬性	描述
border	在一個聲明中設定所有的邊框屬性。
border-bottom	在一個聲明中設定所有的下邊框屬性。
border-bottom-color	設定下邊框的顔色。
border-bottom-style	設定下邊框的樣式。
border-bottom-width	設定下邊框的寬度。
border-color	設定四條邊框的顔色。
border-left	在一個聲明中設定所有的左邊框屬性。
border-left-color	設定左邊框的顔色。
border-left-style	設定左邊框的樣式。
border-left-width	設定左邊框的寬度。
border-right	在一個聲明中設定所有的右邊框屬性。
border-right-color	設定右邊框的顔色。
border-right-style	設定右邊框的樣式。
border-right-width	設定右邊框的寬度。
border-style	設定四條邊框的樣式。
border-top	在一個聲明中設定所有的上邊框屬性。
border-top-color	設定上邊框的顔色。
border-top-style	設定上邊框的樣式。
border-top-width	設定上邊框的寬度。
border-width	設定四條邊框的寬度。
outline	在一個聲明中設定所有的輪廓屬性。
outline-color	設定輪廓的顔色。
outline-style	設定輪廓的樣式。
outline-width	設定輪廓的寬度。
border-bottom-left-radius	定義邊框左下角的形狀。
border-bottom-right-radius	定義邊框右下角的形狀。
border-image	簡寫屬性，設定所有 border-image-* 屬性。
border-image-outset	規定邊框圖像區域超出邊框的量。
border-image-repeat	圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。
border-image-slice	規定圖像邊框的向内偏移。
border-image-source	規定用作邊框的圖檔。
border-image-width	規定圖檔邊框的寬度。
border-radius	簡寫屬性，設定所有四個 border-*-radius 屬性。
border-top-left-radius	定義邊框左上角的形狀。
border-top-right-radius	定義邊框右下角的形狀。
box-shadow	向方框添加一個或多個陰影。

QSSBox屬性

屬性	描述
overflow-x	如果内容溢出了元素内容區域，是否對内容的左/右邊緣進行裁剪。
overflow-y	如果内容溢出了元素内容區域，是否對内容的上/下邊緣進行裁剪。
overflow-style	規定溢出元素的首選滾動方法。
rotation	圍繞由 rotation-point 屬性定義的點對元素進行旋轉。
rotation-point	定義距離上左邊框邊緣的偏移點。

QSS字型屬性

屬性	描述
font	在一個聲明中設定所有字型屬性。
font-family	規定文本的字型系列。
font-size	規定文本的字型尺寸。
font-size-adjust	為元素規定 aspect 值。
font-stretch	收縮或拉伸目前的字型系列。
font-style	規定文本的字型樣式。
font-variant	規定是否以小型大寫字母的字型顯示文本。
font-weight	規定字型的粗細。

QSS外邊框屬性

屬性	描述
margin	在一個聲明中設定所有外邊距屬性。
margin-bottom	設定元素的下外邊距。
margin-left	設定元素的左外邊距。
margin-right	設定元素的右外邊距。
margin-top	設定元素的上外邊距。

QSS内邊距屬性

屬性	描述
padding	在一個聲明中設定所有内邊距屬性。
padding-bottom	設定元素的下内邊距。
padding-left	設定元素的左内邊距。
padding-right	設定元素的右内邊距。
padding-top	設定元素的上内邊距。

QSS定位屬性

屬性	描述
bottom	設定定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
clear	規定元素的哪一側不允許其他浮動元素。
clip	剪裁絕對定位元素。
cursor	規定要顯示的光标的類型（形狀）。
display	規定元素應該生成的框的類型。
float	規定框是否應該浮動。
left	設定定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
overflow	規定當内容溢出元素框時發生的事情。
position	規定元素的定位類型。
right	設定定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
top	設定定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
vertical-align	設定元素的垂直對齊方式。
visibility	規定元素是否可見。
z-index	設定元素的堆疊順序。

QSS文本屬性

屬性	描述
color	設定文本的顔色。
direction	規定文本的方向 / 書寫方向。
letter-spacing	設定字元間距。
line-height	設定行高。
text-align	規定文本的水準對齊方式。
text-decoration	規定添加到文本的裝飾效果。
text-indent	規定文本塊首行的縮進。
text-shadow	規定添加到文本的陰影效果。
text-transform	控制文本的大小寫。
unicode-bidi	設定文本方向。
white-space	規定如何處理元素中的空白。
word-spacing	設定單詞間距。
hanging-punctuation	規定标點字元是否位于線框之外。
punctuation-trim	規定是否對标點字元進行修剪。
text-align-last	設定如何對齊最後一行或緊挨着強制換行符之前的行。
text-emphasis	向元素的文本應用重點标記以及重點标記的前景色。
text-justify	規定當 text-align 設定為 "justify" 時所使用的對齊方法。
text-outline	規定文本的輪廓。
text-overflow	規定當文本溢出包含元素時發生的事情。
text-shadow	向文本添加陰影。
text-wrap	規定文本的換行規則。
word-break	規定非中日韓文本的換行規則。
word-wrap	允許對長的不可分割的單詞進行分割并換行到下一行。