Qt QLabel样式表总结

article/2025/10/14 5:06:19

先来个例子

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 这种样式的.


http://chatgpt.dhexx.cn/article/uOgXp3ER.shtml

相关文章

QT QLabel中字体行间距怎么设置?

方式一&#xff1a;<br>可以达到换行的效果&#xff0c;但是行间距太小了&#xff0c;两个<br>又太大了&#xff0c;这种方法并不可控。 m_titleLabel->setText("<font style font-size:19px; color:#ffff00;font-weight:bold> 客户端界面 </font…

重写QLabel实现图片显示框选截取保存

之前写过用重写QGraphicsItem的方式来实现图片显示&#xff0c;框选&#xff0c;保存的代码&#xff0c;这次通过重写QLabel的方式来实现。 主要重写QLabel的代码如下&#xff1a; mylabel.h #ifndef MYLABEL_H #define MYLABEL_H#include <QObject> #include <QWidg…

QLabel 标签

QLabel 标签 QLabel 是 PyQt6 里用来建立文字或图片的标签控件&#xff0c;这篇教学会介绍如何在 PyQt6 窗口里加入 QLabel 标签&#xff0c;并进行像是文字字型、大小、颜色和位置...等参数设定。 快速预览&#xff1a; 加入 QLabel 标签 QLabel 位置设定 QLabel 文字设定 …

QLabel的使用

QLabel介绍 QLabel 是 Qt 框架中的一个控件类&#xff0c;用于显示文本或图像。它可以在窗口或其他容器中显示静态文本&#xff0c;并且可以根据需要设置格式、对齐方式和尺寸。 主要作用如下&#xff1a; 显示文本内容&#xff1a;QLabel 可以显示文字内容&#xff0c;可以…

QLabel显示图像

QLabel显示图像 通常用QLabel显示图像&#xff0c;QLabel类有setPixmap()函数&#xff0c;可以用来显示图像。也可以直接用QPainter画出图像。 如果图像过大&#xff0c;直接用QLabel显示&#xff0c;将会出现有部分图像显示不出来&#xff0c;这时可以用Scroll Area部件。方…

QLabel绘制滚动文本

实现思路 绘制滚动文本是个很简单的事&#xff0c;只需要用定时器累计一个文本坐标偏移量&#xff0c;然后 update &#xff0c;在 paintEvent 里把文本画出来。 Qt 定时刷新可以用&#xff08;可能还有其他方式&#xff09;&#xff1a; QObject的startTimer配合paintEvent&…

PyQt5 QLabel控件

PyQt5 QLabel控件 QLabel常用方法显示动画超链接 QLabel常用信号 QLabel 就是常见的标签&#xff0c;可以用来显示文字&#xff08;包括纯文本和富文本)&#xff0c;图片及动画。 QLabel常用方法 方法描述margin保存 QLabel 控件中内容与边框之间的距离&#xff08;边距&#…

Qt QLabel详解

一、QLabel常用方法 1. QLabel设置文本内容 ui.label->setText(QStringLiteral("测试中文\n"));2. QLabel设置颜色 通过设计器里面的改变样式进行设置&#xff1a;同时可以设置字体、文本对齐方式、背景图片 color: rgb(255, 85, 0); background-color: rgb(8…

Qt之QLabel(属性 显示图片 显示动图 显示富文本信息 信号)

QLabel可以说是Qt中最常见的控件之一&#xff0c;主要用来显示文本文字、显示图片、显示gif动图、显示富文本信息。本文将从以下几个方面对QLabel进行介绍: [1]显示及获取文本文字 [2]显示图片 [3]显示动图 [4]显示富文本信息 [5]常用属性设置 [6]信号事件 至于样式表(Q…

Qt扫盲-QLabel使用总结

QLabel使用总结 一、QLabel 显示内容二、注意事项1. 格式注意2. 不保留先前状态3. 格式对齐4. 伙伴焦点 三、信号和槽函数使用1. 信号2. 槽函数 总结&#xff1a; QLabel 其实就是一个用来只读显示的简易控件。适合数据量很小的内容显示。 QLabel用于显示 文本或图像。 不提供…

