qss简介大全

2024-06-30 23:02:53| 来源: 网络整理| 查看: 265

一、什么是qss?

Qt style sheet, 简写就是qss, Qt样式表，不需要用C++代码控件进行重载，就可以修改控件外观，美化界面，类似于前端的css, 但是没有css功能强大.

例如下面QLabel的样式设置

QLabel { background-color: rgb(54,54,54); /*背景色*/ color: rgb(230,230,230); /*字体颜色，前景色*/ font-family: "Microsoft YaHei"; /*字体类型*/ font-size: 14px; /*字体大小*/ }

注释形式：

/*我是qss注释*/

除了以上样式外，还有很多，qss千变万化，可以写出各种花里胡哨的样式。

二、常用样式字体样式 font-family: "Microsoft YaHei"; font-size: 14px; font-style: italic; font-weight: bold; color: #123456;

解释如下：

font-family ：为设置字体类型，标准形式需要加双引号，不加也可能会生效，具体看系统是否支持，中英文都支持，但要保证字体编码支持，一般程序编码为"utf-8"时没问题。font-size ：为设置字体大小，单位一般使用 px 像素font-style ：为设置字体斜体样式，italic 为斜体， normal 为不斜体font-weight ：为设置字体加粗样式，bold 为加粗， normal 为不加粗color ：为设置字体颜色，可以使用十六进制数表示颜色，也可以使用某些特殊的字体颜色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显示颜色可以设置值为透明 transparent；注意：字体颜色用的是 color 属性，没有 font-color 这个属性

字体也可以一起设置：

font: bold italic 18px "Microsoft YaHei";

同时设置字体 style weight size family 的样式时，style(是否斜体) 和 weight (是否加粗)必须出现在开头，size 和 family 在后面，而且 size 必须在 family 之前，否则样式将不生效，

边框样式 QLabel { border-style: solid; /*单独设置某一边 border-right-style:dotted;*/ border-width: 2px; border-color: red; }

也可以一起设置

border: 2px solid red;

solid 为实线， dashed 为虚线， dotted 为点线， none 为不显示（如果不设置 border-style 的话，默认带边框）

单独的属性设置

border-top-style: solid; border-top-width: 2px; border-top-color: red; border-top: 2px solid red; border-right-style: solid; border-right-width: 3px; border-right-color: green; border-right: 3px solid green; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: blue; border-bottom: 2px solid blue; border-left-style: solid; border-left-width: 3px; border-left-color: aqua; border-left: 3px solid aqua;

边框半径(圆角)

border-top-left-radius: 5px; border-top-right-radius: 10px; border-bottom-left-radius: 15px; border-bottom-right-radius: 20px; border-radius: 20px; /*统一的半径*/ 文字位置

在 qss 中，没有对齐方式，只能通过设置 padding 来实现文字的显示位置；一般 padding-left 相当于 x 坐标，padding-top 相当于 y 坐标，设置这两个就可以在任意位置显示了（默认情况下文字是上下左右都居中显示的）

padding-left: 10px; padding-top: 8px; padding-right: 7px; padding-bottom: 9px; 背景样式

其它的控件也适用

background-color: rgb(54,54,54); background-image: url(:/imgs/picture/0.png); /*显示背景图片, 也可以不用引号*/ background-repeat: no-repeat; /*不重复显示*/ background-position: left center;

解释如下：

background-color 为设置背景颜色，可以使用十六进制数表示颜色，也可以使用某些特殊的字体颜色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显示颜色可以设置值为透明 transparentbackground-image 为设置背景图片，图片路径为 url(image-path)background-repeat 为设置背景图是否重复填充背景，如果背景图片尺寸小于背景实际大小的话，默认会自动重复填充图片，可以设置为 no-repeat 不重复，repeat-x 在x轴重复，repeat-y 在y轴重复background-position 为设置背景图片显示位置，只支持 left right top bottom center；值 left right center 为设置水平位置，值 top bottom center 为设置垂直位置

统一设置

background: url(":/imgs/picture/0.png") no-repeat left center #363636;

background 为设置背景的所有属性，color image repeat position 这些属性值出现的顺序可以任意

