1 / 62
Qt Style Sheet 开发总结
第一版
2 / 62
目录
简介 .................................................................................................................................................. 4
语法 .................................................................................................................................................. 4
基本语法 ................................................................................................................................... 4
选择器 .............................................................................................................................................. 5
通用选择器 ............................................................................................................................... 5
格式 ................................................................................................................................... 5
注意点 ............................................................................................................................... 5
一般用法 ........................................................................................................................... 5
类型选择器 ............................................................................................................................... 5
格式 ................................................................................................................................... 5
注意点 ............................................................................................................................... 6
一般用法 ........................................................................................................................... 6
类选择器 ................................................................................................................................... 7
格式 ................................................................................................................................... 7
一般用法 ........................................................................................................................... 7
ID 选择器 .................................................................................................................................. 7
格式 ................................................................................................................................... 7
注意点:.............................................................................................................................. 8
一般用法 ........................................................................................................................... 8
后代选择器 ............................................................................................................................... 9
格式 ................................................................................................................................... 9
注意点:.............................................................................................................................. 9
一般用法 ........................................................................................................................... 9
子元素选择器 ......................................................................................................................... 10
格式 ................................................................................................................................. 10
注意点 ............................................................................................................................. 10
一般用法 ......................................................................................................................... 10
属性选择器 ............................................................................................................................. 11
格式 ................................................................................................................................. 11
注意点 ............................................................................................................................. 11
一般用法 ......................................................................................................................... 12
并集选择器 ............................................................................................................................. 12
格式 ................................................................................................................................. 12
注意点 ............................................................................................................................. 12
一般用法 ......................................................................................................................... 12
两个特殊的选择器 ................................................................................................................. 13
子控件选择器 ................................................................................................................. 13
伪类选择器 ..................................................................................................................... 14
没有选择器的情况 ................................................................................................................. 15
选择器的匹配规则 ......................................................................................................................... 15
Qss 的特性 ...................................................................................................................................... 17
3 / 62
层叠性..................................................................................................................................... 17
继承性(Qt-Version >= 5.7) ...................................................................................................... 17
优先级..................................................................................................................................... 18
Qt 官方关于冲突解决的说明 ................................................................................................ 19
盒模型 ............................................................................................................................................ 21
什么是盒模型? ....................................................................................................................... 21
盒模型中的宽度与高度 ......................................................................................................... 22
属性 ................................................................................................................................................ 22
背景属性 background............................................................................................................ 23
background-color ............................................................................................................ 23
background-image .......................................................................................................... 23
background-repeat .......................................................................................................... 23
background-position ....................................................................................................... 24
background-attachment .................................................................................................. 25
background-clip ............................................................................................................... 26
background-origin ........................................................................................................... 28
背景属性的连写格式 ..................................................................................................... 29
前景属性 color ...................................................................................................................... 30
边框属性 border .................................................................................................................... 31
属性 ................................................................................................................................. 31
格式 ................................................................................................................................. 40
字体属性 font ........................................................................................................................ 43
font-style ......................................................................................................................... 43
font-weight ...................................................................................................................... 43
font-size ........................................................................................................................... 44
font-family ....................................................................................................................... 44
连写格式 ......................................................................................................................... 44
文本属性 ................................................................................................................................. 45
text-align ......................................................................................................................... 45
text-decoration ................................................................................................................ 46
padding 和 margin .................................................................................................................. 47
padding ........................................................................................................................... 47
margin ............................................................................................................................. 47
width 与 height ..................................................................................................................... 49
width, height ................................................................................................................... 49
max-width min width 与 max-height min-height ......................................................... 49
outline ..................................................................................................................................... 50
属性结语 ................................................................................................................................. 50
Brush 类型介绍 ...................................................................................................................... 50
Color ................................................................................................................................ 50
Gradient .......................................................................................................................... 51
与 CSS 的对比 ................................................................................................................................. 54
选择器对比 ............................................................................................................................. 54
属性对比 ................................................................................................................................. 55
4 / 62
源码阅读--QSS 是如何实现的/会不会有新发现? ........................................................................ 55
简介
为了书写方便, 文中一律使用 Qss 代替 Qt style sheet.
首先来看 Qt 的官方介绍: 除了子类化 QStyle 以外, Qss 是一个非常强大的用于自定义
控件外观的机制. 它的概念,术语以及语法都是受到了 HTML CSS 的启发(实际上就是 CSS 的
语法), 但可以适应全局窗口部件(这一句我没明白是什么意思).
就是说, Qss 是用来设置界面样式的, 设置的方法就是类似于 CSS,通过以一定规则组
织的字符串来给界面设置样式, 而不用我们调用控件对象的接口或子类化 QStyle 去设置样
式. 这种组织字符串的规则就是它的语法, 以下的总结也是主要讲一些 Qss 的语法, 包含
少量的经验以及官方文档中没有说明的内容.
个人认为使用 Qss 的好处:
(1) 可读性高并且非常直观,便于设置界面样式;
(2) 在每个平台上都有相同的显示效果.
(3) 可以在界面代码中省去与显示效果相关的大量代码,将界面逻辑独立出来.
(4) 在界面风格(配色, 字体等)改变的情况下, 可以不用修改 c++源码就可以实现.
语法
基本语法
样式表由一系列的样式规则组成。一条样式规则由一个选择器和一个声明语句组成，选
择器指明了哪个（或者说是哪种）控件将会受规则影响，而声明语句则指明了哪些属性会设
置到这个（这些）控件. 语法如下:
selector { attribute: value; }
在上面这条语句中, selector 代表选择器, 指明了哪个(或者说是哪种)控件将会受到
规则影响. {attribute: value;}代表声明语句, 其中 attribute 表示属性, value 表示该
属性的值, 属性与它的值之间必须以冒号( : )隔开, 属性值后面必须以分号( ; )结束,
表示这条属性已经设置完成. 整条语句加起来的意思是, 在整个应用程序中, 被 selector
匹配的控件, 它们控件的 attribute 属性的值应该被设置为 value.
例如:
QPushButton{ color: red;}表示将我们的应用程序中所有的 QPushbutton 对象以及它
的子类对象应该使用 red 作为它们的前景色(即字体的颜色);
由此看来, 我们要学会如何使用 qss 来控制我们的界面样式, 只需要学会两个方面的
内容, 即选择器和属性, 下面将用专门的章节来讲解这两部分的内容.
5 / 62
选择器
通用选择器
又叫通配符选择器
格式
* { 属性: 值; }
通用选择器用( * )来表示, 它表示匹配程序中所有的 widget.
注意点
由于通用选择器会匹配程序中所有的 widgets, 效率较低, 因此应该尽量减少或者不使用
一般用法
通用选择器一般用来给应用程序设置统一的字体,例如
*{font: normal 20px “微软雅黑”;}
这条语句表示将程序中所有 widget 的字体大小都设置为 20px 大小, 字体采用微软雅黑.
类型选择器
格式
类名 { 属性: 值; }
类名即 Widget 类名, 由 QObject :: metaObject() :: className()获取, 类型选择器匹
配所有该类以及该类的派生类的对象.例如:
QPushButton{
color: blue;
}
