QSS属性大全

关注

原创 2022-09-14 14:04:58 3.9k 阅读 AI 写同款· GEO 优化 ›

qss简介大全 Qt style sheet, 简写就是qss, Qt样式表，不需要用C++代码控件进行重载，就可以修改控件外观，美化界面，类似于前端的css, 但是没有css功能强大. 例如下面QLabel的样式设置除了以上样式外，还有很多，qss千变万化，可以写出各种花里胡哨的样式。阅读详情

1、选择器

1.1、通用选择器

/*
格式：* { 属性: 值; }
通用选择器一般用来给应用程序设置统一的字体，大小，颜色等
*/
* {
    font-family: "Microsoft YaHei";
    outline: 0px;
    color: #DCDCDC;
}

1.2、类型选择器

/* 格式： 类名 { 属性: 值; } */
/* 类名即 Widget 类名, 由 QObject :: metaObject() :: className()获取, 类型选择器匹配所有该类以及该类的派生类的对象 */
QPushButton {
	color: blue;
}
/* 程序中所有的 QPushButton 类和它的派生类的对象, 它们的前景色(即文字颜色)被设置为蓝色 */
/* 一般用于为控件做统一初始化 */
/*
注意点：
当自定义控件在命名空间之中(或它是一个嵌套类)，QObject::className()会返回(::)，与子控件选择器
相冲突当为命名空间中 widget 使用类型选择器时, 我们必须将” :: ”替换成” -- ”
*/
namespace ns {
	class MyPushButton : public QPushButton {
	}
}

qApp->setStyleSheet("ns--MyPushButton { background: yellow; }");

1.3、类选择器

/* 格式：.类名 { 属性: 值; } */
/* 类名与类型选择器中的类名一样，前面的.表示只匹配该类的所有对象，而不匹配其派生类对象 */
.QPushButton {
	color: blue;
}

/* 比如当用QFrame做容器时可以用它来只对QFrame做样式，而不对其派生类(QLabel, QAbstractScrollArea 等等)生效 */

1.4、ID 选择器

/* 格式：#id{ 属性: 值; } */
/*  id 指的是 objectName, 每个 QObject 类及其派生类都有的一个属性 */
#button {
	color: red;
}

/* 一般用于特殊控件，比如登录按钮等 */
/*
注意点:
	1. objectName 是大小写敏感的.
	2. “#”与 ID 之间不可以有空格
	3. 由于 objectName 是所有 QObject 类对象的一个属性, 在运行过程中可以改变, 所以一般
	情况下, 要使用 ID 选择器时, 保证 objectName 不要在运行时被改变, 否则重新加载
	stylesheet 文件时, 对应的 ID 选择器将不会匹配到原来的控件.
	4. 由于 objectName 允许字符串中含有空格, 但是 ID 选择器中, ID 是从紧跟#后的第一个字
	符开始直到遇到空格或“{”之间的字符串, 因此, 如果是为了使用 ID 选择器而设置
	objectName, 则 objectName 中不能含有空格
	5. 由于任何对象的 objectName 都可以出现重复, 因此在设置 objectName 时, 尽量保持其
	唯一性
	6. Qt 官方给出的 ID 选择器的格式为:
	类名#id{ 属性: 值; }
	但实际上不加类名也是可以的(加了类名的 ID 选择器在 CSS 中被称为交集选择器),在正
	式开发中, 还是建议加上类名, 因为这样可以看出这个 id 选择器所匹配的对象的类型,
	有利于提高阅读性.
*/

1.5、后代选择器

