Qt -qss样式表

1.什么是qss

qss是Qt程序界面中用来设置控件的背景图片、大小、字体颜色、字体类型、按钮状态变化等属性，用于美化UI界面。实现界面和程序的分离，快速切换皮肤。

2. 选择器类型

2.1 类选择器

// 匹配QPushButton的实例及其子类
QPushButton {
    color: blue;
}

// 匹配QPushButton的实例，但不包含子类
.QPushButton {
    color: blue;
}

2.2 选择器分组

// 同时匹配QPushButton、QLineEdit的实例
QPushButton, QLineEdit {color:blue;}

2.3 ID选择器

// 匹配所有objectName为btn的实例
*#btn {font-weight:bold;}

// 和*#btn一样，匹配所有objectName为btn的实例
#btn {font-weight:bold;}

// 匹配所有objectName为btn的QPushButton实例
QPushButton#btn {font-weight:bold;}

2.4 属性选择器

// 匹配包含flat属性的所有实例
*[flat] {color:red;}

// 匹配包含flat属性的所有QPushButton的实例
QPushButton[flat] {color:red;}

// 匹配flat属性为true的所有QPushButton的实例
QPushButton[flat="true"] {color:red;}

// 匹配falt属性为true且default属性为false的所有QPushButton的实例
QPushButton[flat="true"][default="false"] {color:red;}

2.5 后代选择器

// 匹配属于QDialog后代（孩子，孙子等）的QPushButton所有实例
QDialog QPushButton {color:red;}

2.6 子元素选择器

// 匹配属于QDialog直接子类的QPushButton所有实例
QDialog > QPushButton {color:red;}

2.7 伪状态

匹配hover状态的所有QPushButton的实例
QPushButton:hover { color: white }

匹配同时为hover和enabled状态的所有QPushButton的实例
QPushButton:hover:enabled { color: white }

匹配不为hover状态的所有QPushButton的实例
QRadioButton:!hover { color: red }

2.8 子控件选择器

QRadioButton::indicator::unchecked:disabled {
    image: url(:/qss/radiobutton.png);
}

3. 选择器优先级

优先使用更具体的选择器。

4. QSS支持的类型、属性、伪状态、子控件

Qt的官方的文档中有详细的介绍:
《Qt Style Sheets Reference》

5. 盒子模型

在使用QSS设置样式时，有一个关键的概念需要知晓，那就是“盒子模型”。

每个Widget都被视为具有4个同心矩形的框：

• MARGIN矩形、BORDER矩形、PADDING矩形和CONTENT矩形，上图标注了每个矩形的区域。
• 默认情况下MARGIN矩形、BORDER矩形、PADDING矩形的宽度都为0，这样在默认情况下，4个矩形就重合为1个CONTENT矩形了。
• 默认情况下background-image指定的背景，只在border内的区域绘制。但我们要也可以使用background-clip或background-origin属性来更改这种默认行为。

background-image指定的背景图像无法随Widget大小自动缩放，要提供可以随Widget大小缩放的背景图像可以使用border-image和image属性，二者区别如下：

• border-image属性指定的图像从border及其内的区域开始绘制，会导致border属性被覆盖。
• image属性指定的图像从绘制到content区域内，image指定的url为SVG图像，则支持自动缩放，非SVG图像仅支持自动缩小。

6. Qt中样式表的属性

文本属性(Text)

属性	说明
color	设置文本的颜色。
direction	规定文本的方向/书写方向。
letter-spacing	设置字符间距。
line-height	设置行高。
text-align	规定文本的水平对齐方式。
text-decoration	规定添加到文本的装饰效果。
text-indent	规定文本块首行的缩进。
text-shadow	规定添加到文本的阴影效果。
text-transform	控制文本的大小写。
unicode-bidi	设置文本方向。
white-space	规定如何处理元素中的空白。
word-spacing	设置单词间距。
hanging-punctuation	规定标点字符是否位于线框之外。
punctuation-trim	规定是否对标点字符进行修剪。
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。
text-justify	规定当text-align设置为"justify"时所使用的对齐方法。
text-outline	规定文本的轮廓。
text-overflow	规定当文本溢出包含元素时发生的事情。
text-shadow	向文本添加阴影。
text-wrap	规定文本的换行规则。
word-break	规定非中日韩文本的换行规则。
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。

字体属性(Font)

