樣式表QSS知識總結
QT樣式表單
建立步驟:
1、建立文字檔案,寫入樣式表內容,更改檔案字尾名為qss;
2、在工程中新建資原始檔*.qrc,新增字首檔案(/名稱),將qss檔案加入字首檔案中;
3、通過傳入路徑/檔名的方式建立一個QFile物件,以readonly的方式開啟,然後readAll,最後qApp->setStyleSheet就可以使qss生效。
QT的樣式表單允許我們在對程式不做任何程式碼上的更改的情況下輕鬆改變應用程式的外觀。
其思想來源於網頁設計中的CSS,即可以將功能設計和美學設計分開。
它的語法和概念和HTML CSS也是差不多的。
其原理可簡單理解為:QT內部存在一個CSS語法解析器,我們將我們的樣式控制以CSS語法定義到外部檔案,CSS語法解析器解析後在呼叫相應的功能模組以完成樣式變化。(其實這部分功能我們完全可以通過程式碼實現,只是這麼做既麻煩而且一旦更改會很不方便)
比如:我在CSS定義字型顏色和大小,那麼CSS語法解析器解讀出我的意圖後,可能就會呼叫freetype模組來實現此功能。
好處:1.將功能設計和美學設計分開
2.CSS設計資源多,查詢容易
說明:QT Style 樣式語法雖然和CSS語法差不多,但是其功能是其子集,在使用QT style時需具備CSS語法知識
CSS語法學習:http://www.w3school.com.cn/h.asp
CSS 參考手冊:http://www.w3school.com.cn/cssref/index.asp
基本語法
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 { image: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 { image: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 邊框屬性(Border 和 Outline)
Box 屬性
屬性 |
描述 |
CSS |
如果內容溢位了元素內容區域,是否對內容的左/右邊緣進行裁剪。 |
3 |
|
如果內容溢位了元素內容區域,是否對內容的上/下邊緣進行裁剪。 |
3 |
|
圍繞由 rotation-point 屬性定義的點對元素進行旋轉。 |
3 |
CSS 字型屬性(Font)
CSS 外邊距屬性(Margin)
CSS 內邊距屬性(Padding)
CSS 定位屬性(Positioning)
屬性 |
描述 |
CSS |
||
設定定位元素下外邊距邊界與其包含塊下邊界之間的偏移。 |
2 |
|||
規定元素的哪一側不允許其他浮動元素。 |
1 |
|||
剪裁絕對定位元素。 |
2 |
|||
規定要顯示的游標的型別(形狀)。 |
2 |
|||
規定元素應該生成的框的型別。 |
1 |
|||
規定框是否應該浮動。 |
1 |
|||
設定定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 |
2 |
|||
規定當內容溢位元素框時發生的事情。 |
2 |
|||
設定定位元素右外邊距邊界與其包含塊右邊界之間的偏移。 |
2 |
|||
設定定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。 |
2 |
CSS 文字屬性(Text)
屬性 |
描述 |
CSS |
設定文字的顏色。 |
1 |
|
規定文字的方向 / 書寫方向。 |
2 |
|
text-shadow |
規定新增到文字的陰影效果。 |
2 |
text-align-last |
設定如何對齊最後一行或緊挨著強制換行符之前的行。 |
3 |
向元素的文字應用重點標記以及重點標記的前景色。 |
3 |
|
規定當 text-align 設定為 "justify" 時所使用的對齊方法。 |
3 |
|
規定非中日韓文字的換行規則。 |
3 |
|
允許對長的不可分割的單詞進行分割並換行到下一行。 |
3 |
網址:http://blog.csdn.net/tiankefeng19850520/article/details/27183403?utm_source=tuicool&utm_medium=referral