1、選擇器

1.1、通用選擇器

/* 格式：* { 屬性: 值; } 通用選擇器一般用來給應用程序設置統一的字體，大小，顏色等 */ * {font-family: "Microsoft YaHei";outline: 0px;color: #DCDCDC; }

1.2、類型選擇器

/* 格式： 類名 { 屬性: 值; } */ /* 類名即 Widget 類名, 由 QObject :: metaObject() :: className()獲取, 類型選擇器匹配所有該類以及該類的派生類的對象 */ QPushButton {color: blue; } /* 程序中所有的 QPushButton 類和它的派生類的對象, 它們的前景色(即文字顏色)被設置為藍色 */ /* 一般用于為控件做統一初始化 */ /* 注意點： 當自定義控件在命名空間之中(或它是一個嵌套類)，QObject::className()會返回(::)，與子控件選擇器 相沖突當為命名空間中 widget 使用類型選擇器時, 我們必須將” :: ”替換成” -- ” */ namespace ns {class MyPushButton : public QPushButton {} }qApp->setStyleSheet("ns--MyPushButton { background: yellow; }");

1.3、類選擇器

/* 格式：.類名 { 屬性: 值; } */ /* 類名與類型選擇器中的類名一樣，前面的.表示只匹配該類的所有對象，而不匹配其派生類對象 */ .QPushButton {color: blue; }/* 比如當用QFrame做容器時可以用它來只對QFrame做樣式，而不對其派生類(QLabel, QAbstractScrollArea 等等)生效 */

1.4、ID 選擇器

/* 格式：#id{ 屬性: 值; } */ /* id 指的是 objectName, 每個 QObject 類及其派生類都有的一個屬性 */ #button {color: red; }/* 一般用于特殊控件，比如登錄按鈕等 */ /* 注意點:1. objectName 是大小寫敏感的.2. “#”與 ID 之間不可以有空格3. 由于 objectName 是所有 QObject 類對象的一個屬性, 在運行過程中可以改變, 所以一般情況下, 要使用 ID 選擇器時, 保證 objectName 不要在運行時被改變, 否則重新加載stylesheet 文件時, 對應的 ID 選擇器將不會匹配到原來的控件.4. 由于 objectName 允許字符串中含有空格, 但是 ID 選擇器中, ID 是從緊跟#后的第一個字符開始直到遇到空格或“{”之間的字符串, 因此, 如果是為了使用 ID 選擇器而設置objectName, 則 objectName 中不能含有空格5. 由于任何對象的 objectName 都可以出現重復, 因此在設置 objectName 時, 盡量保持其唯一性6. Qt 官方給出的 ID 選擇器的格式為:類名#id{ 屬性: 值; }但實際上不加類名也是可以的(加了類名的 ID 選擇器在 CSS 中被稱為交集選擇器),在正式開發中, 還是建議加上類名, 因為這樣可以看出這個 id 選擇器所匹配的對象的類型,有利于提高閱讀性. */

1.5、后代選擇器

/* 格式：選擇器 1 選擇器 2{ 屬性: 值; } */ /* 在選擇器 1 匹配的所有對象中, 找到選擇器 2 所匹配的所有后代對象 */ /* 注意點： 注意點:1. 后代選擇器必須用空格隔開每個選擇器2. 后代選擇器可以通過空格一直延續下去, 例如:選擇器 1 選擇器 2 選擇器 3 … 選擇器 N{ 屬性: 值; }3. 顧名思義, 后代選擇器不僅包含”兒子”, 還包含”孫子”, “重孫子”等, 一般來說, 只要 B 控件顯示在 A 控件上, 那么 B 控件就是 A 控件的后代.4. 后代選擇器不僅可以使用類型選擇器, 還可以使用類選擇器, id 選擇器等.5. Qt 中, 各控件的父子關系:通過簡單的驗證, 各控件的父子關系并非我們在創建對象時所指定的那樣, 實際父子關系取決于如何布局. *//* 用途：對多個相似對話框中的一個按鈕進行樣式修改時可以選擇后代選擇器 */ BaseDialog QPushButton{min-width: 120px;min-height: 40px;max-width: 120px;max-height: 40px;font-size: 20px;padding: 0px; }

1.6、子元素選擇器

/* 格式：選擇器 1 >選擇器 2 { 屬性: 值; } */ /* 子元素選擇器表示找到指定選擇器所匹配的對象中的所有特定直接子元素然后設置屬性, 即找到選擇器 1 匹配到的對象中的被選擇器 2 匹配到的直接子元素然后設置屬性 *//* 注意點1. 子元素選擇器必須用”>”連接, “>”兩邊有沒有空格都可以, 但是不建議寫空格, 因為會與后代選擇器的連接符混淆.2. 子元素選擇器只會查找”兒子”, 不會查找其他后代.3. 子元素選擇器不僅可以使用類型選擇器, 還可以使用類選擇器,id 等選擇器4. 子元素選擇器不能通過”>”一直延續下去, 只能有一個”>”5. 由于 Qt 中有繼承關系的 Widgets 較多, 在使用子元素選擇器時, 請特別注意繼承關系,比如我只想選中 QGroupBox 中的 QPushButton, 那么我即可以寫成QWidget >QPushButton{color: red;} o1也可以寫成QGroupBox>QPushButton{color: red;} o2這是因為 QGroupBox 是 QWidget 的派生類, 類型選擇器 QWidget 會選中所有它的派生類對象,這些對象中包括 QGroupBox, 因此寫法o1 會將所有的 QPushButton 的前景色設置為紅色.鑒于此種情況, 我推薦在使用子元素選擇器時, 使用類選擇器替代類型選擇器 *//* 例如我想給直接布局在 QGroupBox 的QCheckBox 設置一些特定屬性 */ .QGroupBox > .QCheckBox {color: blue; }

1.7、屬性選擇器

/* 格式：[attribute=value]{ 屬性: 值; }[attribute|=value]{ 屬性:值; }[attribute~=value]{ 屬性:值; }attribute=value 表示匹配有特定屬性 attribute, 并且值為 value 的所有控件, 然后設置樣式; attribute|=value 表示匹配有特定屬性 attribute, 并且值以 value 開頭的所有控件, 然后設置樣式; attribute~=value 表示匹配有特定屬性 attribute, 并且值包含 value 的所有控件, 然后設置樣式; *//* 注意點 1. attribute|=value 表示 attribute 屬性的值以 value 開頭, 無論 value 后面還有沒有值, 或者 value 后面是什么, 均能匹配到 */[objectName|="button"]{color: red; } /* 這表示將 objectName 屬性以 button 開頭的所有控件的前景色設置為紅色 *//* attribute~=value 表示 attribute 屬性的值中包含 value, 這里要注意的是:value 必須是獨 立的單詞, 也就是包含 value 并且 value 是被空格隔開的 */

1.8、并集選擇器

/* 格式：選擇器 1,選擇器 2,選擇器 3{ 屬性: 值; } */.QLineEdit, .QComboBox{border: 1px solid gray;background-color:white; }

1.9、子控件選擇器

/* 格式：類型選擇器::子控件{ 屬性: 值; }類選擇器::子控件{ 屬性: 值; } *//* QComboBox 的 drop-down 部分 */ QComboBox::down-arrow{image: url(:/res/arrowdown.png); } QComboBox::down-arrow:pressed {position: relative;top: 1px; left: 1px; }

1.10、偽類選擇器

/* 格式：類型選擇器:狀態{ 屬性: 值; }類選擇器:狀態{ 屬性: 值; }冒號兩邊不可有空格 */QPushButton:hover { color: white } /* 偽狀態可以使用感嘆號進行取反 */ QRadioButton:!hover { color: red } /* 偽狀態可以鏈接，在這樣的情況下，隱式地包含了邏輯與 */ QCheckBox:hover:checked { color: white } /* 上面表示在鼠標懸浮到一個已 check 的 QCheckBox 上時生效 *//* 支持并集選擇器及子控件選擇器 */ QCheckBox:hover, QCheckBox:checked { color: white } QComboBox::drop-down:hover { image: url(dropdown_bright.png) }

2、屬性

2.1、背景屬性 background

連寫格式:background: color image repeat position;

背景共有 7 個屬性, 既可以每個屬性單獨設置, 也可以連寫
background-color
??設置控件的背景顏色, 默認是 border 之內的矩形區域, 包括內邊距和內容矩形
background-image
??格式是 url(filename), filename 是一個本地文件路徑或 Qt 資源文件路徑, 不支持網絡圖片；
??設置控件的背景圖片. 可以與背景顏色共存, 背景圖片會覆蓋背景顏色
background-repeat
??repeat-x: 在水平方向上平鋪
??repeat-y: 在垂直方向上平鋪
??repeat: 在水平和垂直方向上都平鋪, 這是默認值(但是 Qt 好像有 bug, 設置了 repeat 反
??而不會平鋪, 不設置才平鋪)
??no-repeat: 不平鋪
??作用: 設置背景圖片的平鋪方式.

background-position
??top: 向上對齊?? left: 向左對齊
??bottom: 向下對齊?? right:向右對齊
??center: 居中
??格式：background-position: 水平對齊方式 垂直對齊方式;
background-attachment
??scroll : 滾動, 這是默認值
??fixed: 固定
??設置背景圖片在帶滾動條的控件(QAbstractScrollArea)中是固定在一個位置還是隨著滾動條滾動.
background-clip
??margin: 外邊距矩形
??border: 邊框矩形
??padding: 內邊距矩形
??content: 內容矩形
??設置背景顏色覆蓋的區域, 默認情況下背景只覆蓋內邊距矩形, 如果沒有指定, 默認值為 border
background-origin
??margin: 外邊距矩形
??border: 邊框矩形
??padding: 內邊距矩形
??content: 內容矩形
??與 background-position 和 background-image 一起使用, 指明背景圖片的覆蓋范圍矩形,如果沒有指定, 默認為 padding

2.2、前景色 color

color 設置的前景色, 也就是控件文字的顏色, color 屬性是被所有 widget 都支持的

2.3、邊框屬性 border

連寫格式：border: width style color;
border-width
??像素寬度, 數值后面一定要加上像素單位 px
border-style
??取值: dashed，dot-dash，dot-dot-dash，dotted，double，groove，inset，outset，ridge，solid，none
??設置邊框的渲染樣式





border-color
??設置邊框的顏色
border-radius
??取值: 水平半徑 垂直半徑;均是以像素為單位, 值必須帶 px, 第二個值是可選的,
??如果只有一個值, 表示同時水平半徑和垂直半徑
border-image
??格式：border-image: border-image-source border-image-slice border-image-repeat
??border-image-source: 圖片路徑
??border-image-slice: 圖片切片, 單位只能是像素值, 因此數值不必帶單位 px
??border-image-repeat：指定邊框圖片的四條邊和四個角的平鋪方式。
????有三種取值, 分別為 stretch(默認), round(均分平鋪), repeat(平鋪).
??stretch 表示拉伸四條邊相應的切片圖片,來填補邊框的間隙.
??round 是把四個角和四條邊分成均等區域然后用背景圖片切好能鋪滿整個邊框空隙, 不能多也不能少
??repeat 是做直接復制填滿空隙
單些格式：
??border-top-width border-top-style border-top-color
??border-right-width border- right -style border- right -color
??border-bottom-width border- bottom -style border- bottom -color
??border-left-width border- left -style border- left -color

2.4、字體屬性 font

連寫格式：font: style weight size family
font-style
??設置字體風格。normal: 正常，italic: 斜體，oblique: 傾斜的字體
??Italic 是使用文字的斜體，Oblique 是讓沒有斜體屬性的文字傾斜
??一些不常用的字體，或許就只有個正常體，如果你用 Italic，就沒有效果了,這時候就要用 Oblique
font-weight
??設置文字的粗細；三種方式：normal: 正常粗細、bold: 加粗、數值(數越大字越粗)
font-size
??設置字體大小。單位有px，pt，px常用
font-family
設置字體樣式。（QSS 中 font-family 只能指定一種字體）
??微軟雅黑： Microsoft YaHei
??宋體：SimSun
??黑體：SimHei
??仿宋： FangSong
??楷體： KaiTi
??隸書：LiSu
??幼圓：YouYuan
??華文細黑：STXihei
??華文楷體：STKaiti
??華文宋體：STSong
??華文中宋：STZhongsong
??華文仿宋：STFangsong
??方正舒體：FZShuTi
??方正姚體：FZYaoti
??華文彩云：STCaiyun
??華文琥珀：STHupo
??華文隸書：STLiti
??華文行楷：STXingkai
??華文新魏：STXinwei

2.5、文本屬性

text-align
??設置文本的對齊方式。top, bottom, left, right, center
??格式：text-align: 水平對齊方式 垂直對齊方式;
??支持這個屬性的控件目前只有 QPushButton 和 QProgressBar
text-decoration
??給文本添加裝飾。none: 沒有裝飾；underline: 下劃線；overline: 上劃線；line-through: 刪除線
padding
??padding: 上 右 下 左;
??padding-top: ?px;
??padding-right: ?px;
??padding-bottom: ?px;
??padding-left: ?px;
margin
??與padding一致
width, height
??這兩個屬性設置的是盒子內容的寬高.
??這兩個屬性只對子控件選擇器選中的對象有效
??這兩個屬性的取值均是像素值, 即數字加像素單位 px
outline
控件有焦點時, 繪制在邊框邊緣的外圍,可起到突出作用
??outline
??outline-color
??outline-offset
??outline-style
??outline-radius
??outline-bottom-left-radius
??outline-bottom-right-radius
??outline-top-left-radius
??outline-top-right-radius

2.6、漸變 Gradient

附錄

1、偽態列表

偽態描述

:active	當小部件位于活動窗口中。
:adjoins-item	當QTreeView的子控件::branch與物體相鄰時
:alternate
:bottom	項目位于底部
:checked	被選中狀態時
:closable	可關閉狀態時
:closed	關閉狀態時
:default	默認狀態
:disabled	不可使用狀態
:editable	可編輯態時
:edit-focus	擁有可編輯焦點時
:enabled	可用狀態時
:exclusive
:first	為第一個時。例如QTabBar的第一個選項卡
:flat	當為flat態時
:floatable	可浮動態時
:focus	擁有輸入焦點時
:has-children	擁有子物體時
:has-siblings
:horizontal	具有水平方向時
:hover	懸停在此控件上時
:indeterminate	擁有不確定態時
:last	最后一項
:left	位置位于左側時
:maximized	最大化態時
:middle	在中間時
:minimized	最小化時
:movable	可移動態時
:no-frame	無邊框態時
:non-exclusive
:off	對于可以切換的控件，處于關閉狀態時
:on	對于可切換的控件，處于打開狀態時
:only-one
:open	打開狀態時，例如QComboBox具有一個可打開的菜單
:next-selected
:pressed	當被鼠標按時，可當做clicked事件
:previous-selected
:read-only
:right
:selected	被選擇態
:top
:unchecked	未被選中態
:vertical
:window

2、子控件列表

子控件描述

::add-line	用于添加QScrollBar行的按鈕
::add-page	手柄（滑塊）和QScrollBar的add-line之間的區域
::branch	QTreeView的分支指示器
::chunk	QProgressBar的進度塊
::close-button	QDockWidget或QTabBar選項卡的關閉按鈕
::corner	QAbstractScrollArea中兩個滾動條之間的角
::down-arrow	QComboBox、QHeaderView、QScrollBar或QSpinBox的向下箭頭
::down-button	QScrollBar或QSpinBox的向下按鈕
::drop-down	QComboBox的下拉按鈕
::float-button	QDockWidget的浮動按鈕
::groove	QSlider的凹槽
::indicator	QAbstractItemView、QCheckBox、QRadioButton、可檢查QMenu項或可檢查QGroupBox的指示器
::handle	QScrollBar、QSplitter或QSlider的滑塊
::icon	QAbstractItemView或QMenu的圖標
::item	QAbstractItemView、QMenuBar、QMenu或QStatusBar的項
::left-arrow	QScrollBar的左箭頭
::left-corner	QTabWidget的左角。例如，此控件可用于控制QTabWidget中左角小部件的位置
::menu-arrow	帶有菜單的QTool按鈕的箭頭
::menu-button	QToolButton的菜單按鈕
::menu-indicator	QPushButton的菜單指示器
::right-arrow	QMenu或QScrollBar的右箭頭
::pane	QTabWidget的窗格
::right-corner	QTabWidget的右角
::scroller	QMenu或QTabBar的滾動條
::section	QHeaderView的部分
::separator	QMenu或QMainWindow中的分隔符
::sub-line	用于減去QScrollBar的一行的按鈕
::sub-page	手柄和QScrollBar的sub-line之間的區域
::tab	QTabBar或QToolBox的選項卡
::tab-bar	QTabWidget的選項卡欄
::tear	QTabBar的指示器
::tearoff	QMenu的指示器
::text	QAbstractItemView的文本
::title	QGroupBox或QDockWidget的標題
::up-arrow	QHeaderView、QScrollBar或QSpinBox的向上箭頭
::up-button	QSpinBox的向上按鈕

總結

以上是生活随笔為你收集整理的QSS属性大全的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。