/* 格式：选择器 1 选择器 2{ 属性: 值; } */
/* 在选择器 1 匹配的所有对象中, 找到选择器 2 所匹配的所有后代对象 */
/*
注意点：
注意点:
	1. 后代选择器必须用空格隔开每个选择器
	2. 后代选择器可以通过空格一直延续下去, 例如:
		选择器 1 选择器 2 选择器 3 … 选择器 N{ 属性: 值; }
	3. 顾名思义, 后代选择器不仅包含”儿子”, 还包含”孙子”, “重孙子”等, 一般来说, 只要 B 控
		件显示在 A 控件上, 那么 B 控件就是 A 控件的后代.
	4. 后代选择器不仅可以使用类型选择器, 还可以使用类选择器, id 选择器等.
	5. Qt 中, 各控件的父子关系:
		通过简单的验证, 各控件的父子关系并非我们在创建对象时所指定的那样, 实际父子关
		系取决于如何布局. 
*/

/*
用途：对多个相似对话框中的一个按钮进行样式修改时可以选择后代选择器
*/
BaseDialog QPushButton{
	min-width: 120px;
	min-height: 40px;
	max-width: 120px;
	max-height: 40px;
	font-size: 20px;
	padding: 0px;
}

1.6、子元素选择器

/* 格式：选择器 1 >选择器 2 { 属性: 值; } */
/* 子元素选择器表示找到指定选择器所匹配的对象中的所有特定直接子元素然后设置属性,
即找到选择器 1 匹配到的对象中的被选择器 2 匹配到的直接子元素然后设置属性 */

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

/* 例如我想给直接布局在 QGroupBox 的QCheckBox 设置一些特定属性 */
.QGroupBox > .QCheckBox {
	color: blue;
}

1.7、属性选择器

/*
格式：
	[attribute=value]{ 属性: 值; }
	[attribute|=value]{ 属性:值; }
	[attribute~=value]{ 属性:值; }
	
attribute=value 表示匹配有特定属性 attribute, 并且值为 value 的所有控件, 然后设置样式;
attribute|=value 表示匹配有特定属性 attribute, 并且值以 value 开头的所有控件, 然后设置样式;
attribute~=value 表示匹配有特定属性 attribute, 并且值包含 value 的所有控件, 然后设置样式;
*/

/*
注意点
1. attribute|=value 表示 attribute 属性的值以 value 开头, 无论 value 后面还有没有值, 或者
value 后面是什么, 均能匹配到
*/

[objectName|="button"]{
	color: red;
}
/* 这表示将 objectName 属性以 button 开头的所有控件的前景色设置为红色 */

/* attribute~=value 表示 attribute 属性的值中包含 value, 这里要注意的是:value 必须是独
立的单词, 也就是包含 value 并且 value 是被空格隔开的 */

1.8、并集选择器

/* 格式：选择器 1,选择器 2,选择器 3{ 属性: 值; } */

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

1.9、子控件选择器

/*
格式：
	类型选择器::子控件{ 属性: 值; }
	类选择器::子控件{ 属性: 值; }
*/

/* QComboBox 的 drop-down 部分 */
QComboBox::down-arrow{
	image: url(:/res/arrowdown.png);
}
QComboBox::down-arrow:pressed {
	position: relative;
	top: 1px; left: 1px;
}

1.10、伪类选择器

/*
格式：
	类型选择器:状态{ 属性: 值; }
	类选择器:状态{ 属性: 值; }
	冒号两边不可有空格
*/

QPushButton:hover { color: white }
/* 伪状态可以使用感叹号进行取反 */
QRadioButton:!hover { color: red }
/* 伪状态可以链接，在这样的情况下，隐式地包含了逻辑与 */
QCheckBox:hover:checked { color: white }
/* 上面表示在鼠标悬浮到一个已 check 的 QCheckBox 上时生效 */

/* 支持并集选择器及子控件选择器 */
QCheckBox:hover, QCheckBox:checked { color: white }
QComboBox::drop-down:hover { image: url(dropdown_bright.png) }

2、属性

2.1、背景属性 background

连写格式:background: color image repeat position;