属性	说明
font	在一个声明中设置所有字体属性。
font-family	规定文本的字体系列。
font-size	规定文本的字体尺寸。
font-size-adjust	为元素规定 aspect 值。
font-stretch	收缩或拉伸当前的字体系列。
font-style	规定文本的字体样式。
font-variant	规定是否以小型大写字母的字体显示文本。
font-weight	规定字体的粗细。

背景属性(Background)

属性	说明
background	在一个声明中设置所有的背景属性。
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	设置元素的背景图像。
background-position	设置背景图像的开始位置。
background-repeat	设置是否及如何重复背景图像。
background-clip	规定背景的绘制区域。
background-origin	规定背景图片的定位区域。
background-size	规定背景图片的尺寸。

边框属性(Border和Outline)

属性	说明
border	在一个声明中设置所有的边框属性。
border-bottom	在一个声明中设置所有的下边框属性。
border-bottom-color	设置下边框的颜色。
border-bottom-style	设置下边框的样式。
border-bottom-width	设置下边框的宽度。
border-color	设置四条边框的颜色。
border-left	在一个声明中设置所有的左边框属性。
border-left-color	设置左边框的颜色。
border-left-style	设置左边框的样式。
border-left-width	设置左边框的宽度。
border-right	在一个声明中设置所有的右边框属性。
border-right-color	设置右边框的颜色。
border-right-style	设置右边框的样式。
border-right-width	设置右边框的宽度。
border-style	设置四条边框的样式。
border-top	在一个声明中设置所有的上边框属性。
border-top-color	设置上边框的颜色。
border-top-style	设置上边框的样式。
border-top-width	设置上边框的宽度。
border-width	设置四条边框的宽度。
outline	在一个声明中设置所有的轮廓属性。
outline-color	设置轮廓的颜色。
outline-style	设置轮廓的样式。
outline-width	设置轮廓的宽度。
border-bottom-left-radius	定义边框左下角的形状。
border-bottom-right-radius	定义边框右下角的形状。
border-image	简写属性，设置所有 border-image-*属性。
border-image-outset	规定边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
border-image-slice	规定图像边框的向内偏移。
border-image-source	规定用作边框的图片。
border-image-width	规定图片边框的宽度。
border-radius	简写属性，设置所有四个border-*-radius属性。
border-top-left-radius	定义边框左上角的形状。
border-top-right-radius	定义边框右下角的形状。
box-decoration-break	元素在发生断行时其样式的表现形式
box-shadow	向方框添加一个或多个阴影。

外边距属性(Margin)

属性	说明
margin	在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

内边距属性(Padding)

属性	说明
padding	在一个声明中设置所有内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

位属性(Positioning)

属性	说明
bottom	设置定位元素下外边距边界与其包含块下边界之间的偏移。
clear	规定元素的哪一侧不允许其他浮动元素。
clip	剪裁绝对定位元素。
cursor	规定要显示的光标的类型（形状）。
display	规定元素应该生成的框的类型。
float	规定框是否应该浮动。
left	设置定位元素左外边距边界与其包含块左边界之间的偏移。
overflow	规定当内容溢出元素框时发生的事情。
position	规定元素的定位类型。
right	设置定位元素右外边距边界与其包含块右边界之间的偏移。
top	设置定位元素的上外边距边界与其包含块上边界之间的偏移。
vertical-align	设置元素的垂直对齐方式。
visibility	规定元素是否可见。
z-index	设置元素的堆叠顺序。

Box属性

属性	说明
overflow-x	如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。
overflow-y	如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。
overflow-style	规定溢出元素的首选滚动方法。
rotation	围绕由 rotation-point 属性定义的点对元素进行旋转。
rotation-point	定义距离上左边框边缘的偏移点。

7. 伪状态列表

