【QT】QSS美化——基础知识_qt qss-程序员宅基地

技术标签: qss  css  qt  QT学习之路  

目录

一、辅助工具

二、QSS加载方式

三、QSS选择器类型

3.1 通配选择器

3.2 类型选择器

3.3 属性选择器

3.4 类选择器

3.5 ID选择器

3.6 后代选择器

3.7 子选择器

3.8 伪类选择器

四、QSS常用属性

4.1 字体

4.2 颜色

4.3 内边距

4.4 外边距

4.5 背景

4.6 边框

4.7 宽高

五:QSS伪状态与子控件


一、辅助工具

QSS官方:Qt Style Sheets Reference | Qt Widgets 5.15.8

CSS参考手册:CSS 参考手册

样式编辑器,源码地址:https://github.com/hustlei/QssStylesheetEditor

皮肤生成器,源码地址:https://github.com/satchelwu/QSS-Skin-Builder

素材库,阿里矢量图:iconfont-阿里巴巴矢量图标库

二、QSS加载方式

方式一:

myDialog->setStyleSheet("QLineEdit { background-color: yellow }");
nameEdit->setStyleSheet("background-color: yellow");

方式二:

QFile file(":/qss/main.qss");
file.open(QFile::ReadOnly);
QTextStream filetext(&file);
QString stylesheet = filetext.readAll();
this->setStyleSheet(stylesheet);
file.close();

三、QSS选择器类型

3.1 通配选择器

  *  

  匹配所有的控件


3.2 类型选择器

  QPushButton 

  匹配所有QPushButton和其子类的实例

QPushButton {background: gray;}


3.3 属性选择器

   QPushButton[flat="false"]

   匹配所有flat属性是false的QPushButton实例,注意该属性可以是自定义的属性,不一定非要是类本身具有的属性

QPushButton[level='dangerous'] { background: magenta; }
/*openButton->setProperty("level",  "dangerous");*/


3.4 类选择器

 .QPushButton 

 匹配所有QPushButton的实例,但是并不匹配其子类。这是与CSS中的类选择器不一样的地方,注意前面有一个点号

.RedButton { background: magenta; }

/*
openButton->setProperty("class",  "RedButton");
closeButton->setProperty("class", "RedButton");
*/


3.5 ID选择器

  #myButton

 匹配所有id为myButton的控件实例,这里的id实际上就是objectName指定的值

#openButton, #closeButton { background: magenta; }


3.6 后代选择器

   QDialog QPushButton

   所有QDialog容器中包含的QPushButton,不管是直接的还是间接的

QDialog {background: gray;}
/* 设置 QDialog中的 QPushButton 的 QSS */
QDialog QPushButton {
    border: 2px solid magenta;
    border-radius: 10px;
    background: white;
    padding: 2px 15px;
}


3.7 子选择器

  QFrame> QPushButton

   所有QFrame容器下面的QPushButton,其中要求QPushButton的直接父容器是QFrame,注意和后代选择器的区别

QFrame {background: gray;}
QFrame > QPushButton {
    border: 2px solid magenta;
    border-radius: 10px;
    background: white;
    padding: 2px 15px;
}

3.8 伪类选择器

选择器:状态 作为选择器,支持 ! 操作符,表示 非。

QPushButton:hover { color: white }
QCheckBox:checked { color: white }
QCheckBox:!checked { color: red }

所有的这些选择器可以联合使用,并且支持一次设置多个选择器类型,用逗号隔开,这点与CSS一样,例如:

#frameCut,#frameInterrupt,#frameJoin 表示所有这些id使用一个规则。

#mytable  QPushButton 表示选择所有id为mytable的容器下面的QPushButton实例

四、QSS常用属性

4.1 字体

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD

样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)

行高 {line-height: normal;}(正常) 单位:PX、PD、EM

粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)

变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)

大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

字体名:

微软雅黑:

Microsoft YaHei

宋体:SimSun

黑体:SimHei

仿宋: FangSong

楷体:  KaiTi

隶书:LiSu

幼圆:YouYuan

华文细黑:STXihei

华文楷体:STKaiti

华文宋体:STSong

华文中宋:STZhongsong

华文仿宋:STFangsong

方正舒体:FZShuTi

方正姚体:FZYaoti

华文彩云:STCaiyun

华文琥珀:STHupo

华文隶书:STLiti

华文行楷:STXingkai

华文新魏:STXinwei

font: 15px "Segoe UI";             /* 字体:大小 名称 */  

font-family: "Segoe UI";           /* 字体名称 */  

4.2 颜色

17种标准色:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,olive, orange, purple, red, silver, teal, white, yellow

colo:rgb(255,255,255);   

color: #F5F5F5;               /* 前景(文本)颜色 */  