背景共有 7 个属性, 既可以每个属性单独设置, 也可以连写
background-color
设置控件的背景颜色, 默认是 border 之内的矩形区域, 包括内边距和内容矩形
background-image
格式是 url(filename), filename 是一个本地文件路径或 Qt 资源文件路径, 不支持网络图片；
设置控件的背景图片. 可以与背景颜色共存, 背景图片会覆盖背景颜色
background-repeat
repeat-x: 在水平方向上平铺
repeat-y: 在垂直方向上平铺
repeat: 在水平和垂直方向上都平铺, 这是默认值(但是 Qt 好像有 bug, 设置了 repeat 反
而不会平铺, 不设置才平铺)
no-repeat: 不平铺
作用: 设置背景图片的平铺方式.

在这里插入图片描述

background-position
top: 向上对齐 left: 向左对齐
bottom: 向下对齐 right:向右对齐
center: 居中
格式：background-position: 水平对齐方式垂直对齐方式;
background-attachment
scroll : 滚动, 这是默认值
fixed: 固定
设置背景图片在带滚动条的控件(QAbstractScrollArea)中是固定在一个位置还是随着滚动条滚动.
background-clip
margin: 外边距矩形
border: 边框矩形
padding: 内边距矩形
content: 内容矩形
设置背景颜色覆盖的区域, 默认情况下背景只覆盖内边距矩形, 如果没有指定, 默认值为 border
background-origin
margin: 外边距矩形
border: 边框矩形
padding: 内边距矩形
content: 内容矩形
与 background-position 和 background-image 一起使用, 指明背景图片的覆盖范围矩形,如果没有指定, 默认为 padding

2.2、前景色 color

color 设置的前景色, 也就是控件文字的颜色, color 属性是被所有 widget 都支持的

2.3、边框属性 border

连写格式：border: width style color;
border-width
像素宽度, 数值后面一定要加上像素单位 px
border-style
取值: dashed，dot-dash，dot-dot-dash，dotted，double，groove，inset，outset，ridge，solid，none
设置边框的渲染样式

border-color
设置边框的颜色
border-radius
取值: 水平半径垂直半径;均是以像素为单位, 值必须带 px, 第二个值是可选的,
如果只有一个值, 表示同时水平半径和垂直半径
border-image
格式：border-image: border-image-source border-image-slice border-image-repeat
border-image-source: 图片路径
border-image-slice: 图片切片, 单位只能是像素值, 因此数值不必带单位 px
border-image-repeat：指定边框图片的四条边和四个角的平铺方式。
有三种取值, 分别为 stretch(默认), round(均分平铺), repeat(平铺).
stretch 表示拉伸四条边相应的切片图片,来填补边框的间隙.
round 是把四个角和四条边分成均等区域然后用背景图片切好能铺满整个边框空隙, 不能多也不能少
repeat 是做直接复制填满空隙
单些格式：
border-top-width border-top-style border-top-color
border-right-width border- right -style border- right -color
border-bottom-width border- bottom -style border- bottom -color
border-left-width border- left -style border- left -color

2.4、字体属性 font

连写格式：font: style weight size family
font-style
设置字体风格。normal: 正常，italic: 斜体，oblique: 倾斜的字体
Italic 是使用文字的斜体，Oblique 是让没有斜体属性的文字倾斜
一些不常用的字体，或许就只有个正常体，如果你用 Italic，就没有效果了,这时候就要用 Oblique
font-weight
设置文字的粗细；三种方式：normal: 正常粗细、bold: 加粗、数值(数越大字越粗)
font-size
设置字体大小。单位有px，pt，px常用
font-family
设置字体样式。（QSS 中 font-family 只能指定一种字体）
微软雅黑： Microsoft YaHei
宋体：SimSun
黑体：SimHei
仿宋： FangSong
楷体： KaiTi
隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei

2.5、文本属性

