前言：本文大部分的内容来源于同类博客。章节1.1-1.3 摘自参考文档：http://www.th7.cn/web/html-css/201405/37286.shtml。1.4摘自参考文档。https://blog.csdn.net/Staranywhere/article/details/106967756。本文仅用作知识点整理。
目录：
1.1 Qss的功能及结构
1.2 QSS基本属性设置
1.3 Qss过滤选择器和优先级
1.4 伪状态集合
1.5 利用动态属性分层次设置
1.6 代码中加载Qss
1.7 Qss高亮配置
1.8 Qss编辑工具
1.1 Qss的功能
Qt程序界面中控件的背景图片、大小、字体颜色、字体类型、按钮状态变化等属性可以通过Qss文件来设置，美化UI界面。实现界面和程序的分离，快速切换皮肤。
从层次上来说：
控件可分为前景与背景
前景：多包含文件，图片等内容
背景：多包含图片，图形等内容
从结构上来说：
由于QT style是模拟CSS的布局结构，因此其满足CSS的盒子模型
从里到外的4个区域分别是：
1： content
2: padding
3: border
4: margin
1.2 QSS基本属性设置
Qss的强大在于组合功能的强大，这里只是简单介绍基本功能，将简单功能组合起来才能实现好看的效果。
Qss背景属性（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 |
QSS边框属性（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 | �0�2 | 3 |
| box-shadow | 向方框添加一个或多个阴影。 | 3 |
Box 属性
| 属性 | 描述 | CSS |
| overflow-x | 如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。 | 3 |
| overflow-y | 如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。 | 3 |
| overflow-style | 规定溢出元素的首选滚动方法。 | 3 |
| rotation | 围绕由 rotation-point 属性定义的点对元素进行旋转。 | 3 |
| rotation-point | 定义距离上左边框边缘的偏移点。 | 3 |
QSS字体属性（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 |
QSS外边距属性（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 | 设置元素的堆叠顺序。 | 2 |
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 |
1.3 Qss过滤选择器和优先级
1.3.1 Qss选择器
Qss有一些规则用来设置符合规则的控件名称，通常是按照通用属性设置一类控件，对某个有特殊要求的在特别设置。避免大量的重复设置。分为
- 通配选择器：* ;所有的控件属性设置
*
{
}
- 类型选择器：QPushButton ; 匹配所有QPushButton和其子类的实例
QPushButton
{
}
3.类选择器： .QPushButton ; 匹配所有QPushButton的实例，但是并不匹配其子类。这是与CSS中的类选择器不一样的地方，注意前面有一个点号
.QPushButton
{
}
4.属性选择器：QPushButton[flat="false"]; 匹配所有flat属性是false的QPushButton实例，注意该属性可以是自定义的属性，不一定非要是类本身具有的属性
QPushButton[flat="false"]
{
}
5.ID选择器： #myButton; 匹配所有id为myButton的控件实例，这里的id实际上就是objectName指定的值,针对特定名称的控件设置属性。
QPushButton#myButton1, #myButton2
{
}
6.后代选择器： QDialog QPushButton ; 所有QDialog容器中包含的QPushButton，不管是直接的还是间接的。
QDialog QPushButton
{
}
7.子选择器： QDialog > QPushButton; 所有QDialog容器下面的QPushButton，其中要求QPushButton的直接父容器是QDialog
QDialog > QPushButton
{
}
1.4伪状态集合
| :active | 此状态在小部件驻留在活动窗口时设置 |
| :adjoins-item | 此状态在QTreeView的::branch与一个item相邻时设置 |
| :alternate | 当QAbstractItemView::alternatingRowColors()设置为真时，在绘制QAbstractItemView的行时，为每个交替行设置此状态 |
| :bottom | 此item位于底部。例如，QTabBar有位于底部的选项卡 |
| :checked | 此item被选中。例如，QAbstractButton的checked状态 |
| :closable | 此item可以被关闭。例如，QDockWidget的QDockWidget::DockWidgetClosable特性开启时 |
| :closed | 此item处于关闭状态。例如，QTreeView中未展开的item |
| :default | 此item的默认状态。例如，一个default的QPushButton或QMenu中的一个默认动作 |
| :disabled | 此item被禁用 |
| :editable | 如QComboBox是可编辑的 |
| :edit-focus | 此item具有编辑焦点(参考QStyle::State_HasEditFocus)。此状态仅对Qt扩展应用程序可用 |
| :enabled | 此item已启用 |
| :exclusive | 此item是一个独占项组的一部分。例如，独占QActionGroup中的菜单项 |
| :first | 此item是列表中的第一项。例如，QTabBar中的第一个选项卡 |
| :flat | 此item是平的。例如，一个扁平的QPushButton |
| :floatable | 此item可以浮动。例如，QDockWidget的QDockWidget::DockWidgetFloatable的特性开启时 |
| :focus | 此item具有输入焦点 |
| :has-children | 此item具有子对象。例如，QTreeView中具有子项的项 |
| :has-sibling | 此item具有兄弟对象。例如，QTreeView中与之相邻的项 |
| :horizontal | 此item处于水平方向 |
| :hover | 鼠标悬浮在此item上 |
| :indeterminate | 此item处于不确定状态。例如，QCheckBox或QRadioButton被部分选中 |
| :last | 此item是列表中的最后一项。例如，QTabBar中的最后一个选项卡 |
| :left | 此item位于左侧。例如，QTabBar有位于左侧的选项卡 |
| :maximized | 此item处于最大化状态。例如，一个最大化的QMdiSubWindow |
| :middle | 此item是列表中的中间一项。例如，一个不在QTabBar中的开头或结尾的选项卡 |
| :minimized | 此item处于最小化状态。例如，一个最小化的QMdiSubWindow |
| :movable | 此item可以被移动。例如， QDockWidget的QDockWidget::DockWidgetMovable特性开启时 |
| :no-frame | 此item没有边框。例如，没有边框的QSpinBox或QLineEdit |
| :non-exclusive | 此item是一个非独占项组的一部分。例如，非独占QActionGroup中的菜单项 |
| :off | 对可以切换的items，这适用于处于off状态的item |
| :on | 对可以切换的items，这适用于处于on状态的widget |
| :only-one | 此item是列表中的唯一的一项。例如，一个在QTabBar中单独的选项卡 |
| :open | 此item处于打开状态。例如，QTreeView中的展开项，或带有菜单的QComboBox或QPushButton |
| :next-selected | 此item是列表中的下一个被选中的项。例如，在QTabBar中当前选项卡的下一个要选中的选项卡 |
| :pressed | 鼠标正在按压在此item上 |
| :previous-selected | 此item是列表中的上一个被选中的项。例如，在QTabBar中当前选项卡的上一个要选中的选项卡 |
| :selected | 此item处于选中状态。例如，一个在QTabBar中被选中的选项卡或一个在菜单中被选中的菜单项 |
| :top | 此item位于顶部。例如，QTabBar有位于顶部的选项卡 |
| :unchecked | 此item处于未被选中状 |
| :vertical | 此item处于垂直方向 |
| :window | 小部件是一个窗口(例如，一个顶层小部件) |
1.5 利用动态属性分层次设置
为控件添加动态属性，利用属性选择器。对界面进行分层次设置皮肤。
界面色彩一般分为：主色（EssentialColour），辅助色（ComplementaryColors）
点缀色（OrnamentColour）,中性色（NeutraColourl）。因此一般为界面控件添加四种动态属性。
各种色彩对应界面部分：
主色：顶部标题栏和背景色
辅助色：为主色临近色或同系色。各子个模块颜色
点缀色：为主色的互补色，对标题或模块进行装饰。如边框花边
中性色：以主色为色基的中性色。一般为文字。
例：QMinWidno[EssentialColour=true]{background:#7F9AB8}(主色)
QWidget[ComplementaryColors=true]{background:#7F9AB8}(辅助色)
QWidget[OrnamentColour=true]{background:#7F9AB8}(点缀色)
QWidget[NeutraColourl=true]{background:#7F9AB8}(中性色)
1.6 代码中加载Qss：main.cpp中添加
QString qss;
QFile qssFile(pStyleSheet);
qssFile.open(QFile::ReadOnly);
if(qssFile.isOpen()){
qss = QObject::tr(qssFile.readAll());
qApp->setStyleSheet(qss);
qssFile.close();
}
1.7 Qss高亮配置
-
进入：工具 -> 选项 -> 环境 -> MIME 类型。
-
在【已注册的MIME类型】处输入“text/css”可以快速定位，然后在【详情】中的“模式”处添加
*.qss，即将原来的“模式”改为：*.css;*.CSSL;*.qss。注意：中间用分号（;）分隔
高亮
重新打开 qss 文件就可以高亮显示了
1.8 Qss 编辑工具
为什么要使用qss编辑工具？这是因为qt creater中编辑样式后，不能实时查看编辑效果，导致调整控件样式时效率极低。利用一款qss 编辑工具将样式快速编辑好并导出qss文件，这样能大大提高效率。推荐使用QssEditor编辑工具对qss进行编辑。作者：dmitrykx，是Qt4的开发者。qss editor 能高亮显示关键字，实时查看编辑效果，能导出qss文件。
资源地址：https://download.csdn.net/download/zeng675147/19952932?spm=1001.2014.3001.5501