color: qlineargradient();     /* 前景(文本)颜色:线性渐变*/  

color: qradialgradient();     /* 前景(文本)颜色:辐射渐变*/  

color: qconicalgradient();    /* 前景(文本)颜色:梯形渐变*/  

4.3 内边距

padding: 4px;                      /* 文字边距 */  

padding-left: 5px;                 /* 文字左边距 */  

padding-right: 10px;               /* 文字右边距 */  

padding-top: 3px;                  /* 文字顶边距 */  

padding-bottom: 3px;               /* 文字底边距 */

4.4 外边距

margin: 14px 18px 20px 18px; /*外边距 顺序上右下左 */

margin-top: 14px;

margin-right: 18px;

margin-bottom: 20px;

margin-left: 18px;

4.5 背景

background-color: #202122;               /* 背景颜色 */  

background-color: qlineargradient();    /* 背景颜色:线性渐变*/  

background-color: qradialgradient();    /* 背景颜色:辐射渐变*/  

background-color: qconicalgradient();   /* 背景颜色:梯形渐变*/  

background-image:url(boder.png);        /* 背景图片 */  

background-position: ;                 /* 背景图片对齐方式 */  

background-repeat: ;                   /* 背景图片平铺方式 */  

4.6 边框

border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;

border-width:; 边框宽度

border-color:#;

简写方法border:width style color; /*简写*/

border: 1px solid #FDBC03;                       /* 边框:宽度 颜色*/  

border-image:url(boder.png) 4 8 12 16;           /* 边界图 切线 */  

border-radius: 4px;                              /* 角弧度 */  

border-top-left-radius: ;                        /* 角弧度:左上角*/  

border-top-right-radius: ;                       /* 角弧度:右上角*/  

border-bottom-left-radius: ;                     /* 角弧度:左下角*/  

border-bottom-right-radius: ;                    /* 角弧度:右下角*/  

4.7 宽高

width:12px;   /*设置宽度 单位像素*/

height:40px     /*设置高度*/

min-width:65px;     /*最小宽度 设置width无效可以尝试设置min-width */                      

min-height:12px;    /*最小高度*/                       

max-width:12px;

max-height:12px;

五:QSS伪状态与子控件

伪状态列表

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

子部件列表

::down-arrow         /*combo box或spin box的下拉箭头*/ 
::drop-down          /*combo box的下拉箭头*/ 

::indicator      /*checkbox、radio button或可选择group box的指示器*/ 
::item               /*menu、menu bar或status bar的子项目*/ 
::menu-indicator     /*push button的菜单指示器*/ 
::title              /*group box的标题*/ 

::down-button        /*spin box的向下按钮*/
::up-arrow           /*spin box的向上箭头*/ 
::up-button          /*spin box的向上按钮*/ 

参考文章:

Qt Style Sheet实践(一):按钮及关联菜单 - 24K纯开源 - 博客园

使用Qss设置QT程序界面的样式和皮肤 - 一字千金 - 博客园

qt QSS文件伪状态 - luxiaolai - 博客园

QSS总结以及最近做的Qt项目 - 薰衣草的旋律 - 博客园

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_40602000/article/details/104652131

智能推荐

scanner读取带空格字符串_Scanner中nextInt()和nextline()读取字符串的问题-程序员宅基地

