【QT入门】Qt自定义控件与样式设计之qss介绍(Qt style sheet)

往期回顾:

【QT入门】 无边框窗口设计之实现圆角窗口-CSDN博客【QT入门】 无边框窗口设计综合运用之自定义标题栏带圆角阴影的窗口-CSDN博客

【QT入门】 无边框窗口设计之综合运用,实现WPS的tab页面-CSDN博客

【QT入门】Qt自定义控件与样式设计之qss介绍(Qt style sheet)

一、qss简介

1、什么是qss样式

Qt-style-sheet, 简写就是qss, Qt样式表,不需要用C++代码控件进行重载,就可以修改控件外观,美化界面,类似于前端的css,但是没有css功能强大。qss千变万化,可以写出各种花里胡哨的样式。

qss样式很多,篇幅很多,没法一一细讲,自己多看qss简介大全,需要用到什么得时候就去搜就是,主要是多看多记多熟悉,我以及把常用的上传。

https://download.csdn.net/download/LF__plus/89089225?spm=1001.2014.3001.5501

qss样式的注释形式: /*我是qss注释*/ 

2、QLabel 样式示例

比如:以QLabel为例进行介绍:

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

颜色可以直接用英文单词来写,也可以用rgb(r,g,b)来写,也可以rgba(r, g, b,透明度)来写。

二、常用样式

 1、字体样式

1.1示例
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-color,直接就是color 

当然字体也可以一起设置:

font: bold italic 18px "Microsoft YaHei";

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

 2、边框样式

2.1示例
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;  /*统一的半径*/

3、文字位置 

3.1对齐方式

 在 qss 中,没有对齐方式,只能通过设置 padding 来实现文字的显示位置

一般 padding-left 相当于 x 坐标,padding-top 相当于 y 坐标,设置这两个就可以在任意位置显示了(默认情况下文字是上下左右都居中显示的),这里就涉及到一个问题,如果同时设置padding-left 和padding-right呢?建议是不要同时设置,可能会出问题,一般来说真实开发的时候原型图上都会给清楚的。

4、背景样式

4.1示例
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,如果想不显示颜色可以设置值为透明 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: url(":/imgs/picture/0.png") no-repeat left center #363636;

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

 5、动态悬浮样式

 5.1示例
QLabel:hover
{color: red;border-color: green;background-color: #363636;
}

就是当鼠标放上去的时候会显示什么,这个运用是非常非常广泛的,多多熟悉 

 6、禁止使用的样式

6.1示例
QLabel:disabled
{color: blue;border-color: brown;background-color: #363636;
}

以上,就是qss常用的一些样式。

都看到这里了,点个赞再走呗朋友~

加油吧,预祝大家变得更强!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/799381.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

目标跟踪——行人检测数据集

一、重要性及意义 目标跟踪和行人检测是计算机视觉领域的两个重要任务,它们在许多实际应用中发挥着关键作用。为了推动这两个领域的进步,行人检测数据集扮演着至关重要的角色。以下是行人检测数据集的重要性及意义的详细分析: 行人检测数据…

4核8G服务器性能怎么样?4核8G12M配置可应对哪些场景?

腾讯云4核8G服务器多少钱?腾讯云4核8G轻量应用服务器12M带宽租用价格646元15个月,活动页面 txybk.com/go/txy 活动链接打开如下图所示: 腾讯云4核8G服务器优惠价格 这台4核8G服务器是轻量应用服务器,详细配置为:轻量4核…

CAP原则详解

CAP原则又称CAP定理: 指的是在一个分布式系统中,一致性(Consistency)、可用性(Availability)、分区容错性(Partition tolerance)。CAP 原则指的是,这三个要素最多只能同…

基于Spring Boot+Vue的汽车销售系统

摘 要 如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统汽车销售信息管理难度大,容错率低&#xff0…

【Linux】达梦数据库安装部署(附详细图文)

目录 一、安装前的准备工作 1.检查操作系统配置 (1)获取系统位数 getconf LONG_BIT (2)查看操作系统release信息 cat /etc/system-release (3)查询系统名称 uname -a (4)查看操…

深入浅出Python中单例模式的实现与应用

深入浅出Python中单例模式的实现与应用 引言 在面向对象设计模式中,单例模式是一种常用且重要的设计模式,它的核心目标是确保一个类仅有一个实例,并提供一个全局访问点。本文将详细阐述在Python中如何实现单例模式,并通过实例解析…

VS Code远程连接服务器运行python程序

之前一直用pycharm连接服务器跑程序,pycharm需要本地和远程都存一份代码,然后把本地的更新同步到服务器上来实现代码修改,后来实习的时候发现企业里面都用VS Code,不得不说,VS Code真的很方便,直接连服务器…

