Qt Style Sheets Reference 笔记

QT QSS 样式表学习

1 可设置样式表的控件
QAbstractScrollArea 
QCheckBox 
QColumnView 
QComboBox 
QDateEdit 
QDateTimeEdit 
QDialog 
QDialogButtonBox 
QDockWidget 
QDoubleSpinBox 
QFrame 
QGroupBox 
QHeaderView 
QLabel 
QLineEdit 
QListView 
QListWidget 
QMainWindow 
QMenu 
QMenuBar 
QMessageBox 
QProgressBar 
QPushButton 
QRadioButton 
QScrollBar 
QSizeGrip 
QSlider 
QSpinBox 
QSplitter 
QStatusBar 
QTabBar 
QTabWidget 
QTableView 
QTableWidget 
QTextEdit 
QTimeEdit 
QToolBar 
QToolButton 
QToolBox 
QToolTip 
QTreeView 
QTreeWidget 
QWidget 

2 可设置的属性

/////////////////////////////////////

alternate-background-color  背景色    用于抽象ItemView，若无设置，就默认为 AlternateBase规则

backgroud                   背景 

background-color            背景色

background-image            背景图

background-repeat           背景重复次数

background-position         背景对齐位置

background-attachment     背景吸附/考齐？

background-clip           背景夹？

background-origin         背景源？

///////////////////////////////////

border                   边框

border-top

border-right

border-bottom

border-left

border-color 

border-top-color

border-right-color

border-bottom-color

border-left-color

border-image 

border-radius            边框角度

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

border-style 

border-top-style

border-right-style

border-bottom-style

border-left-style

border-width 

border-top-width

border-right-width

border-bottom-width

border-left-width

bottom            离底部长度

button-layout     按钮层类型

////////////////////////////////////////////////////////////

color                              颜色

dialogbuttonbox-buttons-have-icons  按钮是否显示图标

font                               字的属性              

font-family                         字体

font-size                           子大小

font-style                          字型（粗体 斜体）

font-weight                         字的粗细

gridline-color*                      网格线颜色， QTableView用

height                               高

icon-size                            图标

image*                               子控件图片

image-position                        图片位置

left                                  左边距

lineedit-password-character*           输入密码时显示的特殊字符

lineedit-password-mask-delay*          ？？？

margin                                 对齐

margin-top

margin-right

margin-bottom

margin-left

////////////////////////////////////////////////////////

max-height 

max-width 

messagebox-text-interaction-flags*        ？？？

min-height                               最小高度

min-width                                 最小宽度

opacity*                                  不透明度

/////////////////////////////////////

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

///////////////////////////////////////////

padding                                    填充

padding-top

padding-right

padding-bottom

padding-left

paint-alternating-row-colors-for-empty-area      ？？？

position                                      位置（相对/绝对）

right 

selection-background-color*                  选中项背景色

selection-color*                             选中项颜色 

show-decoration-selected*                     ？？？

spacing*                                    内部的空格

subcontrol-origin*                         子控件源

subcontrol-position*                       子控件对齐位置

text-align                                 文本对齐

text-decoration                            文本装饰（无，上划线，下划线，横线，）

top                                        上位置

width                                       宽

///////////////////////////////////////////////////

3 图标列表

4 属性类型列表

Alignment 对齐类型   { top  | bottom | left | right | center }

Attachment 吸附类型  { scroll | fixed }

Background 背景类型  { Brush | Url | Repeat | Alignment }

Boolean 布尔类型 0 | 1

Border  边框类型  { Border Style | Length | Brush }

Border Image  边框图片类型  none | Url Number{4} (stretch | repeat){0,2}

Border Style  边框样式 dashed | dot-dash | dot-dot-dash | dotted | double | groove | inset | outset | ridge | solid | none

Box Colors 盒子颜色  Brush{1,4}

Box Lengths 盒子长度

Brush        画刷   Color | Gradient | PaletteRole

Color        颜色   rgb(r, g, b) | rgba(r, g, b, a) | hsv(h, s, v) | hsva(h, s, v, a) | #rrggbb | Color Name 

Font      字体    (Font Style | Font Weight){0,2} Font Size String

Font Size  字大小

Font Style  字型（粗体 or 斜体）    normal | italic | oblique

Font Weight  字线条大小           normal | bold | 100 | 200 ... | 900

Gradient     梯度渐变（线性模式【以直线渐变】，半径模式【以圆圈方式旋转渐变】，圆形锥度【如画眼睛那样的亮度及阴影】）  qlineargradient | qradialgradient | qconicalgradient   

Icon         图标 (Url (disabled | active | normal | selected)? (on | off)? )*

