Qt學習之樣式表

QT樣式表單

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

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

CSS 邊框屬性(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

3

box-shadow

向方框添加一個或多個陰影。

3

Box 屬性

屬性

描述

CSS

overflow-x

如果內容溢出了元素內容區域,是否對內容的左/右邊緣進行裁剪。

3

overflow-y

如果內容溢出了元素內容區域,是否對內容的上/下邊緣進行裁剪。

3

overflow-style

規定溢出元素的首選滾動方法。

3

rotation

圍繞由 rotation-point 屬性定義的點對元素進行旋轉。

3

rotation-point

定義距離上左邊框邊緣的偏移點。

3

CSS 字體屬性(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

CSS 外邊距屬性(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

設置元素的堆疊順序。

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位...
    前端進階之旅閱讀 16,620評論 32 459
  • 1.塊級元素和行內元素 塊級(block-level)元素;行內(內聯、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,047評論 1 4
  • 王嬌曾以單身是求來的福,向旁人自詡一個人可以過得有多舒坦。盡管她父母越加的年事已高,為了擇婿也絞盡了腦汁,說破了嘴...
    春與青溪長8閱讀 419評論 0 2
  • 梅兒 愛情沒有固定的解釋, 每一個人的理解也會不同. 愛可以是甜的也可以是苦澀的, 沒一個人敢說我的愛100%的甜...
    梅兒閱讀 487評論 0 2