学习QSS样式表
文章目錄
- 一、 什么是QSS
- 二、輔助工具
- 三、Qt樣式表設置函數：setStyleSheet
- 四、Qss選擇器
- 1、通用選擇器
- 2、類型選擇器
- 3、類選擇器
- 4、ID選擇器
- 5、后代選擇器
- 6、子元素選擇器
- 7、屬性選擇器
- 8、并集選擇器
- 9、子控件選擇器
- 10、偽類選擇器
- 11、選擇器的匹配規則
- 五、QSS常用屬性
- 1、Qss背景屬性(Background)
- 2、QSS邊框屬性(Border和Outline)
- 3、Box屬性
- 4、QSS字體屬性(Font)
- 5、QSS外邊距屬性(Margin)
- 6、QSS內邊距屬性(Padding)
- 7、QSS 位屬性(Positioning)
- 8、QSS文本屬性(Text)
- 9、 顏色
- 10、字體名：
- 六、總結
本篇介紹什么是樣式表，討論如何使用Qt樣式表Qss修改應用程序外觀，并通過實例進行講解。
了解HTML的同學都知道，一般在HTML中我們把樣式表叫做CSS，在Qt中我們稱之為QSS。QSS和CSS并不完全等同，語法完全類似，定義上存在一些差別。
一、 什么是QSS
QSS是Qt程序界面中用來設置控件的背景圖片、大小、字體顏色、字體類型、按鈕狀態變化等屬性，用于美化UI界面。實現界面和程序的分離，快速切換皮膚。
QSS最大的優點就是簡單便捷，我們可以通過它快速實現應用程序的外觀界面。
QSS官方：Qt Style Sheets Reference | Qt Widgets 5.15.8
CSS參考手冊：CSS 參考手冊
二、輔助工具
樣式編輯器，源碼地址：https://github.com/hustlei/QssStylesheetEditor，也可以直接去網上下載。
皮膚生成器，源碼地址：https://github.com/satchelwu/QSS-Skin-Builder
素材庫，阿里矢量圖：iconfont-阿里巴巴矢量圖標庫
三、Qt樣式表設置函數：setStyleSheet
方式一：
btn1->setStyleSheet("QPushButton{color:red}"); //設定前景顏色，就是字體顏色btn1->setStyleSheet("QPushButton{background:yellow}"); //設定背景顏色為紅色方式二：
QFile file(":/qss/main.qss"); file.open(QFile::ReadOnly); QTextStream filetext(&file); QString stylesheet = filetext.readAll(); this->setStyleSheet(stylesheet); file.close();直接在界面添加樣式表：
四、Qss選擇器
1、通用選擇器
通用選擇器又叫通配符選擇器；
格式：
通用選擇器用（*）來表示，它表示匹配程序中所有的widget。
注意點：由于通用選擇器會匹配所有的widgets，效率較低，因此應該盡量減少或者不用
一般用法：通用選擇器一般用來給應用程序設置統一的字體，例如：
這條語句表示將程序中所有widget的字體大小都設置為20px大小，字體采用微軟雅黑。
2、類型選擇器
格式：
className { attribute: value; }類名即Widget類名，由QObject::metaObject()::className獲取，類型選擇器匹配所有該類以及該類的派生類的對象，例如：
QPushButton {color: blue; }這條語句表示，程序中所有的QPushButton類和它的派生類的對象，它們的前景色（即文字顏色）被設置為藍色。
注意點：Qt樣式表使用widget的QObject::className()來決定何時應用類型選擇器。當自定義控件在命令空間之中（或它是一個嵌套類），QObject::className()會返回（::），這與子控件選擇器相沖突，為了解決這個問題，當為命名空間中widget使用類型選擇器時，我們必須將"::“替換成”–"，例如：
一般用法：類型選擇器會匹配所有該類以及該類的派生類的對象，所以我們在程序中，有時為了統一一些具有相似性的控件的樣式，可以使用類型選擇器，如，我們想要為QSpinBox，QDoubleSpinBon，QDateTimeEdit，QDateEdit，QDataEdit等這些編輯框的控件設置一些相同的樣式，因為它們都是QAbstractSpinBox類的派生類，因此可以如下寫：
QAbstractSpinBox {min-height: 30px;max_height: 30px;border-width: 1px;rder-style: solid;order-color: gray;padding: 0px; }3、類選擇器
格式：
.className {attribute: value; }這里的類名與類型選擇器中的類名一樣，不同的是，類選擇器的類名前面有一個（.），這種選擇器只會匹配該類的所有對象，而不會匹配其派生類的對象。例如：
.QPushButton {color: blue; }一般用法：類選擇器提供了一種匹配該類的對象但不會匹配派生類的方法，通常用來特例化擁有派生類的類對象，但不僅限于此。例如在應用程序中，使用QFrame作為容器widget，此時想要對它設置一些樣式，但又不想影響它的子類對象（QLable、QAbstractScrollArea等等），那么就可以使用類選擇器給所有的QFrame設置相同的樣式，例如：
.QFrame {padding: 15px 25px; }4、ID選擇器
格式：
#ID { attribute: value; }這里的ID指的是objectName，每個QObject類及其派生類都有一個屬性，“#”+objectName構成了ID選擇器，它匹配所有objectName為ID選擇器所指定的名稱的對象，為其設置樣式，例如：
#button_1 {color: red; }注意點：
Qt官方給出的ID選擇器的格式為:
className#ID {attribute: value; }但實際上不加類名也是可以的（加了類名的ID選擇器在CSS中被稱為交集選擇器），在正式開發中，還是建議加上類名，因為這樣可以看出這個ID選擇器所匹配的對象的類型，有利于提高閱讀性。
基于以上特點，我們在設置objectName時，一般使用下劃線"_"連接的多個單詞表明此對象的功能。
一般用法：ID選擇器一般用于比較特殊的控件設置樣式，例如在應用程序的某個頁面中，需要突出一個重要的按鈕，那么此時我們可以給這個按鈕設置一個獨特的樣式用以提醒用戶，如：
QPushButton#settings_popup_fileDialog_button {min-height: 31px;min-width: 70px;border: 1px solid black;color: #FOFOFO;min-height: 10px;border-radius: 3px;background: qlineargradient(spread: pad, x1:0,y1:0,x2:0,y2:1,stop:0 #454648,stop:1 #7A7A7A); }5、后代選擇器
格式：
selector1 selector2 { attribute: velue; }這個選擇器表示：在選擇器1匹配的所有對象中，找到選擇器2匹配的所有后代對象，并給它們設置樣式。
注意點：
selector1 selector2 … selectorN { attribute: velue; }
一般用法：后代選擇器一般用于指定類的后代的樣式，例如在我的應用程序中，有很多相似的對話框，它們中包含一些樣式相同的按鈕，那么我可以使用后代選擇器為它們指定樣式，例如：
6、子元素選擇器
格式：
selector1>selector2 { attribute: value; }子元素選擇器表示找到指定選擇器所匹配的對象中的所有特定直接子元素然后設置屬性，即找到選擇器1匹配到的對象中的被選擇器2匹配到的直接子元素然后設置屬性。
注意點：
比如我只想選中QGroupBox中的QPushButton， 那么我可以寫成：
QWidget>QPushButoon{ color:red; } ① 也可以寫成
QGroupBox>QPushButton{ color: red; } ②
這是因為QGroupBox是QWidget的派生類，類型選擇器QWidget會選中所有它的派生類對象，這些對象中包括QGroupBox，因此寫法①會將所有的QPushButton的前景色設置為紅色。
鑒于此種情況，在使用子元素選擇器時，使用類選擇器替代類型選擇器。
一般用法： 子元素選擇器一般用于一些特定布局條件中的控件，例如，我想給直接布局在QGroupBox的QCheckBox設置一些特定屬性，那么可以這么做：
.QGroupBox>.QCheckBox {color: blue; }7、屬性選擇器
格式：
[attribute=value]{ attribute: value; } [attribute|=value]{ attribute: value; } [attribute~=value]{ attribute: value; }attribute=value表示匹配有特定屬性attribute，并且值為value的所有控件，然后設置樣式；
attribute|=value表示匹配有特定屬性attribute，并且值以value開頭的所有控件，然后設置樣式；
attribute~=value表示匹配有特定屬性attribute，并且值包含value的所有控件，然后設置樣式。
注意點：
1、 attribute|=value表示attribute屬性的值以value開頭，無論value后面還有沒有值，或者value后面是什么，均能匹配到，例如：
這表示將objectName屬性以button開頭的所有控件的前景色設置為紅色。
2、 attribute~=value表示attribute屬性的值中包含value，這里要注意的是value必須是獨立的單詞，也就是包含value并且value是被空格隔開的，例如：
在代碼中，設置的objectName的語句為：
btn1->setObjectName("button123"); btn2->setObjectName("abc button 2");結果只會匹配到btn2所指的對象
3、官方文檔的解釋：通常情況下，這里的屬性指的是，使用Q_PROPERTY宏聲明的屬性，并且屬性類型要受QVariant::toString()支持。
這個選擇器類型也可以用來判斷動態屬性，要了解更多使用自定義動態屬性的細節，請參考使用自定義動態屬性。
處理使用=，還可以使用~=來判斷一個QStringList中是否包含給定的QString。
警告：如果在設置了樣式表后，相應的屬性值發生率改變（如flat變成了"true"），則有必要重新加載樣式表，一個有效的方法是，取消樣式表，再重新設置一次，下面的代碼是其中的一種方式：
一般用法： 屬性選擇器一般不常用，如果要用，可以參照官方文檔的方法使用
8、并集選擇器
格式：
selector1,selector2,selector3{ attribute: value; }并集選擇器表示，將每個單獨選擇器匹配到的控件放在同一結果集中，并給結果集中的每個控件都設置聲明語句中的樣式。
注意點：
一般用法： 主要用于給具有相同屬性并且外觀相似的控件設置樣式，例如：
.QLineEdit,.QComboBox {border: 1px solid gray;background-color: white; }9、子控件選擇器
格式：
類型選擇器::子控件{ 屬性: 值; } 類選擇器::子控件{ 屬性: 值; }表示對類型選擇器或類選擇器指定的所有控件的子控件設置樣式；
Qt官方說明：
為了樣式化你的復雜widget，很有必要使用widget的subcontrol，比如QComboBox的drop-down部分或者是QSpinBox的上和下箭頭。選擇器也許會包含subcontrols用于限制widget的subcontrols，例如：
上述規則樣式話所有QComboBox的drop-down部分，雖然雙冒號(::)讓人聯想到CSS3的偽元素語法，但是Qt的Sub-Controls跟它是不一樣的。
Sub-Control始終相對于另一個元素來定義一個參考元素。這個參考元素可以是一個Widget又或者是另一個Sub-Control。例如，QComboBox的::drop-down默認被放置于QComboBox的Padding rectangle（盒子模型）的右上角。::drop-down默認會被放置于另一個::drop-down Sub-Control的中心。查看可樣式化的Widget列表以了解很多使用Sub-Control來樣式化Widget和初始化其位置的內容。
源rectangle可以使用subcontrol-origin來改變。舉個例子，如果我們想要把drop-down方式于QComboBox的margin rectangle而不是默認的Padding rectangle，我們可以像下面這樣指定：
drop-down在Margin rectangle內的排列方式可以由subcontrol-position來改變。
width和height屬性可以用來控制Sub-Control的size。需要注意的是，設置了image就隱式的設置了Sub-Control的size了。
相對定位方案（position:relative），允許Sub-Control的位置從它的初始化位置作出偏移。舉個例子，當QComboBox的drop-down按鈕被pressed時，我們也許想要那個箭頭作出位移以顯示一種"pressed"的效果，為了達到目標，我們可以像下面那樣指定：
絕對定位方案（position:absolute），使得Sub-Control的position和size基于其參考元素而改變。
一旦定位，它們將會與widget同等對待并且使用盒子模型來樣式化。
查看Sub-Control列表以了解哪些sub-control是被支持的，并且可以查看自定義QPushButton的菜單指示器Sub-Control來了解一個實際的使用例子。
注意：像QComboBox和QScrollBar這樣的復雜部件，如果sub-control的一項屬性是自定義的，那么其他所有的屬性跟sub-control也都應該自定義。
10、偽類選擇器
格式：
類型選擇器:狀態{ 屬性: 值; } 類選擇器:狀態{ 屬性: 值; }表示對類型選擇器或類選擇器指定的所有控件設置它在指定狀態的樣式。
Qt官方說明：
選擇器也許會包含基于widget的state的程序限制規則的偽狀態。偽狀態以冒號(:)作為分隔緊跟著偽選擇器。舉個例子，下面的規則在鼠標懸浮在QPushButton的上方時生效：
偽狀態可以使用感嘆號進行取反，下面一條規則在鼠標沒有懸浮在QRadioButton上方時生效
QRadioButton:!hover{ color: red }偽狀態可以鏈接，在這樣的情況下，隱式地包含了邏輯與。舉個例子，下面的一條規則在鼠標懸浮到一個已check的QCheckBox上時生效：
QCheckBox:hover:checked { color: white }偽轉態的取反也可以出現在偽狀態鏈匯總，舉個例子，下面的規則在鼠標懸浮到一個沒有被press的QPushButton上時生效：
QPushButton:hover:!pressed { color: blue }如果有需要，可以使用逗號來表示邏輯或，即并集選擇器
QCheckBox:hover,QCheckBox:checked { color: white }偽狀態可以與sub-control組合使用，舉個例子：
QComboBox::drop-down:hover { image:url(dropdown_bright.png)}11、選擇器的匹配規則
需要完成一個界面，如下圖所示：
這里用戶名輸入框是一個QComboBox對象，密碼輸入框是一個QLineEdit對象，它們的父控件是一個QDialog，有這樣一個需求：給這兩個輸入框設置相同的邊框屬性：1個像素寬的藍色實線框，為了方便更改風格，我有一個qss文件，將所有樣式都寫在這個文件里，這時，觀察發現，這兩個控件都是QDialog的子控件，于是可以用后代選擇器或者子元素選擇器，如下：
第一種：
第二種：
QDialog>QComboBox,QLineEdit {border:1px solid blue; }當寫完并運行程序后，發現無論采用哪種寫法QComboBox是正常的，但是我的程序界面中，其他所有的QLineEdit的邊框都變成了1個像素寬的藍色實線框，而這并不是我想要的效果。
因此對于上面的現象，我們很容易得出結論：多個選擇器組合使用時，它們的結合方向是自左向右，而不是我們認為的自右向左。也就是說，這兩個選擇器分別被理解為{ QDialog QComboBox }，QLineEdit和{ QDialog>QComboBox },QLineEdit。
其實，這應該與CSS的選擇器匹配規則是一樣的，是為了提高效率的一種做法，具體原因在此不細談。
正確的寫法應該是：
或者
QDialog>QComboBox,QDialog>QLineEdit {border: 1px solid blue; }五、QSS常用屬性
1、Qss背景屬性(Background)
background
在一個聲明中設置所有的背景屬性。
background-attachment
設置背景圖像是否固定或者隨著頁面的其余部分滾動。
background-color
設置元素的背景顏色。
background-image
設置元素的背景圖像。
background-position
設置背景圖像的開始位置。
background-repeat
設置是否及如何重復背景圖像。
background-clip
規定背景的繪制區域。
background-origin
規定背景圖片的定位區域。
background-size
規定背景圖片的尺寸。
2、QSS邊框屬性(Border和Outline)
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-decoration-break
元素在發生斷行時其樣式的表現形式
box-shadow
向方框添加一個或多個陰影。
3、Box屬性
overflow-x
如果內容溢出了元素內容區域，是否對內容的左/右邊緣進行裁剪。
overflow-y
如果內容溢出了元素內容區域，是否對內容的上/下邊緣進行裁剪。
overflow-style
規定溢出元素的首選滾動方法。
rotation
圍繞由 rotation-point 屬性定義的點對元素進行旋轉。
rotation-point
定義距離上左邊框邊緣的偏移點。
4、QSS字體屬性(Font)
font
在一個聲明中設置所有字體屬性。
font-family
規定文本的字體系列。
font-size
規定文本的字體尺寸。
font-size-adjust
為元素規定 aspect 值。
font-stretch
收縮或拉伸當前的字體系列。
font-style
規定文本的字體樣式。
font-variant
規定是否以小型大寫字母的字體顯示文本。
font-weight
規定字體的粗細。
5、QSS外邊距屬性(Margin)
margin
在一個聲明中設置所有外邊距屬性。
margin-bottom
設置元素的下外邊距。
margin-left
設置元素的左外邊距。
margin-right
設置元素的右外邊距。
margin-top
設置元素的上外邊距。
6、QSS內邊距屬性(Padding)
padding
在一個聲明中設置所有內邊距屬性。
padding-bottom
設置元素的下內邊距。
padding-left
設置元素的左內邊距。
padding-right
設置元素的右內邊距。
padding-top
設置元素的上內邊距。
7、QSS 位屬性(Positioning)
bottom
設置定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
clear
規定元素的哪一側不允許其他浮動元素。
clip
剪裁絕對定位元素。
cursor
規定要顯示的光標的類型（形狀）。
display
規定元素應該生成的框的類型。
float
規定框是否應該浮動。
left
設置定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
overflow
規定當內容溢出元素框時發生的事情。
position
規定元素的定位類型。
right
設置定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
top
設置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
vertical-align
設置元素的垂直對齊方式。
visibility
規定元素是否可見。
z-index
設置元素的堆疊順序。
8、QSS文本屬性(Text)
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
允許對長的不可分割的單詞進行分割并換行到下一行。
9、 顏色
17種標準色：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,olive, orange, purple, red, silver, teal, white, yellow
10、字體名：
微軟雅黑：Microsoft YaHei
宋體：SimSun
黑體：SimHei
仿宋： FangSong
楷體： KaiTi
隸書：LiSu
幼圓：YouYuan
華文細黑：STXihei
華文楷體：STKaiti
華文宋體：STSong
華文中宋：STZhongsong
華文仿宋：STFangsong
方正舒體：FZShuTi
方正姚體：FZYaoti
華文彩云：STCaiyun
華文琥珀：STHupo
華文隸書：STLiti
華文行楷：STXingkai
華文新魏：STXinwei
font: 15px "Segoe UI"; /* 字體:大小 名稱 */ font-family: "Segoe UI"; /* 字體名稱 */六、總結
參考文章：
https://blog.csdn.net/hellokandy/article/details/114873373
https://blog.csdn.net/qq_40602000/article/details/104652131
https://blog.csdn.net/Mr_robot_strange/article/details/106756552#_200
【Qt學習系列】11.Qt樣式表Qss
【Qt學習系列】11.Qt樣式表Qss（2）
總結
- 上一篇： stata软件不出图_绘制回归分析结果的
- 下一篇： 【数据结构】红黑树入门知识