QSS语法结构

selector { attribute: value; }

selector 代表选择器, 指明了哪个(或者说是哪种)控件将会受到规则影响
attribute 表示属性,
value 表示该属性的值,
属性与它的值之间必须以冒号( : )隔开,
属性值后面必须以分号( ; )结束,表示这条属性已经设置完成

通用选择器

格式

* { 属性: 值; }

通用选择器会匹配程序中所有的 widgets, 效率较低, 因此应该尽量减少或者不使用

类型选择器

类名 { 属性: 值; }

类型选择器匹配所有该类以及该类的派生类的对象

类选择器

.类名 { 属性: 值; }**

选择器只会匹配该类的所有对象, 而不会匹配其派生类的对象.

ID 选择器

id{ 属性: 值; }

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

类名##id{ 属性: 值; }

它匹配所有 objectName 为 ID 选择器所指定的名称的对象

后代选择器

选择器 1 选择器 2{ 属性: 值; }

在选择器 1 匹配的所有对象中, 找到选择器 2 所匹配的所有后代对象, 并给它们设置样式

子元素选择器

选择器 1 >选择器 2 { 属性: 值; }

指定选择器所匹配的对象中的所有特定直接子元素然后设置属性,即找到选择器 1 匹配到的对象中的被选择器 2 匹配到的直接子元素然后设置属性

属性选择器

[attribute=value]{ 属性: 值; }
[attribute|=value]{ 属性:值; }
[attribute~=value]{ 属性:值; }

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

并集选择器

选择器 1,选择器 2,选择器 3{ 属性: 值; }

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

两个特殊的选择器

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

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

伪类选择器

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

–表示对类型选择器或类选择器指定的所有控件设置它在指定状态时的样式.

盒模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5qAZrRrK-1632751837064)(./pic/…/…/pic/hezi.png)]

Margin（外边距） - 与其他盒子之间的距离
Border（边框） - 外边距与内边距之间的区域.边框有自己的颜色不会受到盒子的背景颜色影响
Padding（内边距） - 内容和边框之间的区域.会受到背景颜色影响.
Content（内容） - 盒子的内容,显示文本,图像或其他控件

属性

背景属性 background

background-color

设置控件的背景颜色

background-image

取值: Url 类型, 格式是 url(filename), filename 是一个本地文件路径或 Qt 资源文件路径, 不支持网络图片
作用: 设置控件的背景图片. 可以与背景颜色共存, 背景图片会覆盖背景颜色, 在没有被图片覆盖的区域, 显示背景颜色，背景图优先级大于背景色

background-repeat

repeat-x: 在水平方向上平铺
repeat-y: 在垂直方向上平铺
repeat: 在水平和垂直方向上都平铺, 这是默认值(但是 Qt 好像有 bug, 设置了 repeat 反而不会平铺, 不设置才平铺)
no-repeat: 不平铺

background-position

取值:

top: 向上对齐
left: 向左对齐
bottom: 向下对齐
right:向右对齐
center: 居中

background-attachment

取值:
scroll : 滚动, 这是默认值
fixed: 固定

作用: 设置背景图片在带滚动条的控件(QAbstractScrollArea)中是固定在一个位置还是随着滚动条滚动

background-clip

背景属性的连写格式

background: color image repeat position;

取值:
margin: 外边距矩形
border: 边框矩形
padding: 内边距矩形
content: 内容矩形

前景色 color

边框属性 border

border-width
border-style
可选值：
- dashed
- dot-dash
- dot-dot-dash
- dotted
- double
- groove
- inset
- outset
- ridge
- solid
- none
border-color
border-radius
border-image

连写格式 1

border: width style color;

连写格式 2

border-top: width style color;
border-right: width style color;
border-bottom: width style color;
border-left: width style color;

连写格式 3

border-style: 上 右 下 左;
border-width: 上 右 下 左;
border-color: 上 右 下 左;

字体属性 font

font-style
- normal: 正常
- italic: 斜体
- oblique: 倾斜的字体
font-weight
- normal: 正常粗细
- bold: 加粗
font-size
font-family

连写格式

font: style weight size family

文本属性

text-align 对齐

top
bottom
left
right
center
text-decoration
none: 没有装饰
underline: 下划线
overline: 上划线
line-through: 删除线

padding 和 maigin

padding: 上 右 下 左;
或
padding-top: ?px;
padding-right: ?px;
padding-bottom: ?px;
padding-left: ?px;

margin: 上 右 下 左;
或
margin -top: ?px;
margin -right: ?px;
margin -bottom: ?px;
margin -left: ?px;

width 和 height

这两个属性设置的是盒子内容的宽高.
这两个属性只对子控件选择器选中的对象有效
这两个属性的取值均是像素值, 即数字加像素单位 px;

max-width min width 与 max-height min-height

这四个属性对所有的 widget 都有效, 用来设置盒子内容的最小或最大尺寸

outline

outline （轮廓）是控件有焦点时, 绘制在边框边缘的外围,可起到突出作用,轮廓线不占据控件, 也不一定是矩形.

它有如下属性,
outline
outline-color
outline-offset
outline-style
outline-radius
outline-bottom-left-radius
outline-bottom-right-radius
outline-top-left-radius
outline-top-right-radius

Brush 类型介绍

brush 一般用来设置颜色, 其取值有 3 种, 分别是 Color, Gradient 和 PaletteRole,

Color

rgb(r, g, b) 每个数字表示每个通道的值, 依次分别是红绿蓝
rgba(r, g, b, a) 与 rgb 相同, a 代表 α 通道, 是一个范围 0~1 的浮点数, 表示透明度, 1 代表不透明, 0 表示全透明
hsv(h, s, v)
hsva(h, s, v, a)

Gradient

qlineargradient 线性渐变
qradialgradient 径向渐变
qconicalgradient 锥形渐变

示例

QTextEdit{
 border: 2px solid red;
 background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0
#ace, stop: 0.4 #f96, stop:1 #ace);
 background-clip: margin;
 font: normal normal 30px "微软雅黑";
}

ient 径向渐变
3. qconicalgradient 锥形渐变

示例

QTextEdit{
 border: 2px solid red;
 background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0
#ace, stop: 0.4 #f96, stop:1 #ace);
 background-clip: margin;
 font: normal normal 30px "微软雅黑";
}

QSS笔记