qss总结
xuchang 2023/12/9 tag2
# Qt QSS美化基础知识
# qss 加载方式
方式一，直接写 qss
myDialog->setStyleSheet("QLineEdit {background-color: yellow;}");
nameEdit->setStyleSheet("background-color: yellow");
1
2
2
方式二，通过文件读取
1
# qss 类选择器类型
3.1 通配选择器，匹配所有控件
*
1
3.2 类型选择器，匹配所有 QPushButton 和其子类的实例
QPushButton { background-color: gray;}
1
3.3 属性选择器
3.4 类选择器， 匹配所有 QPushButton 的实例，但并不匹配其子类
.QPushButton {background-color: magenta;}
1
3.5 ID选择器 利用objectName指定的ID进行选择控制
#openButton, #closeButton {background-color: magenta; }
1
3.6 后代选择器 所有QDialog容器中包含的QPushButton，不管是直接的还是间接的
QDialog {background-color: gray;}
/* 设置QDialog中的QPushButton的qss */
QDialog QPushButton {border: 2px solid magenta; }
1
2
3
2
3
3.7 子选择器 所有QFrame容器下面的QPushButton，其中要求QPushButton的直接父容器是QFrame，注意和后代选择器的区别
QFrame { background-color: gray; }
QFrame > QPushButton { border: 2px solid magenta; }
1
2
2
3.8 伪类选择器 状态作为选择器，支持 ! 操作符，表示非
QPushButton:hover { background-color: white; }
QCheckBox:checked { color: white; }
QCheckBox:!checked { color: red; }
1
2
3
2
3
所有这些选择器可以联合使用，支持一次设置多个选择器类型，用 , 隔开，如：
/* 表示所有这些id使用一个规则 */
#frameCut, #frameInterrupt, #frameJoin
/* 表示所有id为mytable的容器下面QPushButton实例 */
#mytable QPushButton
1
2
3
4
5
2
3
4
5
# qss 常用属性
4.1 字体
font: 15px "Segoe UI"; /* 字体： 大小 名称 */
font-family: "Segoe UI";
1
2
2
4.2 颜色
color: rgb(255, 255, 255);
color: #F5F5F5; /*前景（文本）颜色*/
color: qlineargradient(); /*前景（文本）颜色：线性渐变*/
color: qradialgradient(); /*前景（文本）颜色：辐射渐变*/
color: qconicalgradient(); /*前景（文本）颜色：梯形渐变*/
1
2
3
4
5
2
3
4
5
4.3 内边距
padding: 4px;
padding-left: 5px;
padding-bottom: 3px;
1
2
3
2
3
4.4 外边距
margin: 14px 18px 20px 18px; /*外边距 顺序上右左下*/
margin-top: 14px;
1
2
2
4.5 背景
background-color: #202122; /* 背景颜色 */
background-color: qlineargradient(); /* 背景颜色:线性渐变*/
background-color: qradialgradient(); /* 背景颜色:辐射渐变*/
background-color: qconicalgradient(); /* 背景颜色:梯形渐变*/
background-image:url(boder.png); /* 背景图片 */
background-position: ; /* 背景图片对齐方式 */
background-repeat: ; /* 背景图片平铺方式 */
1
2
3
4
5
6
7
2
3
4
5
6
7
4.6 边框
border: 1px solid #FDBC03;
border-radius: 4px;
border-top-left-radius: 5px;
1
2
3
2
3
4.7 宽高
width: 12px; /* 设置宽度 单位像素*/
height: 40px;
min-width: 65px;
min-height: 12px;
max-width: 12px;
max-height: 12px;
1
2
3
4
5
6
2
3
4
5
6
# qss 伪状态和子控件
伪状态列表
:checked /*button部件被选中*/
:unchecked /*button部件未被选中*/
:disabled /*部件被禁用*/
:enabled /*部件被启用*/
:focus /*部件获得焦点*/
:hover /*鼠标位于部件上*/
:indeterminate /*checkbox或radiobutton被部分选中*/
:off /*部件可以切换，且处于off状态*/
:on /*部件可以切换，且处于on状态*/
:pressed /*部件被鼠标按下*/
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
子部件列表
::down-arrow /*combo box或spin box的下拉箭头*/
::down-down /*combo box的下拉箭头*/
::indicator /*checkbox、radioButton或可选择group box的指示器
::item /*menu、menu bar或status bar的子项目*/
::menu-indicator /*pushButton的菜单指示器*/
::title /*groupBox的标题*/
::down-button /*spin box的向下按钮*/
::up-arrow /*spin box的向上箭头*/
::up-button /*spin box的向上按钮*/
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