统计Excel文件中的答案选项和类别

功能 本脚本主要完成以下功能: 读取指定的Excel文件。从Excel文件中提取问题和答案选项。统计每个问题的答案选项分布。按类别细分每个答案选项的计数。将统计结果输出到JSON文件。 使用方法 要使用该脚本,用户需要提供以下信息: Excel文…

「媒体宣传」科技IT行业有哪些媒体邀约资源-51媒体网

传媒如春雨,润物细无声,大家好,我是51媒体网胡老师。 科技IT行业的媒体邀约资源非常丰富,包括了各种类型的传统媒体和新兴的网络媒体平台。以下是一些主要的媒体邀约资源: 除此之外,还有一些其他科技类网络…

算法 第34天 贪心3

1005 K 次取反后最大化的数组和 给你一个整数数组 nums 和一个整数 k ,按以下方法修改该数组: 选择某个下标 i 并将 nums[i] 替换为 -nums[i] 。 重复这个过程恰好 k 次。可以多次选择同一个下标 i 。 以这种方式修改数组后,返回数组 可能…

zookeeper 常见面试题和答案

zookeeper 使用场景 1.分配式配置中心,如kafka 元数据等等,注册中心 2.分布式协调服务,比如可以通过watch 机制来协调各个节点的行为 3.分布式锁/队列,可以实现分布式的数据结构 zookeeper 实现分布式锁 1.两种方案 zookeeper…

Failed to start docker.service: Unit is not loaded properly: Invalid argument.

Failed to start docker.service: Unit is not loaded properly: Invalid argument. 未知原因:docker服务无法正常load 解决方式: 卸载docker, 删除docker.service 重新安装docker Docker是一种相对使用较简单的容器,我们可以通过…

【QT+QGIS跨平台编译】063:【qca-softstore+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

点击查看专栏目录 文章目录 一、qca-softstore介绍二、QCA下载三、文件分析四、pro文件五、编译实践5.1 windows下编译5.2 linux下编译5.3 macos下编译一、qca-softstore介绍 QCA-Softstore 是一个软件证书存储插件,它是为 QCA 框架设计的。这个插件提供了一个简单的持久化证书…

SpringCloud Alibaba Sentinel 规则持久化

一、前言 接下来是开展一系列的 SpringCloud 的学习之旅,从传统的模块之间调用,一步步的升级为 SpringCloud 模块之间的调用,此篇文章为第十七篇,即使用 Sentinel 实现规则持久化。 二、概述 从前面我们做的实验可知,…

循环双链表算法库构建

学习贺老师数据结构数据结构之自建算法库——循环双链表_数据结构编写一个程序linklist.cpp-CSDN博客 模仿单链表逻辑,实现双链表, 大差不差 v1.0: 实现基本功能 V1.0 1.主要功能: //(1)头插法建立循环双链表 void Create_Double_CyclicList_Head(DoubleLinkList_Cyclic *&am…

相机标定——四个坐标系介绍

世界坐标系(Xw,Yw,Zw) 世界坐标系是一个用于描述和定位三维空间中物体位置的坐标系,通常反映真实世界下物体的位置和方向。它是一个惯性坐标系,被用作整个场景或系统的参考框架。在很多情况下,世界坐标系被认为是固定不变的,即它…

51单片机之串口通信

目录 1.串口简介 1.1TXD和RXD 1.2通讯接口 1.3通信方式 1.4 51单片机的UART模式 2.串口配置 2.1寄存器简介 SCON寄存器配置 PCON配置 2.2代码配置串口 2.2.1 配置串口发送数据 2.2.2配置电脑向单片机发送数据点亮LED 1.串口简介 串口是一个应用十分广泛的通讯接口&am…

对接穿山甲激励视频广告,收益如何?

激励视频广告一直是广告平台探索的重要广告类型,在激励任务达成或者激励视频退出时,为用户新增广告任务。“激励视频”广告满足部分用户多看广告获得更多奖励心理的需求的同时,提升了开发者广告曝光机会。进而提升了广告变现效率。#APP广告变…

复习知识点整理

零碎语法 1.导入某个文件夹的index文件,index可以省略(这里导入的是router和store文件下的index.js文件) 2.路由懒加载 this 1.在vue文件中使用router\store对象时 this:普通函数的this指向vue实例对象(在没有明确指向的时候…

C#实践作业1(类、接口、委托)

题目: 使用 C# 编码(涉及类、接口、委托等关键知识点),实现对周黑鸭工厂的产品生产统一管理,主要产品包括鸭脖和鸭翅。武汉工厂能生生产鸭脖和鸭翅,南京工厂只能生产鸭翅,长沙工厂只能生产鸭脖。…