Length       长度  Number (px | pt | em | ex)?

Number       数字 （整数 or  浮点）

Origin       起源  margin | border | padding | content

PaletteRole 调色板规则  alternate-base | base | bright-text | button | button-text | dark | highlight | highlighted-text | light | link | link-visited | mid | midlight | shadow | text | window | window-text 

Radius       半径  Length{1, 2}

Repeat        重复  repeat-x | repeat-y | repeat | no-repeat

Url          文件路径 url(filename)

5 控件状态

:active       激活

:adjoins-item  QTreeView相邻项

:alternate     QAbstractItemView 备用

:bottom        在底端

:checked       选择

:closable      可关闭

:closed        关闭状态

:default       默认

:disabled      不使能

:editable      可编辑

:edit-focus     编辑中

:enabled        是能

:exclusive      组合控件中唯一的

:first          第一个

:flat           平的

:floatable      浮动

:focus          焦点中

:has-children    有子节点

:has-siblings     有兄弟

:horizontal       横向对齐

:hover            鼠标飘过

:indeterminate    不确定状态，如Checkbox的选中，不选择，之外的状态

:last             最后的

:left             左对齐的

:maximized        最大化

:middle           在中间的

:minimized        最小化

:movable          可移动

:no-frame          没有框架

:non-exclusive      非排他的（可以选择多项的）

:off                关闭的，

:on                 开启的

:only-one           唯一的

:open               QTreeView展开，开启的状态

:next-selected      下一个选中的

:pressed             按下

:previous-selected   前一个选中的

:read-only            只读

:right               右边对齐

:selected            选中的

:top                  上对齐

:unchecked           未选中

:vertical            纵向对齐

:window              窗体控件

6 子控件

::add-line The button to add a line of a QScrollBar.

::add-page The region between the handle (slider) and the add-line of a QScrollBar.

::branch The branch indicator of a QTreeView.

::chunk The progress chunk of a QProgressBar.

::close-button The close button of a QDockWidget or tabs of QTabBar

::corner The corner between two scrollbars in a QAbstractScrollArea

::down-arrow The down arrow of a QComboBox, QHeaderView (sort indicator), QScrollBar or QSpinBox.

::down-button The down button of a QScrollBar or a QSpinBox.

::drop-down The drop-down button of a QComboBox.

::float-button The float button of a QDockWidget

::groove The groove of a QSlider.

::indicator The indicator of a QAbstractItemView, a QCheckBox, a QRadioButton, a checkable QMenu item or a checkable QGroupBox.

::handle The handle (slider) of a QScrollBar, a QSplitter, or a QSlider.

::icon The icon of a QAbstractItemView or a QMenu.

::item An item of a QAbstractItemView, a QMenuBar, a QMenu, or a QStatusBar.

::left-arrow The left arrow of a QScrollBar.

::left-corner The left corner of a QTabWidget. For example, this control can be used to control position the left corner widget in a QTabWidget.

::menu-arrow The arrow of a QToolButton with a menu.

::menu-button The menu button of a QToolButton.

::menu-indicator The menu indicator of a QPushButton.

::right-arrow The right arrow of a QMenu or a QScrollBar.

::pane The pane (frame) of a QTabWidget.

::right-corner The right corner of a QTabWidget. For example, this control can be used to control the position the right corner widget in a QTabWidget.

::scroller The scroller of a QMenu or QTabBar.

::section The section of a QHeaderView.

::separator The separator of a QMenu or in a QMainWindow.

::sub-line The button to subtract a line of a QScrollBar.

::sub-page The region between the handle (slider) and the sub-line of a QScrollBar.

::tab The tab of a QTabBar or QToolBox.

::tab-bar The tab bar of a QTabWidget. This subcontrol exists only to control the position of the QTabBar inside the QTabWidget. To style the tabs using the ::tab subcontrol.

::tear The tear indicator of a QTabBar.

::tearoff The tear-off indicator of a QMenu.

::text The text of a QAbstractItemView.

::title The title of a QGroupBox or a QDockWidget.

::up-arrow The up arrow of a QHeaderView (sort indicator), QScrollBar or a QSpinBox.

::up-button The up button of a QSpinBox.

7 样式的适用控件语法

《1.1 全部选中

*{样式名: 样式值}

《1.2 使用控件类型选中，包括子类

QPushButton {样式名: 样式值}

QPushButton, QLabel{样式名: 样式值}

《1.3 使用控件类型 + 属性选中 （等于 or 不等于）

QPushButton[flat="false"] {样式名: 样式值}

QPushButton[flat~="false"] {样式名: 样式值}      

 《1.4 使用控件类型选中，不包括子类

