学习QSS样式表

本篇介绍什么是样式表，讨论如何使用Qt样式表Qss修改应用程序外观，并通过实例进行讲解。

了解HTML的同学都知道，一般在HTML中我们把样式表叫做CSS，在Qt中我们称之为QSS。QSS和CSS并不完全等同，语法完全类似，定义上存在一些差别。

一、 什么是QSS

QSS是Qt程序界面中用来设置控件的背景图片、大小、字体颜色、字体类型、按钮状态变化等属性，用于美化UI界面。实现界面和程序的分离，快速切换皮肤。
QSS最大的优点就是简单便捷，我们可以通过它快速实现应用程序的外观界面。

QSS官方：Qt Style Sheets Reference | Qt Widgets 5.15.8

CSS参考手册：CSS 参考手册

---

二、辅助工具

样式编辑器，源码地址：https://github.com/hustlei/QssStylesheetEditor，也可以直接去网上下载。

皮肤生成器，源码地址：https://github.com/satchelwu/QSS-Skin-Builder

素材库，阿里矢量图：iconfont-阿里巴巴矢量图标库

---

三、Qt样式表设置函数：setStyleSheet

方式一：

  btn1->setStyleSheet("QPushButton{color:red}"); //设定前景颜色，就是字体颜色
  btn1->setStyleSheet("QPushButton{background:yellow}"); //设定背景颜色为红色
1
2

方式二：

QFile file(":/qss/main.qss");
file.open(QFile::ReadOnly);
QTextStream filetext(&file);
QString stylesheet = filetext.readAll();
this->setStyleSheet(stylesheet);
file.close();
1
2
3
4
5
6

直接在界面添加样式表：

---

四、Qss选择器

1、通用选择器

通用选择器又叫通配符选择器；
格式：

* { attribute: value; }
1

通用选择器用（*）来表示，它表示匹配程序中所有的widget。
注意点：由于通用选择器会匹配所有的widgets，效率较低，因此应该尽量减少或者不用
一般用法：通用选择器一般用来给应用程序设置统一的字体，例如：

* { font: normal 20px “微软雅黑”; }
1

这条语句表示将程序中所有widget的字体大小都设置为20px大小，字体采用微软雅黑。

---

2、类型选择器

格式：

className { attribute: value; }
1

类名即Widget类名，由QObject::metaObject()::className获取，类型选择器匹配所有该类以及该类的派生类的对象，例如：

QPushButton
{
	color: blue;
}
1
2
3
4

这条语句表示，程序中所有的QPushButton类和它的派生类的对象，它们的前景色（即文字颜色）被设置为蓝色。
注意点：Qt样式表使用widget的QObject::className()来决定何时应用类型选择器。当自定义控件在命令空间之中（或它是一个嵌套类），QObject::className()会返回（::），这与子控件选择器相冲突，为了解决这个问题，当为命名空间中widget使用类型选择器时，我们必须将"::“替换成”–"，例如：

namespace ns 
{
	class MyPushButton : public QPushButton
	{
		//...
	}
}

//...
qApp->setStyleSheet("ns--MyPushButton {background: yellow; }");
1
2
3
4
5
6
7
8
9
10

一般用法：类型选择器会匹配所有该类以及该类的派生类的对象，所以我们在程序中，有时为了统一一些具有相似性的控件的样式，可以使用类型选择器，如，我们想要为QSpinBox，QDoubleSpinBon，QDateTimeEdit，QDateEdit，QDataEdit等这些编辑框的控件设置一些相同的样式，因为它们都是QAbstractSpinBox类的派生类，因此可以如下写：

QAbstractSpinBox
{
	min-height: 30px;
	max_height: 30px;
	border-width: 1px;
	rder-style: solid;
	order-color: gray;
	padding: 0px;
}
1
2
3
4
5
6
7
8
9

---

3、类选择器

格式：

.className {attribute: value; }
1

这里的类名与类型选择器中的类名一样，不同的是，类选择器的类名前面有一个（.），这种选择器只会匹配该类的所有对象，而不会匹配其派生类的对象。例如：

.QPushButton
{
	color: blue;
}
1
2
3
4

一般用法：类选择器提供了一种匹配该类的对象但不会匹配派生类的方法，通常用来特例化拥有派生类的类对象，但不仅限于此。例如在应用程序中，使用QFrame作为容器widget，此时想要对它设置一些样式，但又不想影响它的子类对象（QLable、QAbstractScrollArea等等），那么就可以使用类选择器给所有的QFrame设置相同的样式，例如：

