QSS知識總結
QT樣式表單
QT的樣式表單容許咱們在對程序不作任何代碼上的更改的狀況下輕鬆改變應用程序的外觀。html
其思想來源於網頁設計中的CSS，便可以將功能設計和美學設計分開。ide
它的語法和概念和HTML CSS也是差很少的。佈局
其原理可簡單理解爲：QT內部存在一個CSS語法解析器，咱們將咱們的樣式控制以CSS語法定義到外部文件，CSS語法解析器解析後在調用相應的功能模塊以完成樣式變化。（其實這部分功能咱們徹底能夠經過代碼實現，只是這麼作既麻煩並且一旦更改會很不方便）學習
好比：我在CSS定義字體顏色和大小，那麼CSS語法解析器解讀出個人意圖後，可能就會調用freetype模塊來實現此功能。字體
好處：1.將功能設計和美學設計分開url
2.CSS設計資源多，查找容易spa
說明：QT Style 樣式語法雖然和CSS語法差很少，可是其功能是其子集，在使用QT style時需具有CSS語法知識設計
CSS語法學習：http://www.w3school.com.cn/h.aspcode
CSS 參考手冊：http://www.w3school.com.cn/c***ef/index.asporm
基本語法
1. 樣式表單由一系列樣式規則組成。每條規則能夠分紅兩部分：選擇器和聲明
選擇器表示規則做用到哪些控件上；聲明則詳細說明了是什麼規則。
2. Qt的樣式表語法不區分大小寫，因此color，Color，coLor，coloR都表示一樣的顏色屬性。可是指代類的類名的時候，是區分大小寫的。
3. 多個選擇器能夠並列使用，它們之間用逗號隔開，例如：
QPushButton,QLineEdit, QComboBox{ color: red }
4. 聲明部分也能夠有多個並列，之間用分號隔開。當咱們要設置的選擇器有多個屬性的時候，就須要並列多個聲明，例如：
QPushButton{ color: red; background-color: white }
這條樣式規則讓按鈕的字體變成紅色，同時背景色變成白色。
選擇器類別
Qt樣式表單支持全部在CSS2中定義的選擇器類型，下面介紹幾種最爲經常使用的選擇器定義。
全局選擇器 |
* |
選中全部的Widget |
特定類型選擇器 |
QPushButton |
選中全部QPushButton以及它派生出來的子類的對象 |
屬性選擇器
|
QPushButton[flat="false"] |
選中全部flat屬性爲false的按鈕 |
屬性選擇器
可用於QT中全部具備toString方法的屬性，例如QPushButton的text、checked等屬性。
當屬性是一個QStringList時，能夠用~=這個符號來匹配其中的某一項。
由於屬性每每是動態的，當屬性更改了的時候，須要調整樣式表，一般作法是刪除樣式表，再從新加載
選擇器類別
類選擇器 |
QPushButton |
選中全部QPushButton的對象，但不包括其子類 |
ID選擇器 |
QPushButton#okButton |
選中全部object name是okButton的QPushButton對象 |
子控件選擇器 |
QDialog QPushButton |
選中Qdialog上的全部QPushButton子控件（直接子控件，間接子控件 |
嫡子控件選擇器 |
QDialog > QPushButton |
選中全部Qdialog的直接孩子QPushButton |
精細控制（子控件）
對於比較複雜的控件，每每由多個子控件構成，好比QComboBox則由文本框和下拉按鈕構成，對於QT STYLE 容許咱們分別對子控件進行樣式設定，這就大大加強了樣式的靈活性
舉例：QComboBox的下拉點擊按鈕設置背景圖片：
QComboBox::drop-down { p_w_picpath:url(dropdown.png) }
關於子控件更多信息與使用方法能夠訪問
http://qt-project.org/doc/qt-5/stylesheet-examples.html#customizing-qcombobox
僞狀態控制
根據具體控件的狀態不一樣，選擇器也能夠有不一樣的狀態，依次對應控件在不一樣狀態的現實效果
基本寫法：
1. 僞狀態和選擇器類名之間，用一個冒號分隔。
QPushButton:hover { color: white }
2. 僞狀態也能夠反向選擇。
例如：當咱們要設置除了鼠標懸停狀態外其餘全部狀態的字體顏色，則能夠像下面這樣設置：QRadioButton:!hover { color: red }
3. 僞狀態也能夠並列，之間用冒號鏈接，表示僞狀態之間用AND計算：
QCheckBox:hover:checked { color: white }
QPushButton:hover:!pressed { color: blue; }
4. 僞狀態之間能夠用OR計算：
QCheckBox:hover, QCheckBox:checked { color:white }
5. 僞狀態能夠和子控件合起來使用：
QComboBox::drop-down:hover { p_w_picpath:url(dropdown_bright.png) }
STYLE基礎知識的說明
咱們控制STYLE主要是將STYLE添加到控件上，經過控制控件不一樣狀態的STYLE以達到總體的顯示效果
那對於控件，我將其分解爲如下幾部分來理解
從層次上來講：
控件可分爲前景與背景
前景：多包含文件，圖片等內容
背景：多包含圖片，圖形等內容
從結構上來講：
因爲QT style是模擬CSS的佈局結構，所以其知足CSS的盒子模型
從裏到外的4個區域分別是：
1： content
2: padding
3: border
4: margin
經過控制一個控件的前景，背景內容已經結構上的4個區域，咱們就能夠達到對一個控件隨心所欲的控制
QT如何下使用QSS
1. 定義樣式文件
2. 將樣式文件添加到資源中
3. 代碼端加載樣式文件
CSS基本功能
CSS的強大在於組合功能的強大，這裏只是簡單介紹基本功能，將簡單功能組合起來才能實現好看的效果。
CSS 背景屬性（Background）
屬性 |
描述 |
CSS |
在一個聲明中設置全部的背景屬性。 |
1 |
|
設置背景圖像是否固定或者隨着頁面的其他部分滾動。 |
1 |
|
設置元素的背景顏色。 |
1 |
|
設置元素的背景圖像。 |
1 |
|
設置背景圖像的開始位置。 |
1 |
|
設置是否及如何重複背景圖像。 |
1 |
|
規定背景的繪製區域。 |
3 |
|
規定背景圖片的定位區域。 |
3 |
|
規定背景圖片的尺寸。 |
3 |
CSS 邊框屬性（Border 和 Outline）
屬性 |
描述 |
CSS |
在一個聲明中設置全部的邊框屬性。 |
1 |
|
在一個聲明中設置全部的下邊框屬性。 |
1 |
|
設置下邊框的顏色。 |
2 |
|
設置下邊框的樣式。 |
2 |
|
設置下邊框的寬度。 |
1 |
|
設置四條邊框的顏色。 |
1 |
|
在一個聲明中設置全部的左邊框屬性。 |
1 |
|
設置左邊框的顏色。 |
2 |
|
設置左邊框的樣式。 |
2 |
|
設置左邊框的寬度。 |
1 |
|
在一個聲明中設置全部的右邊框屬性。 |
1 |
|
設置右邊框的顏色。 |
2 |
|
設置右邊框的樣式。 |
2 |
|
設置右邊框的寬度。 |
1 |
|
設置四條邊框的樣式。 |
1 |
|
在一個聲明中設置全部的上邊框屬性。 |
1 |
|
設置上邊框的顏色。 |
2 |
|
設置上邊框的樣式。 |
2 |
|
設置上邊框的寬度。 |
1 |
|
設置四條邊框的寬度。 |
1 |
|
在一個聲明中設置全部的輪廓屬性。 |
2 |
|
設置輪廓的顏色。 |
2 |
|
設置輪廓的樣式。 |
2 |
|
設置輪廓的寬度。 |
2 |
|
定義邊框左下角的形狀。 |
3 |
|
定義邊框右下角的形狀。 |
3 |
|
簡寫屬性，設置全部 border-p_w_picpath-* 屬性。 |
3 |
|
規定邊框圖像區域超出邊框的量。 |
3 |
|
圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。 |
3 |
|
規定圖像邊框的向內偏移。 |
3 |
|
規定用做邊框的圖片。 |
3 |
|
規定圖片邊框的寬度。 |
3 |
|
簡寫屬性，設置全部四個 border-*-radius 屬性。 |
3 |
|
定義邊框左上角的形狀。 |
3 |
|
定義邊框右下角的形狀。 |
3 |
|
box-decoration-break |
3 |
|
向方框添加一個或多個陰影。 |
3 |
Box 屬性
屬性 |
描述 |
CSS |
若是內容溢出了元素內容區域，是否對內容的左/右邊緣進行裁剪。 |
3 |
|
若是內容溢出了元素內容區域，是否對內容的上/下邊緣進行裁剪。 |
3 |
|
規定溢出元素的首選滾動方法。 |
3 |
|
圍繞由 rotation-point 屬性定義的點對元素進行旋轉。 |
3 |
|
定義距離上左邊框邊緣的偏移點。 |
3 |
CSS 字體屬性（Font）
屬性 |
描述 |
CSS |
在一個聲明中設置全部字體屬性。 |
1 |
|
規定文本的字體系列。 |
1 |
|
規定文本的字體尺寸。 |
1 |
|
爲元素規定 aspect 值。 |
2 |
|
收縮或拉伸當前的字體系列。 |
2 |
|
規定文本的字體樣式。 |
1 |
|
規定是否以小型大寫字母的字體顯示文本。 |
1 |
|
規定字體的粗細。 |
1 |
CSS 外邊距屬性（Margin）
屬性 |
描述 |
CSS |
在一個聲明中設置全部外邊距屬性。 |
1 |
|
設置元素的下外邊距。 |
1 |
|
設置元素的左外邊距。 |
1 |
|
設置元素的右外邊距。 |
1 |
|
設置元素的上外邊距。 |
1 |
CSS 內邊距屬性（Padding）
屬性 |
描述 |
CSS |
在一個聲明中設置全部內邊距屬性。 |
1 |
|
設置元素的下內邊距。 |
1 |
|
設置元素的左內邊距。 |
1 |
|
設置元素的右內邊距。 |
1 |
|
設置元素的上內邊距。 |
1 |
CSS 定位屬性（Positioning）
屬性 |
描述 |
CSS |
||
設置定位元素下外邊距邊界與其包含塊下邊界之間的偏移。 |
2 |
|||
規定元素的哪一側不容許其餘浮動元素。 |
1 |
|||
剪裁絕對定位元素。 |
2 |
|||
規定要顯示的光標的類型（形狀）。 |
2 |
|||
規定元素應該生成的框的類型。 |
1 |
|||
規定框是否應該浮動。 |
1 |
|||
設置定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 |
2 |
|||
規定當內容溢出元素框時發生的事情。 |
2 |
|||
規定元素的定位類型。 |
2 |
|||
設置定位元素右外邊距邊界與其包含塊右邊界之間的偏移。 |
2 |
|||
設置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。 |
2 |
|||
設置元素的垂直對齊方式。 |
1 |
|||
規定元素是否可見。 |
2 |
|||
設置元素的堆疊順序。 |
||||
CSS 文本屬性（Text）
屬性 |
描述 |
CSS |
設置文本的顏色。 |
1 |
|
規定文本的方向 / 書寫方向。 |
2 |
|
設置字符間距。 |
1 |
|
設置行高。 |
1 |
|
規定文本的水平對齊方式。 |
1 |
|
規定添加到文本的裝飾效果。 |
1 |
|
規定文本塊首行的縮進。 |
1 |
|
text-shadow |
規定添加到文本的陰影效果。 |
2 |
控制文本的大小寫。 |
1 |
|
設置文本方向。 |
2 |
|
規定如何處理元素中的空白。 |
1 |
|
設置單詞間距。 |
1 |
|
規定標點字符是否位於線框以外。 |
3 |
|
規定是否對標點字符進行修剪。 |
3 |
|
text-align-last |
設置如何對齊最後一行或緊挨着強制換行符以前的行。 |
3 |
向元素的文本應用重點標記以及重點標記的前景色。 |
3 |
|
規定當 text-align 設置爲 "justify" 時所使用的對齊方法。 |
3 |
|
規定文本的輪廓。 |
3 |
|
規定當文本溢出包含元素時發生的事情。 |
3 |
|
向文本添加陰影。 |
3 |
|
規定文本的換行規則。 |
3 |
|
規定非中日韓文本的換行規則。 |
3 |
|
容許對長的不可分割的單詞進行分割並換行到下一行。 |
3 |
- 1. 關於QT的QSS的知識總結
- 2. QSS表單樣式總結
- 3. 知識總結
- 4. h5知識總結
- 5. PHP知識總結
- 6. mysql知識總結
- 7. Git 知識總結
- 8. Struts2知識總結
- 9. java_Day09知識總結
- 10. JVM知識總結
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • Docker 資源彙總 - Docker教程
- • 算法總結-雙指針
- • 算法總結-回溯法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 跳槽面試的幾個實用小技巧，不妨看看！
- 2. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 3. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 4. 如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 5. Mac OS非兼容Windows軟件運行解決方案——「以VMware & Microsoft Access爲例「
- 6. 封裝 pyinstaller -F -i b.ico excel.py
- 7. 數據庫作業三ER圖待完善
- 8. nvm安裝使用低版本node.js(非命令安裝)
- 9. 如何快速轉換圖片格式
- 10. 將表格內容分條轉換爲若干文檔
- 1. 關於QT的QSS的知識總結
- 2. QSS表單樣式總結
- 3. 知識總結
- 4. h5知識總結
- 5. PHP知識總結
- 6. mysql知識總結
- 7. Git 知識總結
- 8. Struts2知識總結
- 9. java_Day09知識總結
- 10. JVM知識總結