qss样式表之QLable
先来个示例
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 这种样式的
qss样式表之QLable相关推荐
- 【Qt】qss样式表之:自定义属性实现动态切换样式
1.问题描述 例如在播放器中播放按钮,由"播放"状态切换成"暂停"状态后,响应的图标要跟着状态切换. 2.解决方法 使用qss样式表中的属性功能,自定义一个属性 ...
- 【Qt】qss样式表之:QCalendarWidget,日历窗口样式表设置
1.效果图: 2.qss样式表 其中表头的背景颜色等设置不起作用,只好在下面的代码中实现. /*日历*/ QCalendarWidget QHeaderView {qproperty-minimumS ...
- button 样式_实战PyQt5: 111-可以使用QSS样式表的部件
可以使用QSS样式表的部件 QSS样式表支持各种部件,属性,伪状态和子控件,从而可以实现定制部件的外观,下面我们将详细列出可以使用QSS样式表的部件: QAbstractScrollArea:所有派生 ...
- qss样式表笔记大全(一):qss名词解析(包含相关示例)
** 前话 ** qss可以说是qt版本的css,语法类似但也存在不同点,建议阅读本文档之前先直接百度以下学习qss的基本使用方式. qss主要是用于qt对ui界面的美化. 实践方法:直接打开qmak ...
- 【QT】QT从零入门教程(十六):QSS样式表
实现一个软件的基本界面和功能后,接下来要做的就是美化界面,这就用到了QSS样式表. QSS包含了一个样式规则序列,一个样式规则由一个选择器和声明组成,选择器指定哪些部件由规则影响,声明指定哪些 ...
- Qt学习笔记--QSS样式表
样式表QSS QSS 简介 语法规则 选择器 子控件 用法 常见子控件 伪状态 用法 常见伪状态 常用样式属性 经典样式表 QSS-白色靓丽 QSS-黑色炫酷 实现方法 效果展示 对应样式表 QSS ...
- QScrollArea qss样式表,美化滚动条
文章目录 效果图如下: 前言 QSS样式表代码 效果图如下: 前言 在网上翻遍如何优化QScrollArea 样式表,发现没有,一顿气啊,这白嫖越来越难了,只能自己去写了,下面我给出具体的样式表,直接 ...
- pyqt5把图标和qss样式表打包
做桌面程序少不了图标啊,样式表这些,比如pyqt5,用绝对路径不合适,一旦变了目录就不行了,只能用相对路径,但是相对路径也有问题,当用右键打开我们的程序时,相对路径也会失效,于是放度娘,发现pyqt5 ...
- 用Qt写一个简单的音乐播放器(七):界面美化(QSS样式表)
一.前言 在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...
最新文章
- linux filesystem_如何使用cgdb + qemu调试linux内核模块
- symbian 根据指定的权限找到对应的API:Functions listed by capability
- 数据结构与算法随学随记
- SAP UI5 view.bindElement will also trigger an odata request
- python 菜鸟教程字符串反转函数_转自python的菜鸟教程---字符串相关操作
- 基于 PostgreSQL 的 EMQ X Auth ACL
- 【李宏毅2020 ML/DL】P10 Classification_1 | 简单的例子告诉你使用 wx+b 以及 Sigmoid 作为激活函数的合理性
- 电磁场中场点和源点及▽(R)▽(1/R)▽.▽(1/R)
- [诗歌]个人作诗集锦
- thinkphp5 router.php,ThinkPHP5 之route(路由)简述
- php parse_url,pathinfo,basename函数
- 主角把异能开发计算机,高等数学上下
- MATLAB程序:S-V信道模型
- hud android,HUD | F-Droid - Free and Open Source Android App Repository
- Charles4.1最新版破解
- 音视频基本概念:分辨率、帧速率、码流、采样位深、采样率、比特率
- java applepay_ApplePay对接java后台详细代码
- cavas的验证码效果demo
- ultravnc软件,5款ultravnc软件推荐
- 追星必备神器 -- 爱豆APP
热门文章
- python高考加分_Python将纳入浙江省新高考,你知道了吗?
- 安卓Socket与pc端c#服务器的通信 附完整代码
- 去耦电容:10uF电容与0.1uF问题
- python筛选股票5日线以上_[python]沪深龙虎榜数据进一步处理,计算日后5日的涨跌幅...
- 基于java web和echarts的数据可视化项目
- 打开bat文件闪退以及‘java‘不是内部或外部命令,也不是可运行的程序或批处理文件【本人亲测解决方法】
- 【刷题】洛谷 P2675 《瞿葩的数字游戏》T3-三角圣地
- 论文阅读 [TPAMI-2022] ManifoldNet: A Deep Neural Network for Manifold-Valued Data With Applications
- 什么是jquery?简单的jquery代码
- leetcode刷题规划