在网页前端开发领域中,CSS是一个至关重要的部分.描述了一个网页的"样式".从而起到对网页美化的作用.所谓样式,包括不限于大小,位置,颜色,背景,间距,字体等等.

现在的⽹⻚很难找到没有CSS的.可以说让"界⾯好看"是⼀个刚需…

网页开发作为GUI的典型代表,也对于其他客户端GUI开发产生了影响.Qt也是其中之一.Qt仿照CSS的模式,引入了QSS,来对Qt中的控件做出样式上的设定,从而允许程序猿写出界面更好看的代码.

同样受到HTML的影响,Qt还引入了QML来描述界面,甚至还可以直接把一个原生的html页面加载到界面上。当然,由于Qt本⾝的设计理念和⽹⻚前端还是存在⼀定差异的,因此QSS中只能⽀持分CSS属性.整体来说QSS要⽐CSS更简单⼀些.

如果通过QSS设置的样式和通过C++代码设置的样式冲突,则QSS优先级更⾼.

一.基本语法

对于CSS来说,基本的语法结构⾮常简单

QSS沿⽤了这样的设定

选择器：描述了"哪个widget要应⽤样式规则".
属性：⼀个键值对,属性名表⽰要设置哪种样式,属性值表⽰了设置的样式的值

例如：

上述代码的含义表⽰,针对界⾯上所有的QPushButton,都把⽂本颜⾊设置为 红⾊ 。

编写QSS时使⽤单⾏的格式和多⾏的格式均可

1.设置指定控件样式

代码⽰例:QSS基本使⽤

除了对特定控件设定外，也可以对它的子控件进行设定。例如：对QWidget的子控件QpushButton进行设置。

注意:上述代码中,我们是只针对这一个按钮通过setStylesheet方法设置的样式.此时这个样式仅针对该按钮生效.如果创建其他按钮,其他按钮不会受到影响.

2.设置全局控件样式

还可以通过QApplication的setstyleSheet方法设置整个程序的全局样式.全局样式优点:

1. 使同一个样式针对多个控件生效,代码更简洁.
2. 所有控件样式内聚在一起,便于维护和问题排查.

CSS全称为Cascading Style Sheets,其中Cascading就是"层叠性"的意思.QSS继承了这样的设定.当设置了多种种样式时，样式会进行叠加。

在CSS 中存在优先级规则.通常来说都是"局部"优先级高于"全局"优先级.相当于全局样式先"奠定基调",再通过指定控件样式来"特事特办".

3.从文件加载样式表

上述代码都是把样式通过硬编码的方式设置的.这样使QSS代码和C++代码耦合在一起了,并不方便代码的维护.因此更好的做法是把样式放到单独的文件中,然后通过读取文件的方式来加载样式.

4.使⽤Qt Designer编辑样式（最常用）

QSS也可以通过Qt Designer直接编辑,从⽽起到实时预览的效果.同时也能避免C++和QSS代码的耦合.

二.选择器

1.概述

QSS的选择器⽀持以下⼏种:

总体来说,QSS选择器的规则和CSS选择器基本⼀致.

当某个控件身上,通过类型选择器和ID选择器设置了冲突的样式时, ID选择器样式优先级更高…同理,如果是其他的多种选择器作⽤同⼀个控件时出现冲突的样式,也会涉及到优先级问题.Qt⽂档上有具体的优先级规则介绍(参⻅The Style Sheet Syntax的Conflict Resolution章节).这里的规则计算起来非常复杂(CSS中也存在类似的设定),咱们此处对于优先级不做进一步讨论.实践中我们可以简单的认为,选择器描述的范围越精准,则优先级越高.一般来说, ID选择器优先级是最高的.

2.子控件选择器

有些控件内部包含了多个"子控件".比如QComboBox的下拉后的面板,比如QSpinBox的上下按钮等.可以通过子控件选择器::,针对上述子控件进行样式设置.

哪些控件拥有哪些⼦控件,参考⽂档QtStyle Sheets Reference中List of Sub-Controls章节.

代码⽰例:设置下拉框的下拉按钮样式

3.伪类型选择器

伪类选择器,是根据控件所处的某个状态被选择的.例如按钮被按下,输入框获取到焦点,鼠标移动到某个控件上等.

1. 当状态具备时,控件被选中,样式生效.
2. 当状态不具备时,控件不被选中,样式失效
3. 使用:的方式定义伪类选择器.

这些状态可以使用!来取反.比如: ! hover 就是鼠标离开控件时，:! pressed 就是鼠标松开时，等等.

更多伪类选择器的详细情况,参考Qt Style Sheets Reference的Pseudo-States章节.

代码示例：改变按钮颜色

三.盒模型

QSS中的样式属性非常多,不需要都记住.核心原则还是用到了就去查.大部分的属性和CSS是非常相似的.米文档的Qt style Sheets Reference章节详细介绍了哪些控件可以设置属性,每个控件都能设置哪些属性等.

在文档的 Customizing Qt widgets Using Style Sheets的The Box Model章节介绍了盒模型.

一个遵守盒模型的控件,由上述几个部分构成.:

1. Content矩形区域:存放控件内容.比如包含的文本/图标等.
2. Border矩形区域:控件的边框.
3. Padding 矩形区域:内边距.边框和内容之间的距离.
4. Margin矩形区域:外边距。边框到控件geometry返回的矩形边界的距离默认情况下,外边距,内边距,边框宽度都是0.

代码⽰例:设置外边距

可以看到虽然视觉上按钮的尺寸变小了，实际上它的真实大小并未变。