.QFrame
{
	padding: 15px 25px;
}
1
2
3
4

---

4、ID选择器

格式：

#ID { attribute: value; }
1

这里的ID指的是objectName，每个QObject类及其派生类都有一个属性，“#”+objectName构成了ID选择器，它匹配所有objectName为ID选择器所指定的名称的对象，为其设置样式，例如：

#button_1
{
	color: red;
}
1
2
3
4

注意点：

1. objectName是大小写敏感的；
2. "#"与ID之间不可以有空格；
3. 由于objectName是所有QObject类对象的一个属性，在运行过程中可以改变，所以一般情况下，要使用ID选择器时，保证objectName不要在运行时被改变，否则重新加载stylesheet文件时，对应的ID选择器将不会匹配到原来的控件。
4. 由于objectName允许字符串中含有空格，但是ID选择器汇总，ID是从紧跟#后的第一个字符开始直到遇到空格或"{"之间的字符串，因此，如果是为了使用ID选择器而设置objectName，则objectName中不能含有空格。
5. 由于任何对象的objectName都可以出现重复，因此在设置objectName时，尽量保持其唯一性。

Qt官方给出的ID选择器的格式为:

className#ID {attribute: value; }
1

但实际上不加类名也是可以的（加了类名的ID选择器在CSS中被称为交集选择器），在正式开发中，还是建议加上类名，因为这样可以看出这个ID选择器所匹配的对象的类型，有利于提高阅读性。
基于以上特点，我们在设置objectName时，一般使用下划线"_"连接的多个单词表明此对象的功能。

一般用法：ID选择器一般用于比较特殊的控件设置样式，例如在应用程序的某个页面中，需要突出一个重要的按钮，那么此时我们可以给这个按钮设置一个独特的样式用以提醒用户，如：