伪状态	描述
:active	当小组件驻留在活动窗口中时，将设置此状态。
:adjoins-item	当 的 与项目相邻时，将设置此状态。
:alternate	当 （） 设置为 true 时，绘制 （） 的行时，将为每个交替行设置此状态。
:bottom	该项目位于底部。例如，其选项卡位于底部的 。
:checked	该项目已选中。例如，的状态。
:closable	可以关闭这些项目。例如，已打开该功能。
:closed	项目处于关闭状态。例如，非展开项在
:default	该项为默认值。例如，a 或 .
:disabled	该项目是 。
:editable	是可编辑的。
:edit-focus	项目具有编辑焦点（请参阅）。此状态仅适用于 Qt 扩展应用程序。
:enabled	该项目是 。
:exclusive	该物料是独占物料组的一部分。例如，独占 .
:first	该项是第一个（在列表中）。例如，.
:flat	该项目是平坦的。例如，.
:floatable	这些项目可以浮动。例如，已打开该功能。
:focus	该项目具有 .
:has-children	项目具有子项。例如，具有子项的项。
:has-siblings	该项目有同级。例如，同级中的项目。
:horizontal	项目具有水平方向
:hover	鼠标悬停在项目上。
:indeterminate	项目具有不确定状态。例如，a 或 是 。
:last	该项是最后一个（在列表中）。例如，.
:left	该项目位于左侧。例如，选项卡位于左侧的 。
:maximized	项目最大化。例如，最大化的 .
:middle	该项位于中间（在列表中）。例如，不在开头或不在结尾的制表符。
:minimized	该项目已最小化。例如，最小化的 .
:movable	该项目可以四处移动。例如，已打开该功能。
:no-frame	项目没有框架。例如，无框或 .
:non-exclusive	物料是非独占物料组的一部分。例如，非独占 .
:off	对于可以切换的项目，这适用于处于“关闭”状态的项目。
:on	对于可以切换的项目，这适用于处于“打开”状态的小部件。
:only-one	该项是唯一的项（在列表中）。例如，.
:open	项目处于打开状态。例如，打开菜单中的展开项、或 或。
:next-selected	下一个项目（在列表中）被选中。例如，a 的选定选项卡位于此项目旁边。
:pressed	正在使用鼠标按下该项目。
:previous-selected	上一项（在列表中）处于选中状态。例如，所选选项卡旁边的选项卡。
:read-only	项目标记为只读或不可编辑。例如，只读或不可编辑的 .
:right	该项目位于右侧。例如，其选项卡位于右侧的 。
:selected	项目处于选中状态。例如，a 中的选定选项卡或 .
:top	该项目位于顶部。例如，其选项卡位于顶部的 。
:unchecked	该项目是 。
:vertical	该项目具有垂直方向。
:window	小部件是一个窗口（即顶级小部件）

子控件列表

子控件	描述
::add-line	用于添加一行 .
::add-page	手柄（滑块）和 之间的区域。
::branch	的分支指示器。
::chunk	的进度块。
::close-button	的关闭按钮或选项卡
::corner	两个滚动条之间的角
::down-arrow	、 （排序指示器）或 的向下箭头。
::down-button	a 或 a 的向下按钮。
::drop-down	.
::float-button	浮动按钮
::groove	一个.
::indicator	a 、 a 、 、 可检查项目或可检查项目的指示符。
::handle	、 或 的手柄（滑块）。
::icon	或 .
::item	a 、 a 、 a 或 a 的项目。
::left-arrow	的左箭头。
::left-corner	的左上角。例如，此控件可用于控制左上角小部件在 中的位置。
::menu-arrow	带有菜单的箭头。
::menu-button	的菜单按钮。
::menu-indicator	的菜单指示器。
::right-arrow	a 或 a 的右箭头。
::pane	的窗格（框架）。
::right-corner	的右上角。例如，此控件可用于控制右上角小部件在 .
::scroller	或 的滚动条。
::section	一节。
::separator	a 或 in 中的分隔符。
::sub-line	用于减去一行的按钮。
::sub-page	手柄（滑块）和 之间的区域。
::tab	或 的制表符。
::tab-bar	的选项卡栏。此子控件的存在只是为了控制 .使用子控件设置选项卡样式。
::tear	的撕裂指示器。
::tearoff	的撕裂指示器。
::text	的文本。
::title	a 或 a 的标题。
::up-arrow	（排序指示器）的向上箭头或 .
::up-button	的向上按钮。

8. 字体名

微软雅黑： Microsoft YaHei
宋体：SimSun
黑体：SimHei
仿宋： FangSong
楷体： KaiTi
隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti

Qt的CSS/QSS帮助文档

打开Qt Assistant工具，在索引页面查找关键字：

1、“Qt Style Sheets Reference”查看Qt样式表的用法

2、“Qt Style Sheets Examples” 查看Qt样式表的实例

3、“The Style Sheet Syntax” 查看Qt样式表语法