QT樣式表從入門到精通
技術標籤：-------------QT5--------------qt5css程式語言
QT樣式表從入門到精通
文章目錄
前言
在學習QT樣式表之前，如果你對CSS有一定的基礎那麼相信你會很快掌握QT的QSS因為他們幾乎語法格式一模一樣，學習起來也會如魚得水，效率大大提高。對於剛接觸樣式表的這部分小夥伴來說學習這塊也不是很難，只要按照本文教程一步一步學習，相信你也會很快學會QT樣式表為自己的程式換上一個漂亮的介面。
以下是本篇文章正文內容，主要分為三部分：初級學習，中級學習，高階學習。學習三部曲將採用圖文並茂教大家如何使用QT樣式表。
1、背景介紹
QSS即Qt樣式表，是用來自定義控制元件外觀的一種機制，QSS大量參考了Css的內容為QT介面應用程式提供了一個獨立的介面美化設定，但QSS的功能要比Css弱得多，體現在選擇器少，可以使用的QSS屬性也少，而且並不是所有的屬性都可以應用在Qt的控制元件上，QSS使頁面美化跟程式碼層分開，利於維護。
2、初級學習
2.1、"盒子"模型
在所有視覺化控制元件中，幾乎都是基於盒子模型衍生出來的。就比如盒子是父類，Qpushbutton是子類一 樣，也可以看作是Qobjiect與Qwidget之間的關係。它包括：（margin）邊距，（border）邊框，（padding）填充，和（content）實際內容。盒子模型允許我們在其它”盒子“和周圍元素邊框之間的空間放置“盒子”。
說明:
margin：不可見，最外層，也就是外邊距
border：介於Margin和padding之間，也就是我們常說的邊框
padding：存在邊框與文字（content之間），也就是文字和邊框之間的距離
2.2、語法說明
說明:
可以看出QSS語法和CSS語法幾乎一模一樣，由兩部分組成：
- 類名
- 宣告
接下來看個時示例，直接上圖：
QPushButton {
margin: 0px;//不可見
border: 3px solid #ff0000;
padding:0px;//不可見
color: rgb(23, 0, 255);
}
程式由兩部分組成：
- 類名：QPushButton
- 宣告： {
margin: 0px;//不可見
border: 3px solid #ff0000;
padding:0px;//不可見
color: rgb(23, 0, 255);
}
border寬度為3px,顏色：#FF0000為紅色，content文字顏色為rgb(23, 0, 255)，這裡顏色格式也可以使用#2300FF等價於rgb(23, 0, 255)。margin和padding不可見，但可以設定其寬度檢視QPushButton的變化。