Qt QLabel样式表总结
先来个例子
QLabel {font-family: "Microsoft YaHei";font-size: 14px;color: #BDC8E2;background-color: #2E3648;
}
效果
上面的例子是基本的样式设置,下面我们将探讨 QLable 各种样式设置:
字体样式
font-family: "Microsoft YaHei";
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #BDC8E2;
font: bold italic 18px "Microsoft YaHei";
font-family 为设置字体类型,标准形式需要加双引号,不加也可能会生效,具体看系统是否支持,中英文都支持,但要保证字体编码支持,一般程序编码为"utf-8"时没问题。
font-size 为设置字体大小,单位一般使用 px 像素
font-style 为设置字体斜体样式,italic 为斜体, normal 为不斜体
font-weight 为设置字体加粗样式,bold 为加粗, normal 为不加粗
font 为同时设置字体 style weight size family 的样式,但是 style 和 weight 必须出现在开头,size 和 family 在后面,而且 size 必须在 family 之前,否则样式将不生效,font 中不能设置颜色,可以单独设置 style weight 和 size,不能单独设置 family
color 为设置字体颜色,可以使用十六进制数表示颜色,也可以使用某些特殊的字体颜色:red, green, blue 等,或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置,其中 r、g、b、a 值为0~255,如果想不显示颜色可以设置值为透明 transparent
注意:字体颜色用的是 color 属性,没有 font-color 这个属性的
文字位置
padding-left: 10px;
padding-top: 8px;
padding-right: 7px;
padding-bottom: 9px;
padding-left 为设置文字距离左边边界的距离
padding-top 为设置文字距离顶边边界的距离
padding-right 为设置文字距离右边边界的距离
padding-bottom 为设置文字距离底边边界的距离
Tip: 在 qss 中,属性 text-align 对 Label 是不起作用的,只能通过设置 padding 来实现文字的显示位置;一般 padding-left 相当于 x 坐标,padding-top 相当于 y 坐标,设置这两个就可以在任意位置显示了(默认情况下文字是上下左右都居中显示的)
边框样式
border-style: solid;
border-width: 2px;
border-color: red;
border: 2px solid red;
border-style 为设置边框样式,solid 为实线, dashed 为虚线, dotted 为点线, none 为不显示(如果不设置 border-style 的话,默认会设置为 none)
border-width 为设置边框宽度,单位为 px 像素
border-color 为设置边框颜色,可以使用十六进制数表示颜色,也可以使用某些特殊的字体颜色:red, green, blue 等,或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置,其中 r、g、b、a 值为0~255,如果想不显示颜色可以设置值为透明 transparent
border 为同时设置 border 的 width style color 属性,但值的顺序必须是按照 width style color 来写,不然不会生效!
也可以单独设置某一条边框的样式
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-style 为设置顶部边框样式
border-top-width 为设置顶部边框宽度
border-top-color 为设置顶部边框颜色
border-top 为设置顶部边框 width style color 的属性,原理和 border 一致
其它三个边框:right bottom left 边框的设置都相同
设置边框半径
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-radius: 20px;
border-top-left-radius 为设置左上角圆角半径,单位 px 像素
border-top-right-radius 为设置右上角圆角半径,单位 px 像素
border-bottom-left-radius 为设置左下角圆角半径,单位 px 像素
border-bottom-right-radius 为设置右上角圆角半径,单位 px 像素
border-radius 为设置所有边框圆角半径,单位为 px 像素,通过圆角半径可以实现圆形的 Label
背景样式
background-color: #2E3648;
background-image: url("./image.png");
background-repeat: no-repeat;
background-position: left center;
background: url("./image.png") no-repeat left center #2E3648;
background-color 为设置背景颜色,可以使用十六进制数表示颜色,也可以使用某些特殊的字体颜色:red, green, blue 等,或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置,其中 r、g、b、a 值为0~255,如果想不显示颜色可以设置值为透明 transparent
background-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 为设置背景的所有属性,color image repeat position 这些属性值出现的顺序可以任意
下面是一个综合示例
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: 0px;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;
}
标签禁止时的样式
QLabel:disabled{color: blue;
border-color: brown;background-color: aqua;
}
不过,遗憾的是,标签并没有点击 pressed 这种样式的.
Qt QLabel样式表总结相关推荐
- qt使用样式表设置窗口widget为圆角
提要 窗口widget是无法直接通过样式表设置为圆角的,需要在窗口QWidget中拖入控件QFrame,将QFrame设置的和窗口QWidget一样大小,将窗口QWidget中需要的控件拖入到QFra ...
- Ui界面发布Qt精美样式表以及模板(样式表C++和Python均可使用)
首先是模板只有(PyQt和PySide能使用) 样式表放在Ui文件里头C++也可以使用-用QtDesigner打开复制即可 演示视频(Python-Gui)PyQt-QtCiL-DarkSttyle风 ...
- qt使用样式表来设置不规则按钮
参考代码如下: pixmap.load(":/new/prefix1/淳中切图/未选中-3.png");pixmap = pixmap.scaled(QSize(125 / m_p ...
- QT tabWidget样式表
//背景设置 QTabWidget::pane{ border:1px solid rgba(125, 250, 250, 160); border-radius: 3px; ...
- Qt学习笔记之样式表
一.概述 Qt的样式表是从Qt4.2开始引入的描述窗口部件外观的机制,类似于HTML的层叠样式表(Cascading Style Sheets,CSS).样式表在Qt的风格之上起作用(如果使用了样式表 ...
- [Qt教程] 第45篇 进阶(五)Qt样式表
[Qt教程] 第45篇 进阶(五)Qt样式表 楼主 发表于 2013-9-13 15:43:55 | 查看: 329| 回复: 1 Qt样式表 版权声明 该文章原创于Qter开源社区 导语 一个完善 ...
- QT样式表(QStyleSheet)
QT样式表 (QStyleSheet) 作者:刘旭晖 Raymond 转载请注明出处 Email:colorant@163.com BLOG:http://blog.csdn.net/colorant ...
- pyqt5样式表设计
前言: 该博文的参考博客,在文末给出,如有侵权请联系博主,会在第一时间删除. Qt样式表 Qt样式表(style sheet)是用于定制用户界面的强有力的机制,其概念.术语是收到HTML中的级联样式表 ...
- 【Qt】Qt样式表总结(一):选择器
官方资料 https://blog.csdn.net/u010168781/article/details/81868523 注释 qss文件中使用:/**/ 来注释 样式规则 样式表由样式规则序列组 ...
- QT开发(六十四)——QT样式表(二)
QT开发(六十四)--QT样式表 本文主要翻译自QT官方文档Qt Style Sheets . 五.QT样式表参考 QT样式表支持多种的属性.状态和子控件,使得定制组件的外观成为可能. 1.组件 以下 ...
最新文章
- 云原生生态周报 Vol. 19 | Helm 推荐用户转向 V3
- 好班微校云信聊天解读记录
- 《犯罪心理学》读书笔记(part9)--犯罪心理的主观差异(下)
- CentOS7.2 忘记root密码解决
- 睡眠多少分钟一个循环_睡眠分为几个阶段每个阶段大概多少时间?
- Warez 组织的64K 3D动画下载
- 关于多目标跟踪的一点理解
- 直流电机驱动电路设计
- 电子计算机能够按照,电子计算机能够快速、自动、准确地按照人们地意图工作的基本思想最主要是什么,由谁在1946年提出的。...
- Nodejs+MongoDB+WebRTC搭建视频通话协同应用
- 万字详解 Docker 镜像详细操作
- excel引用其他表数据
- phpcms 添加顶踩功能
- html里面行高的原理,CSS行高(line-height)及文本垂直居中原理
- 鸭子的应聘,我是学c++的
- Python爬虫之Scrapy框架爬虫实战
- java循环嵌套语句示范_java的三种循环结构与循环嵌套
- 如何让你的blynk服务器随ubuntu系统启动?
- Android 主题Theme讲解
- scratch编程超炫酷时钟