动态悬浮样式 QLabel:hover { color: red; border-color: green; background-color: #363636; } 禁止使用的样式 QLabel:disabled { color: blue; border-color: brown; background-color: #363636; } 三、控件应用 QLabel

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-12qRLoKe-1683728426533)(D:\TyporaImageSave\image-20220620000419677.png)]

qss代码

QLabel { font-family: "Microsoft YaHei"; font-size: 18px; color: #BDC8E2; font-style: normal; font-weight: normal; border-style: solid; border-width: 2px; border-color: aqua; border-radius: 20px; padding-left: 20px; padding-top: 3px; background-color: #2E3648; background-image: url("./image.png"); background-repeat: no-repeat; background-position: left center; }

除此之外，我们还可以设置动态样式，鼠标悬浮时的样式

QLabel:hover { color: red; border-color: green; background-color: aqua; } QLineEdit

常用属性设置

setReadOnly(false); // 只读 setFocusPolicy(Qt::NoFocus); // 无法获得焦点 setMaxLength(10); // 最多输入10个字符

文本对齐方式

lineedit->setAlignment(Qt::AlignLeft) //左对齐 lineedit->setAlignment(Qt::AlignRight) //右对齐 lineedit->setAlignment(Qt::AlignCenter) //居中对齐

正则控制

第一个数是1-9的，第二个数和之后的是0-9的

QRegExp regx("[1-9][0-9]+$"); QValidator *validator = new QRegExpValidator(regx, ui->lineEdit); lineEdit->setValidator(validator);

样式设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JNndsbcm-1683728426541)(D:\TyporaImageSave\image-20220620001144196.png)]

qss代码

QLineEdit{ border: 1px solid #ABCDA0; /* 边框宽度为1px，颜色为#A0A0A0 */ border-radius: 3px; /* 边框圆角 */ padding-left: 5px; /* 文本距离左边界有5px */ background-color: #F2F2F2; /* 背景颜色 */ color: #A0A0A0; /* 文本颜色 */ selection-background-color: #A0A0A0; /* 选中文本的背景颜色 */ selection-color: #F2F2F2; /* 选中文本的颜色 */ font-family: "Microsoft YaHei"; /* 文本字体族 */ font-size: 10pt; /* 文本字体大小 */ } QLineEdit:hover { /* 鼠标悬浮在QLineEdit时的状态 */ border: 1px solid #298DFF; border-radius: 3px; background-color: #F2F2F2; color: #298DFF; selection-background-color: #298DFF; selection-color: #F2F2F2; } QLineEdit[echoMode="2"] { /* QLineEdit有输入掩码时的状态 */ lineedit-password-character: 9679; lineedit-password-mask-delay: 2000; } QLineEdit:disabled { /* QLineEdit在禁用时的状态 */ border: 1px solid #CDCDCD; background-color: #CDCDCD; color: #B4B4B4; } QLineEdit:read-only { /* QLineEdit在只读时的状态 */ background-color: #CDCDCD; color: #F2F2F2; } QPushButton 按钮样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cFXAECOs-1683728426542)(D:\TyporaImageSave\image-20220620001543055.png)]

基本样式 QPushButton { /* 前景色, 文字的颜色 */ color:green; /* 背景色 */ background-color:rgb(223,223,223); /* 边框风格 */ border-style:outset; /* 边框宽度 */ border-width:0.5px; /* 边框颜色 */ border-color:rgb(10,45,110); /* 边框倒角 */ border-radius:10px; /* 字体 */ font:bold 22px; /* 控件最小宽度 */ min-width:100px; /* 控件最小高度 */ min-height:20px; /* 内边距 */ padding:4px; } /* 鼠标按下时的效果 */ QPushButton#pushButton:pressed { /* 改变背景色 */ background-color:rgb(40,85,20); /* 改变边框风格 */ border-style:inset; /* 使文字有一点移动 */ padding-left:6px; padding-top:6px; } /* 按钮样式 */ QPushButton:flat { border:2px solid red; } /*鼠标悬浮时的效果*/ QPushButton:hover { color:#0000ff; background-color:rgb(210, 205, 205); /*改变背景色*/ border-style:inset;/*改变边框风格*/ padding-left:8px; padding-top:8px; }

还可以单独指定按钮，用#标明例如：

/*鼠标悬浮时的效果*/ QPushButton#btn2:hover { color:#0000ff; background-color:rgb(100, 100, 20); /*改变背景色*/ border-style:inset;/*改变边框风格*/ padding-left:8px; padding-top:8px; }

相关状态

:checked button部件被选中 :unchecked button部件未被选中 :disabled 部件被禁用 :enabled 部件被启用 :focus 部件获得焦点 :hover 鼠标位于部件上 :pressed 部件被鼠标按下 :indeterminate checkbox或radiobutton被部分选中 :off 部件可以切换，且处于off状态 :on 部件可以切换，且处于on状态禁止使用的样式

当按钮被禁用后 ui->pushButton->setEnabled(false);

QPushButton:disabled { color: blue; border-color: brown; background-color: #363636; } 背景图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LKdHuP5t-1683728426543)(D:\TyporaImageSave\image-20220620001830796.png)]

qss代码

QPushButton { background-image:url(":/resources/user.png"); background-position:center; background-repeat: no-repeat; border:none } QPushButton:hover { background-color:rgb(10,210,210); background-image:url(":/resources/user_hover.png") } QPushButton:pressed { background-color:rgb(10,210,210); background-image:url(":/resources/user.png"); padding-left:8px; padding-top:8px; } QSlider

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CqLksBqh-1683728426545)(D:\TyporaImageSave\image-20220620004412799.png)]