文章浏览阅读669次。importjava.util.Scanner;public classMain {public static voidmain(String[] args) {ints1;String s2;Scanner sc= newScanner(System.in);System.out.print("请输入第一个数:");s1=sc.nextInt();System.out.print("请输入第二个..._sc.nextline()读到了空字符串

springmvc——Day01-程序员宅基地

文章浏览阅读214次。springmvc 第一天 springmvc的基础知识 课程安排:第一天:springmvc的基础知识什么是springmvc?springmvc框架原理(掌握) 前端控制器、处理器映射器、处理器适配器、视图解析器springmvc入门程序 目的:对前端控制器、处理器映射器、处理器适配器、视图解析器学习 非注解的处理器映射器、处理器适配器 ...

生产者-消费者模型_sem_init 生产者 消费者-程序员宅基地

文章浏览阅读304次。在写生产者—消费者模型时,先谈及一个概念——信号量。 sem函数: (1)sem_init函数是Posix信号量操作中的函数。sem_init() 初始化一个定位在 sem 的匿名信号量。 value 参数指定信号量的初始值。 pshared 参数指明信号量是由进程内线程共享,还是由进程之间共享。如果 pshared 的值为 0,那么信号量将被进程内的线程共享,并且应该放置在这个进程的所有线程_sem_init 生产者 消费者

DataGridView绑定数据源后添加行_datagridview绑定数据源后增加行-程序员宅基地

文章浏览阅读6.9k次,点赞3次,收藏13次。在已经绑定数据源时,无法以Add的方式方式添加行,会报错解决方法一:DataRow dr =((DataTable)dataGridView1.DataSource).NewRow;((DataTable)dataGridView1.DataSource).Rows.Add(dr);解决方法二://先将datatable(dt)新增行,然后重新绑定数据源//DataT..._datagridview绑定数据源后增加行

批量访问统一IP不同端口的服务导致登陆会话失败timeout的原因_vue 同一个ip不同端口的cookie共享导致相同端不能登录-程序员宅基地

文章浏览阅读535次。今天写了个脚本,脚本作用是自动打开浏览器显示多个页面并输入测试账号/密码/验证码验证端口服务是否正常(其实可以通过)。遇到的问题:当所有页面打开后,自由最后一个页面可以正常访问,之前打开的界面都无法访问代码整理后贴出排查经过:一开始一位是脚本切换页面导致一些数据以实发生这种现象,随后是手动打开Chorme浏览器打开两个页面也会出现此问题之后发现在不同的电脑的不同浏览器不会此问题。去后台filter找到相应代码发现了这段代码HttpServletRequest req =.._vue 同一个ip不同端口的cookie共享导致相同端不能登录

Vue脚手架安装_vue中怎么安装脚手架-程序员宅基地

文章浏览阅读4.5k次,点赞21次,收藏75次。一、安装Node.js及配置环境1、下载Node.js①浏览器中输入Node.js进行搜索,找到Node.js官网②选择14.17.6_vue中怎么安装脚手架

随便推点

Pytorch 技巧 torch.clamp_ 限定输入矩阵内的值到指定范围内_th.clamp_-程序员宅基地

文章浏览阅读1.1k次。torch.clamp(input, min, max, out=None) → TensorClamps all elements in input into the range [ min, max ]. Letting min_value and max_value be min and max, respectively, this returns:将input内的值限定在(min,max)区间内。yi=min⁡(max⁡(xi,min_valuei),max_valuei)y_i = \m_th.clamp_

c++使用智能指针时,尽量不要暴露原始指针_c++获取指针不使用原指针-程序员宅基地

文章浏览阅读1.1k次。 c++使用智能指针 ,如std::auto_ptr apstr1(new string("test")); 不应写成:string* str1 = new string("test")); std::auto_ptr apstr1(str1);。  总之c++使用智能指针时,尽量不要暴露原始指针,比较不会产生不必要的问题。 _c++获取指针不使用原指针

Pie_pie kai-程序员宅基地

文章浏览阅读125次。PieMy birthday is coming up and traditionally I’m serving pie. Not just one pie, no, I have a number N of them, of various tastes and of various sizes. F of my friends are coming to my party and each of them gets a piece of pie. This should be one piece o_pie kai

Jackson 与 fastJson 对象与json字符串互相转换_fastjson unrecognized field-程序员宅基地

文章浏览阅读724次。Jacksonjava对象与json字符串互相转换的关键就是ObjectMapper对象的writeValue()方法 和 readValue()方法;其中json字符串可以字符串的形式传入/传出,也可以以文件的形式传入/传出,见writeValue()方法 和 readValue()方法不同的参数。ObjectMapper mapper = new ObjectMapper(); // java对象转换为json字符换String Json = mapper.writeValueAsStrin_fastjson unrecognized field

[RK3568 Android11] 开发之编译源码_error: hardware/rockchip/librga/android.bp:18:1: m-程序员宅基地

文章浏览阅读1.6k次。目录前言一、环境搭建二、完整编译三、部分编译四、编译报错问题五,烧入系统,Android11界面展示前言 编译源码是作为底层驱动工程师首要进行的工作,源码没有编译和编译不成功,是没有办法进行下一步调试,而且每个原厂厂商都有自己一套的编译方式;所以此篇文件讲解下RK3568 Android11 SDK源码编译步骤和遇到的编译问题; 编译的方式有两种:完整编译和部分编译; 完整编译:自动全部编译完成,生成升级所需要的update...._error: hardware/rockchip/librga/android.bp:18:1: module "gen_rga_version": m

PowerPC的八卦情史_powerpc收购-程序员宅基地

文章浏览阅读676次。出处:http://www.eefocus.com/demi/blog/09-10/178204_659af.html 昨天参加了power.org。这对我完全是未知领域,于是今昨两天看了几年来关于powerPC比较重要的“旧闻”,发现其历史嬗变简直是一部江湖恩怨世情小说…… Intel有史以来最大的竞争对手据说是80年代的摩托罗拉,当时俩公司在危机处理器上掐的你死我活。当时是由于 IBM PC 兼容机的逐步普及,技术上相对落后的英特尔反而占了更多_powerpc收购