Qss换肤设置
前言：本文大部分的內容來源于同類博客。章節1.1-1.3 摘自參考文檔：http://www.th7.cn/web/html-css/201405/37286.shtml。1.4摘自參考文檔。https://blog.csdn.net/Staranywhere/article/details/106967756。本文僅用作知識點整理。
目錄：
? ?1.1?Qss的功能及結構
? ?1.2?QSS基本屬性設置
? ?1.3? Qss過濾選擇器和優先級
? ?1.4 偽狀態集合
? ?1.5 利用動態屬性分層次設置
? ? 1.6?代碼中加載Qss
? ? 1.7 Qss高亮配置
? ? 1.8 Qss編輯工具
1.1? Qss的功能
Qt程序界面中控件的背景圖片、大小、字體顏色、字體類型、按鈕狀態變化等屬性可以通過Qss文件來設置，美化UI界面。實現界面和程序的分離，快速切換皮膚。
? ? 從層次上來說：
控件可分為前景與背景
前景：多包含文件，圖片等內容
背景：多包含圖片，圖形等內容
從結構上來說：
由于QT style是模擬CSS的布局結構，因此其滿足CSS的盒子模型
從里到外的4個區域分別是：
1： content
2: padding
3: border
4: margin
1.2? QSS基本屬性設置
Qss的強大在于組合功能的強大，這里只是簡單介紹基本功能，將簡單功能組合起來才能實現好看的效果。
Qss背景屬性（Background）
| 屬性 | 描述 | CSS |
| background | 在一個聲明中設置所有的背景屬性。 | 1 |
| background-attachment | 設置背景圖像是否固定或者隨著頁面的其余部分滾動。 | 1 |
| background-color | 設置元素的背景顏色。 | 1 |
| background-image | 設置元素的背景圖像。 | 1 |
| background-position | 設置背景圖像的開始位置。 | 1 |
| background-repeat | 設置是否及如何重復背景圖像。 | 1 |
| background-clip | 規定背景的繪制區域。 | 3 |
| background-origin | 規定背景圖片的定位區域。 | 3 |
| background-size | 規定背景圖片的尺寸。 | 3 |
QSS邊框屬性（Border?和 Outline）
| 屬性 | 描述 | CSS |
| border | 在一個聲明中設置所有的邊框屬性。 | 1 |
| border-bottom | 在一個聲明中設置所有的下邊框屬性。 | 1 |
| border-bottom-color | 設置下邊框的顏色。 | 2 |
| border-bottom-style | 設置下邊框的樣式。 | 2 |
| border-bottom-width | 設置下邊框的寬度。 | 1 |
| border-color | 設置四條邊框的顏色。 | 1 |
| border-left | 在一個聲明中設置所有的左邊框屬性。 | 1 |
| border-left-color | 設置左邊框的顏色。 | 2 |
| border-left-style | 設置左邊框的樣式。 | 2 |
| border-left-width | 設置左邊框的寬度。 | 1 |
| border-right | 在一個聲明中設置所有的右邊框屬性。 | 1 |
| border-right-color | 設置右邊框的顏色。 | 2 |
| border-right-style | 設置右邊框的樣式。 | 2 |
| border-right-width | 設置右邊框的寬度。 | 1 |
| border-style | 設置四條邊框的樣式。 | 1 |
| border-top | 在一個聲明中設置所有的上邊框屬性。 | 1 |
| border-top-color | 設置上邊框的顏色。 | 2 |
| border-top-style | 設置上邊框的樣式。 | 2 |
| border-top-width | 設置上邊框的寬度。 | 1 |
| border-width | 設置四條邊框的寬度。 | 1 |
| outline | 在一個聲明中設置所有的輪廓屬性。 | 2 |
| outline-color | 設置輪廓的顏色。 | 2 |
| outline-style | 設置輪廓的樣式。 | 2 |
| outline-width | 設置輪廓的寬度。 | 2 |
| border-bottom-left-radius | 定義邊框左下角的形狀。 | 3 |
| border-bottom-right-radius | 定義邊框右下角的形狀。 | 3 |
| border-image | 簡寫屬性，設置所有 border-image-*?屬性。 | 3 |
| border-image-outset | 規定邊框圖像區域超出邊框的量。 | 3 |
| border-image-repeat | 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。 | 3 |
| border-image-slice | 規定圖像邊框的向內偏移。 | 3 |
| border-image-source | 規定用作邊框的圖片。 | 3 |
| border-image-width | 規定圖片邊框的寬度。 | 3 |
| border-radius | 簡寫屬性，設置所有四個 border-*-radius?屬性。 | 3 |
| border-top-left-radius | 定義邊框左上角的形狀。 | 3 |
| border-top-right-radius | 定義邊框右下角的形狀。 | 3 |
| box-decoration-break | �0�2 | 3 |
| box-shadow | 向方框添加一個或多個陰影。 | 3 |
Box?屬性
| 屬性 | 描述 | CSS |
| overflow-x | 如果內容溢出了元素內容區域，是否對內容的左/右邊緣進行裁剪。 | 3 |
| overflow-y | 如果內容溢出了元素內容區域，是否對內容的上/下邊緣進行裁剪。 | 3 |
| overflow-style | 規定溢出元素的首選滾動方法。 | 3 |
| rotation | 圍繞由 rotation-point?屬性定義的點對元素進行旋轉。 | 3 |
| rotation-point | 定義距離上左邊框邊緣的偏移點。 | 3 |
QSS字體屬性（Font）
| 屬性 | 描述 | CSS |
| font | 在一個聲明中設置所有字體屬性。 | 1 |
| font-family | 規定文本的字體系列。 | 1 |
| font-size | 規定文本的字體尺寸。 | 1 |
| font-size-adjust | 為元素規定 aspect 值。 | 2 |
| font-stretch | 收縮或拉伸當前的字體系列。 | 2 |
| font-style | 規定文本的字體樣式。 | 1 |
| font-variant | 規定是否以小型大寫字母的字體顯示文本。 | 1 |
| font-weight | 規定字體的粗細。 | 1 |
QSS外邊距屬性（Margin）
| 屬性 | 描述 | CSS |
| margin | 在一個聲明中設置所有外邊距屬性。 | 1 |
| margin-bottom | 設置元素的下外邊距。 | 1 |
| margin-left | 設置元素的左外邊距。 | 1 |
| margin-right | 設置元素的右外邊距。 | 1 |
| margin-top | 設置元素的上外邊距。 | 1 |
CSS?內邊距屬性（Padding）
| 屬性 | 描述 | CSS |
| padding | 在一個聲明中設置所有內邊距屬性。 | 1 |
| padding-bottom | 設置元素的下內邊距。 | 1 |
| padding-left | 設置元素的左內邊距。 | 1 |
| padding-right | 設置元素的右內邊距。 | 1 |
| padding-top | 設置元素的上內邊距。 | 1 |
CSS?定位屬性（Positioning）
| 屬性 | 描述 | CSS |
| bottom | 設置定位元素下外邊距邊界與其包含塊下邊界之間的偏移。 | 2 |
| clear | 規定元素的哪一側不允許其他浮動元素。 | 1 |
| clip | 剪裁絕對定位元素。 | 2 |
| cursor | 規定要顯示的光標的類型（形狀）。 | 2 |
| display | 規定元素應該生成的框的類型。 | 1 |
| float | 規定框是否應該浮動。 | 1 |
| left | 設置定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 | 2 |
| overflow | 規定當內容溢出元素框時發生的事情。 | 2 |
| position | 規定元素的定位類型。 | 2 |
| right | 設置定位元素右外邊距邊界與其包含塊右邊界之間的偏移。 | 2 |
| top | 設置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。 | 2 |
| vertical-align | 設置元素的垂直對齊方式。 | 1 |
| visibility | 規定元素是否可見。 | 2 |
| z-index | 設置元素的堆疊順序。 | 2 |
CSS?文本屬性（Text）
| 屬性 | 描述 | CSS |
| color | 設置文本的顏色。 | 1 |
| direction | 規定文本的方向 / 書寫方向。 | 2 |
| letter-spacing | 設置字符間距。 | 1 |
| line-height | 設置行高。 | 1 |
| text-align | 規定文本的水平對齊方式。 | 1 |
| text-decoration | 規定添加到文本的裝飾效果。 | 1 |
| text-indent | 規定文本塊首行的縮進。 | 1 |
| text-shadow | 規定添加到文本的陰影效果。 | 2 |
| text-transform | 控制文本的大小寫。 | 1 |
| unicode-bidi | 設置文本方向。 | 2 |
| white-space | 規定如何處理元素中的空白。 | 1 |
| word-spacing | 設置單詞間距。 | 1 |
| hanging-punctuation | 規定標點字符是否位于線框之外。 | 3 |
| punctuation-trim | 規定是否對標點字符進行修剪。 | 3 |
| text-align-last | 設置如何對齊最后一行或緊挨著強制換行符之前的行。 | 3 |
| text-emphasis | 向元素的文本應用重點標記以及重點標記的前景色。 | 3 |
| text-justify | 規定當 text-align 設置為 "justify" 時所使用的對齊方法。 | 3 |
| text-outline | 規定文本的輪廓。 | 3 |
| text-overflow | 規定當文本溢出包含元素時發生的事情。 | 3 |
| text-shadow | 向文本添加陰影。 | 3 |
| text-wrap | 規定文本的換行規則。 | 3 |
| word-break | 規定非中日韓文本的換行規則。 | 3 |
| word-wrap | 允許對長的不可分割的單詞進行分割并換行到下一行。 | 3 |
1.3? Qss過濾選擇器和優先級
1.3.1??????????? Qss選擇器
Qss有一些規則用來設置符合規則的控件名稱，通常是按照通用屬性設置一類控件，對某個有特殊要求的在特別設置。避免大量的重復設置。分為
*
{
}
QPushButton
{
}
3.類選擇器：? .QPushButton ;? 匹配所有QPushButton的實例，但是并不匹配其子類。這是與CSS中的類選擇器不一樣的地方，注意前面有一個點號
.QPushButton
{
}
4.屬性選擇器：QPushButton[flat="false"]; 匹配所有flat屬性是false的QPushButton實例，注意該屬性可以是自定義的屬性，不一定非要是類本身具有的屬性
QPushButton[flat="false"]
{
}
5.ID選擇器：? #myButton; 匹配所有id為myButton的控件實例，這里的id實際上就是objectName指定的值,針對特定名稱的控件設置屬性。
QPushButton#myButton1, #myButton2
{
}
6.后代選擇器： QDialog QPushButton ; 所有QDialog容器中包含的QPushButton，不管是直接的還是間接的。
QDialog QPushButton
{
}
7.子選擇器：? QDialog > QPushButton; 所有QDialog容器下面的QPushButton，其中要求QPushButton的直接父容器是QDialog
QDialog > QPushButton
{
}
1.4偽狀態集合
| :active | 此狀態在小部件駐留在活動窗口時設置 |
| :adjoins-item | 此狀態在QTreeView的::branch與一個item相鄰時設置 |
| :alternate | 當QAbstractItemView::alternatingRowColors()設置為真時，在繪制QAbstractItemView的行時，為每個交替行設置此狀態 |
| :bottom | 此item位于底部。例如，QTabBar有位于底部的選項卡 |
| :checked | 此item被選中。例如，QAbstractButton的checked狀態 |
| :closable | 此item可以被關閉。例如，QDockWidget的QDockWidget::DockWidgetClosable特性開啟時 |
| :closed | 此item處于關閉狀態。例如，QTreeView中未展開的item |
| :default | 此item的默認狀態。例如，一個default的QPushButton或QMenu中的一個默認動作 |
| :disabled | 此item被禁用 |
| :editable | 如QComboBox是可編輯的 |
| :edit-focus | 此item具有編輯焦點(參考QStyle::State_HasEditFocus)。此狀態僅對Qt擴展應用程序可用 |
| :enabled | 此item已啟用 |
| :exclusive | 此item是一個獨占項組的一部分。例如，獨占QActionGroup中的菜單項 |
| :first | 此item是列表中的第一項。例如，QTabBar中的第一個選項卡 |
| :flat | 此item是平的。例如，一個扁平的QPushButton |
| :floatable | 此item可以浮動。例如，QDockWidget的QDockWidget::DockWidgetFloatable的特性開啟時 |
| :focus | 此item具有輸入焦點 |
| :has-children | 此item具有子對象。例如，QTreeView中具有子項的項 |
| :has-sibling | 此item具有兄弟對象。例如，QTreeView中與之相鄰的項 |
| :horizontal | 此item處于水平方向 |
| :hover | 鼠標懸浮在此item上 |
| :indeterminate | 此item處于不確定狀態。例如，QCheckBox或QRadioButton被部分選中 |
| :last | 此item是列表中的最后一項。例如，QTabBar中的最后一個選項卡 |
| :left | 此item位于左側。例如，QTabBar有位于左側的選項卡 |
| :maximized | 此item處于最大化狀態。例如，一個最大化的QMdiSubWindow |
| :middle | 此item是列表中的中間一項。例如，一個不在QTabBar中的開頭或結尾的選項卡 |
| :minimized | 此item處于最小化狀態。例如，一個最小化的QMdiSubWindow |
| :movable | 此item可以被移動。例如， QDockWidget的QDockWidget::DockWidgetMovable特性開啟時 |
| :no-frame | 此item沒有邊框。例如，沒有邊框的QSpinBox或QLineEdit |
| :non-exclusive | 此item是一個非獨占項組的一部分。例如，非獨占QActionGroup中的菜單項 |
| :off | 對可以切換的items，這適用于處于off狀態的item |
| :on | 對可以切換的items，這適用于處于on狀態的widget |
| :only-one | 此item是列表中的唯一的一項。例如，一個在QTabBar中單獨的選項卡 |
| :open | 此item處于打開狀態。例如，QTreeView中的展開項，或帶有菜單的QComboBox或QPushButton |
| :next-selected | 此item是列表中的下一個被選中的項。例如，在QTabBar中當前選項卡的下一個要選中的選項卡 |
| :pressed | 鼠標正在按壓在此item上 |
| :previous-selected | 此item是列表中的上一個被選中的項。例如，在QTabBar中當前選項卡的上一個要選中的選項卡 |
| :selected | 此item處于選中狀態。例如，一個在QTabBar中被選中的選項卡或一個在菜單中被選中的菜單項 |
| :top | 此item位于頂部。例如，QTabBar有位于頂部的選項卡 |
| :unchecked | 此item處于未被選中狀 |
| :vertical | 此item處于垂直方向 |
| :window | 小部件是一個窗口(例如，一個頂層小部件) |
?1.5 利用動態屬性分層次設置
? ? ?為控件添加動態屬性，利用屬性選擇器。對界面進行分層次設置皮膚。
? ? ?界面色彩一般分為：主色（EssentialColour），輔助色（ComplementaryColors）
? ? ?點綴色（OrnamentColour）,中性色（NeutraColourl）。因此一般為界面控件添加四種動態屬性。
? ? ?各種色彩對應界面部分：
? ? ?主色：頂部標題欄和背景色
? ? ?輔助色：為主色臨近色或同系色。各子個模塊顏色
? ? ?點綴色：為主色的互補色，對標題或模塊進行裝飾。如邊框花邊
? ? ?中性色：以主色為色基的中性色。一般為文字。
? ? ?例：QMinWidno[EssentialColour=true]{background:#7F9AB8}(主色)
? ? ? ? ? ? QWidget[ComplementaryColors=true]{background:#7F9AB8}(輔助色)
? ? ? ? ? ? QWidget[OrnamentColour=true]{background:#7F9AB8}(點綴色)
? ? ? ? ? ? QWidget[NeutraColourl=true]{background:#7F9AB8}(中性色)
1.6 代碼中加載Qss：main.cpp中添加
QString?qss;
QFile?qssFile(pStyleSheet);???????
qssFile.open(QFile::ReadOnly);???
if(qssFile.isOpen()){?
? ?qss = QObject::tr(qssFile.readAll());?
? ?qApp->setStyleSheet(qss);?
? ?qssFile.close();?
}
1.7 Qss高亮配置
進入：工具 -> 選項 -> 環境 -> MIME 類型。
在【已注冊的MIME類型】處輸入“text/css”可以快速定位，然后在【詳情】中的“模式”處添加?*.qss，即將原來的“模式”改為：*.css;*.CSSL;*.qss。
注意：中間用分號（;）分隔
高亮
重新打開?qss 文件就可以高亮顯示了
1.8 Qss 編輯工具
? ? ?為什么要使用qss編輯工具？這是因為qt creater中編輯樣式后，不能實時查看編輯效果，導致調整控件樣式時效率極低。利用一款qss 編輯工具將樣式快速編輯好并導出qss文件，這樣能大大提高效率。推薦使用QssEditor編輯工具對qss進行編輯。作者：dmitrykx，是Qt4的開發者。qss editor 能高亮顯示關鍵字，實時查看編輯效果，能導出qss文件。
? ? ?資源地址：https://download.csdn.net/download/zeng675147/19952932?spm=1001.2014.3001.5501
總結
- 上一篇： Corner芯片TT,FF,SS
- 下一篇： C语言杨辉三角的程序分析,C语言：打印杨