水平的QSlider

QSlider { background-color: #363636; border-style: outset; border-radius: 10px; } QSlider::groove:horizontal { height: 12px; background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4); margin: 2px 0 } QSlider::handle:horizontal { background: QRadialGradient(cx:0, cy:0, radius: 1, fx:0.5, fy:0.5, stop:0 white, stop:1 green); width: 16px; height: 16px; margin: -5px 6px -5px 6px; border-radius:11px; border: 3px solid #ffffff; }

竖直的

QSlider { background-color: rgba(22, 22, 22, 0.7); padding-top: 15px; /*上面端点离顶部的距离*/ padding-bottom: 15px; border-radius: 5px; /*外边框矩形倒角*/ } QSlider::add-page:vertical { background-color: #FF7826; width:5px; border-radius: 2px; } QSlider::sub-page:vertical { background-color: #7A7B79; width:5px; border-radius: 2px; } QSlider::groove:vertical { background:transparent; width:6px; } QSlider::handle:vertical { height: 14px; width: 14px; margin: 0px -4px 0px -4px; border-radius: 7px; background: white; } QComboBox 样式1：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NFVAh9Rj-1683728426546)(D:\TyporaImageSave\image-20220621013451271.png)]

qss代码

/* 未下拉时，QComboBox的样式 */ QComboBox { background:rgb(54,54,54); border: 1px solid gray; /* 边框 */ border-radius: 5px; /* 圆角 */ padding: 1px 18px 1px 3px; /* 字体填衬 */ color: white; font: normal normal 24px "Microsoft YaHei"; } 样式2

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KmHthoGl-1683728426546)(D:\TyporaImageSave\image-20220621015716948.png)]

qss代码

