qss知識總結
rgb顏色查詢對照表
gui學習之三十四——qss樣式表
基本語法
樣式表單由一系列樣式規則組成。每條規則可以分成兩部分:選擇器和宣告
選擇器表示規則作用到哪些控制項上;宣告則詳細說明了是什麼規則。
qt的樣式表語法不區分大小寫,所以color,color,color,color都表示同樣的顏色屬性。但是指代類的類名的時候,是區分大小寫的。
多個選擇器可以並列使用,它們之間用逗號隔開,例如:
qpushbutton,qlineedit, qcombobox
宣告部分也可以有多個並列,之間用分號隔開。當我們要設定的選擇器有多個屬性的時候,就需要並列多個宣告,例如:
qpushbutton
這條樣式規則讓按鈕的字型變成紅色,同時背景色變成白色。
選擇器類別
qt樣式表單支援所有在css2中定義的選擇器型別,下面介紹幾種最為常用的選擇器定義。
全域性選擇器
選中所有的widget
特定型別選擇器
qpushbutton
選中所有qpushbutton以及它派生出來的子類的物件
屬性選擇器
qpushbutton[flat=「false」]
選中所有flat屬性為false的按鈕
屬性選擇器
可用於qt中所有具有tostring方法的屬性,例如qpushbutton的text、checked等屬性。
當屬性是乙個qstringlist時,可以用~=這個符號來匹配其中的某一項。
111css padding margin border屬性詳解
**css padding、margin、border屬性
w3c組織建議把所有網頁上的對像都放在乙個盒(box)中,設計師可以通過建立定義來控制這個盒的屬性,這些對像包括段落、列表、標題、以及層。盒模型主要定義四個區域:內容(content)、內邊距(padding)、邊框(border)和外邊距(margin)。對於初學者,經常會搞不清楚margin,background-color,background-image,padding,content,border之間的層次、關係和相互影響。這裡提供一張盒模型的3d示意圖,希望便於你的理解和記憶。
margin:層的邊框以外留的空白
background-color:背景顏色
background-image:背景
padding:層的邊框到層的內容之間的空白
border:邊框
content:內容
接下來將講述html和css的關鍵——盒子模型(box model)。理解box model的關鍵便是margin和padding屬性,而正確理解這兩個屬性也是學習用css布局的關鍵。
注: 為什麼不翻譯margin和padding?
原因一: 在漢語中並沒有與之相對應的詞語;
原因二: 即使有這樣的詞語, 由於在編寫css**時, 必須使用margin和padding, 如果我們總用漢語詞語代替其來解釋的話, 到了實際應用時容易混淆margin和padding的概念。
如果有一點html基礎的話,就應該了解一些基本元素(element),如p、h1~h6、br、div、li、ul、img等。如果將這些元素細分,又可以分別為頂級(top-level)元素、塊級(block-level)元素和內聯(inline)元素。
塊級元素是構成乙個html的主要和關鍵元素,而任意乙個塊級元素均可以用box model來解釋說明。
box model: 任意乙個塊級元素均由content(內容)、padding、background(包括背景顏色和)、border(邊框)、margin五個部分組成。
立體圖如下:
以下說明margin和padding屬性:
1、margin: 包括margin-top、margin-right、margin-bottom、margin-left,控制塊級元素之間的距離,它們是透明不可見的。根據上、 右、下、左的順時針規則,可以寫為 margin: 40px 40px 40px 40px;
為便於記憶,請參考下圖:
//物件四邊的補丁邊距均為36px
body
//上下兩邊的補丁邊距為36px,左右兩邊的補丁邊距為24px
body
//上、下兩邊的補丁邊距分別為36px、18px,左右兩邊的補丁邊距為24px
body
//上、右、下、左補丁邊距分別為36px、24px、18px、12px
QSS 書寫規則
借用css 的靈感,qt也支援qt自己的css,簡稱qss。同css 相似,qss的主要功能與最終目的都是能使介面的表現與介面的元素分離,即質與形的分離,就如同乙個人可以在不同的時候穿上不同的衣服一樣,css機制的引入,使得設計一種 與介面控制項分離的軟體成為可能,應用程式也能像web介面那樣隨意地...
QSS常用屬性
font 15px segoe ui 字型 大小 名稱 font family segoe ui 字型名稱 padding 4px 文字邊距 padding left 5px 文字左邊距 padding right 10px 文字右邊距 padding top 3px 文字頂邊距 padding b...
qss設定平面按鈕 QSS基礎 設定控制項樣式
1 qss基礎 設定同類控制項樣式 qss基礎 qt style sheet qt樣式表 用於設定控制項的樣式和風格 比如控制項的背景色,字型顏色,字型大小等 和css的功能比較相似,功能相似 from pyqt5.qtcore import from pyqt5.qtgui import from...