本文主要是介绍【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常用的一些样式。
都看到这里了，点个赞再走呗朋友~
加油吧，预祝大家变得更强！
这篇关于【QT入门】Qt自定义控件与样式设计之qss介绍(Qt style sheet)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