/* 未下拉时，QComboBox的样式 */ QComboBox { border: 1px solid gray; /* 边框 */ border-radius: 5px; /* 圆角 */ padding: 1px 18px 1px 3px; /* 字体填衬 */ color: white; font: normal normal 24px "Microsoft YaHei"; background:rgb(54,54,54); } /* 下拉后，整个下拉窗体样式 */ QComboBox QAbstractItemView { outline: 0px solid gray; /* 选定项的虚框 */ border: 1px solid yellow; /* 整个下拉窗体的边框 */ color: rgb(250,251,252); background-color: rgb(70,80,90); /* 整个下拉窗体的背景色 */ selection-background-color: lightgreen; /* 整个下拉窗体被选中项的背景色 */ } /* 下拉后，整个下拉窗体每项的样式 */ /* 项的高度（设置pComboBox->setView(new QListView(this));后该项才起作用） */ QComboBox QAbstractItemView::item { height: 50px; } /* 下拉后，整个下拉窗体越过每项的样式 */ QComboBox QAbstractItemView::item:hover { color: rgb(90,100,105); background-color: lightgreen; /* 整个下拉窗体越过每项的背景色 */ } /* 下拉后，整个下拉窗体被选择的每项的样式 */ QComboBox QAbstractItemView::item:selected { color: rgb(12, 23, 34); background-color: lightgreen; } /* QComboBox中的垂直滚动条 */ QComboBox QAbstractScrollArea QScrollBar:vertical { width: 13px; background-color: #d0d2d4; /* 空白区域的背景色*/ } QComboBox QAbstractScrollArea QScrollBar::handle:vertical { border-radius: 5px; /* 圆角 */ background: rgb(60,60,60); /* 小方块的背景色深灰lightblue */ } QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover { background: rgb(90, 91, 93); /* 越过小方块的背景色yellow */ } /* 设置为可编辑（setEditable(true)）editable时，编辑区域的样式 */ QComboBox:editable { background: green; } /* 设置为非编辑（setEditable(false)）!editable时，整个QComboBox的样式 */ QComboBox:!editable { background: rgb(54,54,54); } /* 设置为可编辑editable时，点击整个QComboBox的样式 */ QComboBox:editable:on { background: rgb(54,54,54); } /* 设置为非编辑!editable时，点击整个QComboBox的样式 */ QComboBox:!editable:on { background: rgb(54,54,54); } /* 设置为可编辑editable时，下拉框的样式 */ QComboBox::drop-down:editable { background: rgb(54,54,54); } /* 设置为可编辑editable时，点击下拉框的样式 */ QComboBox::drop-down:editable:on { background: rgb(54,54,54); } /* 设置为非编辑!editable时，下拉框的样式 */ QComboBox::drop-down:!editable { background: rgb(54,54,54); } /* 设置为非编辑!editable时，点击下拉框的样式 */ QComboBox::drop-down:!editable:on { background: rgb(54,54,54); image: url(:/resources/up.png); /* 显示上拉箭头 */ } /* 下拉框样式 */ QComboBox::drop-down { subcontrol-origin: padding; /* 子控件在父元素中的原点矩形。如果未指定此属性，则默认为padding。 */ subcontrol-position: top right; /* 下拉框的位置（右上） */ width: 32px; /* 下拉框的宽度 */ border-left-width: 1px; /* 下拉框的左边界线宽度 */ border-left-color: darkgray; /* 下拉框的左边界线颜色 */ border-left-style: solid; /* 下拉框的左边界线为实线 */ border-top-right-radius: 3px; /* 下拉框的右上边界线的圆角半径（应和整个QComboBox右上边界线的圆角半径一致） */ border-bottom-right-radius: 3px; /* 同上 */ image: url(:/resources/down.png); } /* 越过下拉框样式 */ QComboBox::drop-down:hover { background: rgb(80, 75, 90); } /* 下拉箭头样式 */ QComboBox::down-arrow {　　 width: 32px; /* 下拉箭头的宽度（建议与下拉框drop-down的宽度一致） */ 　　 background: rgb(54,54,54); /* 下拉箭头的的背景色 */ 　　 padding: 0px 0px 0px 0px; /* 上内边距、右内边距、下内边距、左内边距 */　　 image: url(:/resources/down.png); } /* 点击下拉箭头 */ QComboBox::down-arrow:on { 　　 image: url(:/resources/up.png); /* 显示上拉箭头 */ } QProgressBar 水平样式1

QProgressBar默认是水平效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EVhwWBmw-1683728426547)(D:\TyporaImageSave\image-20220619231030170.png)]

qss代码

QProgressBar { background:rgb(54,54,54); border:none; /*无边框*/ border-radius:5px; text-align:center; /*文本的位置*/ color: rgb(229, 229, 229); /*文本颜色*/ } QProgressBar::chunk { background-color:rgb(58, 154, 255); border-radius:4px; }

chunk表示里面进度的圆角

水平样式2

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KngMVjSe-1683728426548)(D:\TyporaImageSave\image-20220619233341762.png)]

qss代码