text-align
设置文本的对齐方式。top, bottom, left, right, center
格式：text-align: 水平对齐方式垂直对齐方式;
支持这个属性的控件目前只有 QPushButton 和 QProgressBar
text-decoration
给文本添加装饰。none: 没有装饰；underline: 下划线；overline: 上划线；line-through: 删除线
padding
padding: 上右下左;
padding-top: ?px;
padding-right: ?px;
padding-bottom: ?px;
padding-left: ?px;
margin
与padding一致
width, height
这两个属性设置的是盒子内容的宽高.
这两个属性只对子控件选择器选中的对象有效
这两个属性的取值均是像素值, 即数字加像素单位 px
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

2.6、渐变 Gradient

附录

1、伪态列表

伪态	描述
:active	当小部件位于活动窗口中。
:adjoins-item	当QTreeView的子控件::branch与物体相邻时
:alternate
:bottom	项目位于底部
:checked	被选中状态时
:closable	可关闭状态时
:closed	关闭状态时
:default	默认状态
:disabled	不可使用状态
:editable	可编辑态时
:edit-focus	拥有可编辑焦点时
:enabled	可用状态时
:exclusive
:first	为第一个时。例如QTabBar的第一个选项卡
:flat	当为flat态时
:floatable	可浮动态时
:focus	拥有输入焦点时
:has-children	拥有子物体时
:has-siblings
:horizontal	具有水平方向时
:hover	悬停在此控件上时
:indeterminate	拥有不确定态时
:last	最后一项
:left	位置位于左侧时
:maximized	最大化态时
:middle	在中间时
:minimized	最小化时
:movable	可移动态时
:no-frame	无边框态时
:non-exclusive
:off	对于可以切换的控件，处于关闭状态时
:on	对于可切换的控件，处于打开状态时
:only-one
:open	打开状态时，例如QComboBox具有一个可打开的菜单
:next-selected
:pressed	当被鼠标按时，可当做clicked事件
:previous-selected
:read-only
:right
:selected	被选择态
:top
:unchecked	未被选中态
:vertical
:window

2、子控件列表

子控件	描述
::add-line	用于添加QScrollBar行的按钮
::add-page	手柄（滑块）和QScrollBar的add-line之间的区域
::branch	QTreeView的分支指示器
::chunk	QProgressBar的进度块
::close-button	QDockWidget或QTabBar选项卡的关闭按钮
::corner	QAbstractScrollArea中两个滚动条之间的角
::down-arrow	QComboBox、QHeaderView、QScrollBar或QSpinBox的向下箭头
::down-button	QScrollBar或QSpinBox的向下按钮
::drop-down	QComboBox的下拉按钮
::float-button	QDockWidget的浮动按钮
::groove	QSlider的凹槽
::indicator	QAbstractItemView、QCheckBox、QRadioButton、可检查QMenu项或可检查QGroupBox的指示器
::handle	QScrollBar、QSplitter或QSlider的滑块
::icon	QAbstractItemView或QMenu的图标
::item	QAbstractItemView、QMenuBar、QMenu或QStatusBar的项
::left-arrow	QScrollBar的左箭头
::left-corner	QTabWidget的左角。例如，此控件可用于控制QTabWidget中左角小部件的位置
::menu-arrow	带有菜单的QTool按钮的箭头
::menu-button	QToolButton的菜单按钮
::menu-indicator	QPushButton的菜单指示器
::right-arrow	QMenu或QScrollBar的右箭头
::pane	QTabWidget的窗格
::right-corner	QTabWidget的右角
::scroller	QMenu或QTabBar的滚动条
::section	QHeaderView的部分
::separator	QMenu或QMainWindow中的分隔符
::sub-line	用于减去QScrollBar的一行的按钮
::sub-page	手柄和QScrollBar的sub-line之间的区域
::tab	QTabBar或QToolBox的选项卡
::tab-bar	QTabWidget的选项卡栏
::tear	QTabBar的指示器
::tearoff	QMenu的指示器
::text	QAbstractItemView的文本
::title	QGroupBox或QDockWidget的标题
::up-arrow	QHeaderView、QScrollBar或QSpinBox的向上箭头
::up-button	QSpinBox的向上按钮