QT常用控件——QLabel标签控件

操作系统: 统信UOSv20 Qt版本: 5.11.3 一&#xff0c;简单介绍 QLabel用于显示文本或图像&#xff0c;不提供用户交互功能&#xff0c;标签的视觉外观可以以各种方式配置。 项目内容HeaderQLabelqmakeQT widgetsInheritsQFrame 二&#xff0c;常用方法 1. 常用方法 方法…

JavaScript 弹出对话框3种方式

js 弹出对话框3种方式对话框有三种 1&#xff1a;只是提醒&#xff0c;不能对脚本产生任何改变&#xff1b; 2&#xff1a;一般用于确认&#xff0c;返回 true 或者 false &#xff0c;所以可以轻松用于 if...else...判断 3&#xff1a;一个带输入的对话框&#xff0c;可以返回…

js的弹出框

js的弹出框包括三种&#xff1a;alert、confirm、prompt 1 alert() alert()方法有一个参数&#xff0c;就是用户想弹出的内容&#xff0c;弹出框很简单&#xff0c;就一个显示功能&#xff0c;你可以点击确认关闭这个弹出框。 例如&#xff1a; alert("hello world&…

JavaScript弹出对话框的三种方法

三种方法 alert(); 最简单&#xff0c;将alert();括号内的内容弹出。 confirm(); 与alert();类似&#xff0c;包含确认和取消按钮&#xff0c;点击确定confirm();方法会返回true&#xff0c;点击取消confirm();方法会返回false&#xff1b; prompt(); 与confirm();方法…

JavaScript弹出框

提到弹出框&#xff0c;首先想到的alert()了&#xff0c;其次想到的也还是alert&#xff08;&#xff09;&#xff0c;其实在js中有三种弹出框&#xff0c;下面我们一一说明。 1&#xff0c;仅确定。 即&#xff1a;对话框界面上只有确定按钮。该功能可以使用alert&#xff08;…

JS弹出对话框的三种方式

javascript的三种对话框是通过调用window对象的三个方法alert()&#xff0c;confirm()和prompt()来获得&#xff0c;可以利用这些对话框来完成js的输入和输出&#xff0c;实现与用户能进行交互的js代码。 第一种&#xff1a;alert()方法 alert()方法是这三种对话框中最容易使用…

JavaScript弹出对话框的三种方式-alert()-confirm()-prompt()

一、alert()警告框&#xff08;确定&#xff09; alert()方法是显示一条弹出提示消息和确认按钮的警告框。 需要注意的是 &#xff1a; alert()是一个阻塞的函数&#xff0c;如果不点确认按钮&#xff0c;后面的内容就不会加载出来。 使用方式&#xff1a; alert(“想要提示的文…

ssh 公钥登录

公钥登录远程主机 ssh-copy-id命令可以把本地主机的公钥复制到远程主机的authorized_keys文件上。 ssh-copy-id命令也会给远程主机的用户主目录&#xff08;home&#xff09;和~/.ssh, 和~/.ssh/authorized_keys设置合适的权限。 ssh-copy-id [-i [identity_file]] [user]m…

SSH登录失败提示Key exchange failed

前两天去配置一台华为5735交换机&#xff0c;到现场才被告知网络中不允许接入私人电脑&#xff0c;要用他们的涉密电脑配置&#xff0c;结果配置完成后测试SSH远程登录失败&#xff0c;提示如下图&#xff1a; 多次检查配置没有发现有什么遗漏&#xff0c;后来询问别人告知是本…

统信UOS配置SSH登录

配置ssh登录 vim /etc/ssh/sshd_config #打开ssh配置文件 Port 22 #开启ssh 22端口 PermitRootLogin yes #允许root登录 systemctl restart sshd #重启sshd服务 使用MobaXterm1_CHS1远程工具测试 登录成功