QProgressBar { border-radius:5px; background-color:darkgray; text-align:center } QProgressBar::chunk { background-color:#1F0FEF; width:6px; margin:5px; } 竖直样式表

C++设置

ui->progressBar_2->setOrientation(Qt::Vertical); ui->progressBar_2->setFixedWidth(60); ui->progressBar_2->setFixedHeight(300);

例如下面的效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MouFZVJz-1683728426549)(D:\TyporaImageSave\image-20220619233924079.png)]

qss代码

QProgressBar:vertical { border-radius:5px; background-color:darkgray; text-align:center; padding-left: 5px; padding-right: 4px; padding-bottom: 2px; } QProgressBar::chunk:vertical { background-color:#06B025; margin:1px; } 其它竖直样式

渐变色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MWijF7TN-1683728426550)(D:\TyporaImageSave\image-20220619234053854.png)]

qss代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9sZkTm3b-1683728426550)(D:\TyporaImageSave\image-20220620001957419.png)]

qss代码

QMenu::item { font:16px; background-color:rgb(253,253,253); padding:8px 32px; margin:0px 8px; border-bottom:1px solid #DBDBDB; } /*选择项设置*/ QMenu::item:selected { background-color: #FFF8DC; } 四、qss 选择器 1 通配符选择器

匹配所有的控件，用星号表示

* { background-color:yellow; }

设置后控件窗口背景色都被修改了；

或者指明子类

* QPushButton{ background-color:yellow; }

设置后

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0qgUKEUg-1683728426551)(D:\TyporaImageSave\image-20220620002734951.png)]

2 类型选择器

通过控件类型来匹配控件的(包括子类)

QWidget { background-color:yellow }

如果想防止子类，例如窗口被修改，可以设置属性

//禁止父窗口影响子窗口样式 setAttribute(Qt::WA_StyledBackground);

类选择器也是通过控件类型来匹配控件的，但不同的是不包含子类，语法是在类前面加了个.（是个点）

.QWidget { background-color:yellow } 注意类前面有个点

这样就只对QWidget生效，如果界面上有其它控件则不生效。

3 ID选择器

ID选择器是结合控件的objectname来匹配控件的，qss里objectname前加个井号来表示，不同控件的objectname是可以相同的

#blue { background-color:blue } 4 属性选择器

属性选择器是结合控件的属性值来匹配控件的，首先要设定控件的属性，qss里属性用[proterty = attitude]来限制

qt代码

label1.setProperty('notice_level','error') label2.setProperty('notice_level','warning')

qss

.QLabel { background-color:pink; } .QLabel[notice_level='warning'] { border:5px solid yellow; } .QLabel[notice_level='error'] { border:5px solid red; }

这里还有个用法，就是qss内只定义属性值，只要有这个属性的控件就可以被选中

.QLabel [notice_level]{ background-color:pink; } .QLabel[notice_level='warning'] { border:5px solid yellow; } .QLabel[notice_level='error'] { border:5px solid red; }

只要有novice_level这个属性的控价都是生效的。

【本文地址】

公司简介

联系我们

今日新闻

点击排行

实验室常用的仪器、试剂和: 说到实验室常用到的东西，主要就分为仪器、试剂和耗

不用再找了，全球10大实验: 01、赛默飞世尔科技（热电）Thermo Fisher Scientif

三代水柜的量产巅峰T-72坦: 作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这

通风柜跟实验室通风系统有: 说到通风柜跟实验室通风，不少人都纠结二者到底是不

集消毒杀菌、烘干收纳为一: 厨房是家里细菌较多的地方，潮湿的环境、没有完全密

实验室设备之全钢实验台如: 全钢实验台是实验室家具中较为重要的家具之一，很多

图片新闻

实验室药品柜的特性有哪些: 实验室药品柜是实验室家具的重要组成部分之一，主要

小学科学实验中有哪些教学: 计算机计算器一般打孔器打气筒仪器车显微镜

实验室各种仪器原理动图讲: 1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分

高中化学常见仪器及实验装: 1、可加热仪器：2、计量仪器：（1）仪器A的名称：量

微生物操作主要设备和器具: 今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦

浅谈通风柜使用基本常识: 　众所周知，通风柜功能中最主要的就是排气功能。在

qss简介大全

qss简介大全

今日新闻

点击排行

推荐新闻

图片新闻

专题文章