.QPushButton {样式名: 样式值}

*[class~="QPushButton"]{样式名: 样式值}

 《1.5 使用控件类型选中 + 控件名（object name）

QPushButton#okButton {样式名: 样式值}

 《1.6 使用父控件类型 + 后裔控件类型名。递归后裔选中，包括子控件，子控件的子控件等

QDialog QPushButton {样式名: 样式值}

 《1.7 使用父控件类型 + 子控件类型名。后裔选中，只包括直系子控件
QDialog > QPushButton {样式名: 样式值}

注意：

        pushBtn->setStyleSheet("background: red;");                //pushBtn的子控件会继承这条样式，例如toolTip等。
pushBtn->setStyleSheet("QPushButton {background: red;}"); //pushBtn的样式不会被子控件继承，且只有pushBtn会执行这条样式。

 《1.8 使用复杂控件类型 + 复杂控件类型下的附属控件名

QComboBox::drop-down {样式名: 样式值}

 《1.9 使用控件类型 + 控件当前状态

QPushButton:hover {样式名: 样式值}

QRadioButton:!hover  {样式名: 样式值}

QPushButton:hover:!pressed  {样式名: 样式值} 

8盒子模型

每个 Widget 所在的范围都是一个矩形区域（无规则窗口也是一个矩形，只是有的地方是透明的，看上去不是一个矩形而已），像是一个盒子一样。QSS 支持盒子模型（Box Model），和 CSS 的盒子模型是一样的，由 4 个部分组成：content, padding, border, margin，也就是说，Widget 的矩形区域，用这 4 个矩形表示

content

: 绘制内容的矩形区域（如绘制文本、图片），Qt 自带的 widget 都是在 content 区里绘制内容，这只是一个约定，只要你愿意，也可以在绘制到 padding, border, margin 区

padding

: 内容区和边框之间的间隔

border

: 边框，可视化的显示一个 widget 的逻辑范围，而不一定是 widget 所占矩形区域的实际大小

margin

: 想像 widget 的矩形区域有一个隐形的边框，margin 就是 border 和这个隐形边框之间的间隔
QWidget 的 content, padding, border, margin 的矩形区域都是一样大的，也就是说，margin, border, padding 的值为 0，content 的矩形和 QWidget 的矩形一样大，但是 QPushButton 默认的 margin, border, padding 的值不为 0（可以试试

setFlat(true)

 后再看看这几个值是什么）。

Margin，Border，Padding 都分为 4 个部分：上、右、下、左，它们的值可以不同：

padding: 2px 3px 4px 5px

 表示:
padding-top 为 2px
padding-right 为 3px
padding-bottom 为 4px
padding-left 为 5px

padding: 2px 4px

 表示:
padding-top 和 padding-bottom 为 2px
padding-right 和 padding-left 为 4px

padding: 2px

 表示:
padding-top、padding-right、padding-bottom、padding-left 都为 2px
Margin 和 border 的顺序和 padding 的顺序一样。

也许你也有和我一样的疑问，为什么不是从左开始，而是从上开始？对我来说，从左开始更习惯一些，但是 CSS 和 QSS 里就是这么规定的，没办法，既然不能反抗，那么就享受吧！

可能你还是不明白 margin, padding 具体是什么，下面用例子具体的的介绍它们。在 Designer 里用 QGridLayout 布局，拖放一个 QLabel 到窗口上，让其占据整个窗口，用下面的 QSS 把 QLabel 的 margin, border, padding 都设置为 50px：

QLabel {
margin: 50px;
border: 50px solid rgb(74, 74, 74);
padding: 50px;
background: white;
}

在 Designer 里选中 QLabel：
8 个蓝色小方块内就是 QLabel，外面是 parent widget 的，不属于 QLabel
标记为 margin 的部分是 margin，为 50px
标记为 padding 的部分是 padding，为 50px
用工具测量一下，得到 border 的宽也是 50px
小虚线方框内是 content rectangle，QLabel 就是在它里面绘制文本，图片等，不会绘制到 padding, border, margin 等上面（如果你自己想继承 QLabel 然后这么绘制，当然没问题）
当拖动修改窗口的大小后，QLabel 的大小随着改变了，但是 margin, border（宽）, padding 的大小都不会变，变化的只有 content rectangle
Margin 是不可见的，不绘制任何东西
Padding 是不可见的，但是 QLabel 的背景会绘制到它里面
Border 是可见的，在背景上面绘制 border（如果 border 是半透明的时候可以看到和背景的融合效果）
Content 是可见的，在背景上绘制 QLabel 的内容：文本，图片