QPushButton#settings_popup_fileDialog_button
{
	min-height: 31px;
	min-width: 70px;
	border: 1px solid black;
	color: #FOFOFO;
	min-height: 10px;
	border-radius: 3px;
	background: qlineargradient(spread: pad, x1:0,y1:0,x2:0,y2:1,stop:0 #454648,stop:1 #7A7A7A);
}
1
2
3
4
5
6
7
8
9
10

---

5、后代选择器

格式：

selector1 selector2 { attribute: velue; }
1

这个选择器表示：在选择器1匹配的所有对象中，找到选择器2匹配的所有后代对象，并给它们设置样式。
注意点：

1. 后代选择器必须使用空格隔开每个选择器；
2. 后代选择器可以通过空格一直延续下去，例如：
   selector1 selector2 … selectorN { attribute: velue; }
3. 顾名思义，后代选择器不仅包含“儿子”，还包含“孙子”，“重孙子”等，一般来说，只要B控件显示在A控件上，那么B控件就是A控件的后代。
4. 后代选择器不仅可以使用类型选择器，还可以使用类选择器，ID选择器等。
5. Qt中，各控件的父子关系：通过简单的验证，各控件的父子关系并非我们在创建对象时所指定的那样，实际父子关系取决于如何布局。
   一般用法：后代选择器一般用于指定类的后代的样式，例如在我的应用程序中，有很多相似的对话框，它们中包含一些样式相同的按钮，那么我可以使用后代选择器为它们指定样式，例如：

BaseDialog QPushButton
{
	min-width: 12px;
	min-height: 40px;
	max-width: 120px;
	max-height: 40px;
	font-size: 20px;
	padding: 0px;
}
1
2
3
4
5
6
7
8
9

---

6、子元素选择器

格式：

selector1>selector2 { attribute: value; }
1

子元素选择器表示找到指定选择器所匹配的对象中的所有特定直接子元素然后设置属性，即找到选择器1匹配到的对象中的被选择器2匹配到的直接子元素然后设置属性。
注意点：

1. 子元素选择器必须用">“连接，”>"两边有没有空格都可以，但是不建议写空格，因为会与后代选择器的连接符混淆；
2. 子元素选择器只会查找“儿子”，不会查找其他后代；
3. 子元素选择器不仅可以使用类型选择器，还可以使用类选择器，ID选择器；
4. 子元素选择器不能通过">“一直延续下去，只能有一个”>"；
5. 由于Qt中有继承关系的Widgets较多，在使用子元素选择器时，请特别注意继承关系
   比如我只想选中QGroupBox中的QPushButton， 那么我可以写成：
   QWidget>QPushButoon{ color:red; } ① 也可以写成
   QGroupBox>QPushButton{ color: red; } ②
   这是因为QGroupBox是QWidget的派生类，类型选择器QWidget会选中所有它的派生类对象，这些对象中包括QGroupBox，因此写法①会将所有的QPushButton的前景色设置为红色。
   鉴于此种情况，在使用子元素选择器时，使用类选择器替代类型选择器。

一般用法： 子元素选择器一般用于一些特定布局条件中的控件，例如，我想给直接布局在QGroupBox的QCheckBox设置一些特定属性，那么可以这么做：

.QGroupBox>.QCheckBox
{
	color: blue;
}
1
2
3
4

---

7、属性选择器

格式：

[attribute=value]{ attribute: value; }
[attribute|=value]{ attribute: value; }
[attribute~=value]{ attribute: value; }
1
2
3

attribute=value表示匹配有特定属性attribute，并且值为value的所有控件，然后设置样式；
attribute|=value表示匹配有特定属性attribute，并且值以value开头的所有控件，然后设置样式；
attribute~=value表示匹配有特定属性attribute，并且值包含value的所有控件，然后设置样式。

注意点：
1、 attribute|=value表示attribute属性的值以value开头，无论value后面还有没有值，或者value后面是什么，均能匹配到，例如：

[objectName|="button"]
{
	color: red;
}
1
2
3
4

这表示将objectName属性以button开头的所有控件的前景色设置为红色。
2、 attribute~=value表示attribute属性的值中包含value，这里要注意的是value必须是独立的单词，也就是包含value并且value是被空格隔开的，例如：

[objectName~="button"]
{
	color: red;
}
1
2
3
4

在代码中，设置的objectName的语句为：

btn1->setObjectName("button123");
btn2->setObjectName("abc button 2");
1
2

结果只会匹配到btn2所指的对象
3、官方文档的解释：通常情况下，这里的属性指的是，使用Q_PROPERTY宏声明的属性，并且属性类型要受QVariant::toString()支持。
这个选择器类型也可以用来判断动态属性，要了解更多使用自定义动态属性的细节，请参考使用自定义动态属性。
处理使用=，还可以使用~=来判断一个QStringList中是否包含给定的QString。
警告：如果在设置了样式表后，相应的属性值发生率改变（如flat变成了"true"），则有必要重新加载样式表，一个有效的方法是，取消样式表，再重新设置一次，下面的代码是其中的一种方式：

style()->unpolish(this);
style()->polish(this);
1
2

一般用法： 属性选择器一般不常用，如果要用，可以参照官方文档的方法使用

---

8、并集选择器

格式：

selector1,selector2,selector3{ attribute: value; }
1

并集选择器表示，将每个单独选择器匹配到的控件放在同一结果集中，并给结果集中的每个控件都设置声明语句中的样式。
注意点：

1. 并集选择器必须使用","来连接不同的选择器；
2. 并集选择器可以使用类选择器，类型选择器，ID选择器，属性选择器等。

一般用法： 主要用于给具有相同属性并且外观相似的控件设置样式，例如：

.QLineEdit,.QComboBox
{
	border: 1px solid gray;
	background-color: white;
}
1
2
3
4
5

---

9、子控件选择器

格式：

类型选择器::子控件{ 属性: 值; }
类选择器::子控件{ 属性: 值; }
1
2

表示对类型选择器或类选择器指定的所有控件的子控件设置样式；

Qt官方说明：
为了样式化你的复杂widget，很有必要使用widget的subcontrol，比如QComboBox的drop-down部分或者是QSpinBox的上和下箭头。选择器也许会包含subcontrols用于限制widget的subcontrols，例如：

QComboBox::down-arrow
{
	image: url(:/res/arrowdown.png);
}
1
2
3
4

上述规则样式话所有QComboBox的drop-down部分，虽然双冒号(::)让人联想到CSS3的伪元素语法，但是Qt的Sub-Controls跟它是不一样的。
Sub-Control始终相对于另一个元素来定义一个参考元素。这个参考元素可以是一个Widget又或者是另一个Sub-Control。例如，QComboBox的::drop-down默认被放置于QComboBox的Padding rectangle（盒子模型）的右上角。::drop-down默认会被放置于另一个::drop-down Sub-Control的中心。查看可样式化的Widget列表以了解很多使用Sub-Control来样式化Widget和初始化其位置的内容。
源rectangle可以使用subcontrol-origin来改变。举个例子，如果我们想要把drop-down方式于QComboBox的margin rectangle而不是默认的Padding rectangle，我们可以像下面这样指定：

QComboBox
{
	margin-right: 20px;
}
QComboBox::drop-down
{
	subcontrol-origin: margin;
}
1
2
3
4
5
6
7
8

drop-down在Margin rectangle内的排列方式可以由subcontrol-position来改变。
width和height属性可以用来控制Sub-Control的size。需要注意的是，设置了image就隐式的设置了Sub-Control的size了。
相对定位方案（position:relative），允许Sub-Control的位置从它的初始化位置作出偏移。举个例子，当QComboBox的drop-down按钮被pressed时，我们也许想要那个箭头作出位移以显示一种"pressed"的效果，为了达到目标，我们可以像下面那样指定：

QComboBox::down-arrow
{
	image: url(down-arrow.png);
}
QComboBox::down-arrow:pressed
{
	position: relative;
	top: 1px; left: 1px;
}
1
2
3
4
5
6
7
8
9

绝对定位方案（position:absolute），使得Sub-Control的position和size基于其参考元素而改变。
一旦定位，它们将会与widget同等对待并且使用盒子模型来样式化。
查看Sub-Control列表以了解哪些sub-control是被支持的，并且可以查看自定义QPushButton的菜单指示器Sub-Control来了解一个实际的使用例子。
注意：像QComboBox和QScrollBar这样的复杂部件，如果sub-control的一项属性是自定义的，那么其他所有的属性跟sub-control也都应该自定义。

---

10、伪类选择器

格式：

类型选择器:状态{ 属性: 值; }
类选择器:状态{ 属性: 值; }
1
2

表示对类型选择器或类选择器指定的所有控件设置它在指定状态的样式。
Qt官方说明：
选择器也许会包含基于widget的state的程序限制规则的伪状态。伪状态以冒号(:)作为分隔紧跟着伪选择器。举个例子，下面的规则在鼠标悬浮在QPushButton的上方时生效：

QPushButton:hover { color: white }
1

伪状态可以使用感叹号进行取反，下面一条规则在鼠标没有悬浮在QRadioButton上方时生效

QRadioButton:!hover{ color: red }
1

伪状态可以链接，在这样的情况下，隐式地包含了逻辑与。举个例子，下面的一条规则在鼠标悬浮到一个已check的QCheckBox上时生效：

QCheckBox:hover:checked { color: white }
1

伪转态的取反也可以出现在伪状态链汇总，举个例子，下面的规则在鼠标悬浮到一个没有被press的QPushButton上时生效：

QPushButton:hover:!pressed { color: blue }
1

如果有需要，可以使用逗号来表示逻辑或，即并集选择器

QCheckBox:hover,QCheckBox:checked { color: white }
1

伪状态可以与sub-control组合使用，举个例子：

QComboBox::drop-down:hover { image:url(dropdown_bright.png)}
1

---

11、选择器的匹配规则

需要完成一个界面，如下图所示：

这里用户名输入框是一个QComboBox对象，密码输入框是一个QLineEdit对象，它们的父控件是一个QDialog，有这样一个需求：给这两个输入框设置相同的边框属性：1个像素宽的蓝色实线框，为了方便更改风格，我有一个qss文件，将所有样式都写在这个文件里，这时，观察发现，这两个控件都是QDialog的子控件，于是可以用后代选择器或者子元素选择器，如下：
第一种：

QDialog QComboBox,QLineEdit
{
	border:1px solid blue;
}
1
2
3
4

第二种：

QDialog>QComboBox,QLineEdit
{
	border:1px solid blue;
}
1
2
3
4

当写完并运行程序后，发现无论采用哪种写法QComboBox是正常的，但是我的程序界面中，其他所有的QLineEdit的边框都变成了1个像素宽的蓝色实线框，而这并不是我想要的效果。
因此对于上面的现象，我们很容易得出结论：多个选择器组合使用时，它们的结合方向是自左向右，而不是我们认为的自右向左。也就是说，这两个选择器分别被理解为{ QDialog QComboBox }，QLineEdit和{ QDialog>QComboBox },QLineEdit。
其实，这应该与CSS的选择器匹配规则是一样的，是为了提高效率的一种做法，具体原因在此不细谈。
正确的写法应该是：

QDialog QComboBox,QDialog QLineEdit 
{
	border: 1px solid blue;
}
1
2
3
4

或者

QDialog>QComboBox,QDialog>QLineEdit
{
	border: 1px solid blue;
}
1
2
3
4

---

五、QSS常用属性

1、Qss背景属性(Background)

background
在一个声明中设置所有的背景属性。

background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。

background-color
设置元素的背景颜色。

background-image
设置元素的背景图像。

background-position
设置背景图像的开始位置。

background-repeat
设置是否及如何重复背景图像。

background-clip
规定背景的绘制区域。

background-origin
规定背景图片的定位区域。

background-size
规定背景图片的尺寸。

2、QSS边框属性(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
向方框添加一个或多个阴影。

3、Box属性

overflow-x
如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。

overflow-y
如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。

overflow-style
规定溢出元素的首选滚动方法。

rotation
围绕由 rotation-point 属性定义的点对元素进行旋转。

rotation-point
定义距离上左边框边缘的偏移点。

4、QSS字体属性(Font)

font
在一个声明中设置所有字体属性。

font-family
规定文本的字体系列。

font-size
规定文本的字体尺寸。

font-size-adjust
为元素规定 aspect 值。

font-stretch
收缩或拉伸当前的字体系列。

font-style
规定文本的字体样式。

font-variant
规定是否以小型大写字母的字体显示文本。

font-weight
规定字体的粗细。

5、QSS外边距属性(Margin)

margin
在一个声明中设置所有外边距属性。

margin-bottom
设置元素的下外边距。

margin-left
设置元素的左外边距。

margin-right
设置元素的右外边距。

margin-top
设置元素的上外边距。

6、QSS内边距属性(Padding)

padding
在一个声明中设置所有内边距属性。

padding-bottom
设置元素的下内边距。

padding-left
设置元素的左内边距。

padding-right
设置元素的右内边距。

padding-top
设置元素的上内边距。

7、QSS 位属性(Positioning)

bottom
设置定位元素下外边距边界与其包含块下边界之间的偏移。

clear
规定元素的哪一侧不允许其他浮动元素。

clip
剪裁绝对定位元素。

cursor
规定要显示的光标的类型（形状）。

display
规定元素应该生成的框的类型。

float
规定框是否应该浮动。

left
设置定位元素左外边距边界与其包含块左边界之间的偏移。

overflow
规定当内容溢出元素框时发生的事情。

position
规定元素的定位类型。

right
设置定位元素右外边距边界与其包含块右边界之间的偏移。

top
设置定位元素的上外边距边界与其包含块上边界之间的偏移。

vertical-align
设置元素的垂直对齐方式。

visibility
规定元素是否可见。

z-index
设置元素的堆叠顺序。

8、QSS文本属性(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
允许对长的不可分割的单词进行分割并换行到下一行。

9、 颜色

17种标准色：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,olive, orange, purple, red, silver, teal, white, yellow

colo:rgb(255,255,255);   
 
color: #F5F5F5;               /* 前景(文本)颜色 */  
 
color: qlineargradient();     /* 前景(文本)颜色:线性渐变*/  
 
color: qradialgradient();     /* 前景(文本)颜色:辐射渐变*/  
 
color: qconicalgradient();    /* 前景(文本)颜色:梯形渐变*/  
1
2
3
4
5
6
7
8
9

10、字体名：

微软雅黑：Microsoft YaHei

宋体：SimSun

黑体：SimHei

仿宋： FangSong

楷体： KaiTi

隶书：LiSu

幼圆：YouYuan

华文细黑：STXihei

华文楷体：STKaiti

华文宋体：STSong

华文中宋：STZhongsong

华文仿宋：STFangsong

方正舒体：FZShuTi

方正姚体：FZYaoti

华文彩云：STCaiyun

华文琥珀：STHupo

华文隶书：STLiti

华文行楷：STXingkai

华文新魏：STXinwei

font: 15px "Segoe UI";             /* 字体:大小 名称 */  
 
font-family: "Segoe UI";           /* 字体名称 */  
1
2
3

---

六、总结

参考文章：
https://blog.csdn.net/hellokandy/article/details/114873373

https://blog.csdn.net/qq_40602000/article/details/104652131

https://blog.csdn.net/Mr_robot_strange/article/details/106756552#_200

【Qt学习系列】11.Qt样式表Qss

【Qt学习系列】11.Qt样式表Qss（2）