前言：

该博文的参考博客，在文末给出，如有侵权请联系博主，会在第一时间删除。

Qt样式表

Qt样式表(style sheet)是用于定制用户界面的强有力的机制，其概念、术语是收到HTML中的级联样式表(Cascading Style Sheets,CCS)启发而来，只是Qt样式表是用用于窗体界面的

与HTML的CSS类似，Qt的样式表是纯文本的格式定义，在应用程序运行时可以载入和解析这些样式定义。使用样式表可以定义各种界面组件(QWidget类及其子类)的样式，从而使应用程序的界面呈现不同的效果。很多软件具有换肤功能，使用Qt的样式表就可以很容易的实现这样的功能

盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BngsUGSH-1634185175829)(assets/box-model.gif)]

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

2、选择器
到目前为止所有的例子使用的都是最简单的选择器类型。QT样式表支持CSS2定义的所有选择器。下表总结了最常用的选择器类型。

选择器类型
选择器   示例   描述
通用选择器   *   匹配所有控件
类型选择器   QPushButton   匹配给定类型控件，包括子类
类选择器   .QPushButton   匹配给定类型控件，不包括子类
属性选择器   QPushButton[flat=“false”]   匹配给定类型控件中符合[属性]的控件
ID选择器   QPushButton#closeBtn   匹配给定类型，且对象名为closeBtn的控件
子对象选择器   QDialog>QPushButton   匹配给定类型的直接子控件
子孙对象选择器   QDialog QPushButton   匹配给定类型的子孙控件
辅助(子控件)选择器   QComboBox::drop-down   复杂对象的子控件
伪状态选择器   QPushButton:hover   控件的特定状态下的样式
伪状态选择器
状态   描述
:disabled   控件禁用
:enabled   控件启用
:focus   控件获取输入焦点
:hover   鼠标在空间上悬停
:pressed   鼠标按下
:checked   控件被选中
:unchecked   控件没有选中
:indeterminate   控件部分被选中
:open   控件
:closed   空间关闭
:on   控件可以切换，且处于on状态
:off   控件可以切换，且处于off状态
!   对以上状态的否定

3、控件示例

QLabel
设置字体样式

QLabel
{/*分开设置*//*font-family: "楷体";*/font-size: 20px;font-style: italic;font-weight:bold ;/*快捷设置*/font:bold italic 18px "微软雅黑";color:cornflowerblue;
}

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

文字位置

QLabel
{padding-left: 10px;padding-top: 8px;padding-right: 7px;padding-bottom: 9px;
}

Tip: 在 qss 中，属性 text-align 对 Label 是不起作用的，只能通过设置 padding 来实现文字的显示位置；一般 padding-left 相当于 x 坐标，padding-top 相当于 y 坐标，设置这两个就可以在任意位置显示了（

边框样式

QLabel
{/*分开设置*/border-style: solid;border-width: 2px;border-color:darkgoldenrod;/*快捷设置*/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 来写，不然不会生效！

单独设置某条边框的样式

QLabel
{border-left: 2px solid red;border-top: 2px solid black;border-right: 2px solid blue;border-bottom-color: transparent;    /*下边框透明，不显示*/
}

设置边框半径(圆角)

QLabel
{border-left: 2px solid red;border-top: 2px solid black;border-right: 2px solid blue;border-bottom: 2px solid yellow;border-top-left-radius: 20px;border-top-right-radius: 15px;border-bottom-left-radius: 10px;border-bottom-right-radius: 5px;    /*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

背景样式

QLabel
{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 这些属性值出现的顺序可以任意

QPushButton

QPushButton
{/*1*/border:none;    /*去掉边框*/border-radius:10px;/*1，添加图片*/background-image: url(:/images/quit.png);background-repeat:none;background-position:center;/*3，把图片作为边框，会自动铺满背景*/border-image: url(:/images/quit.png);
}
QPushButton:hover
{background-color:rgba(102,205,227,255);
}
QPushButton:pressed
{background-color:rgb(48,188,218);
}

QCheckBox、QRadioButton

QCheckBox
{color:red;
}QCheckBox::indicator
{width:16px;height:16px;border-image: url(:/images/checkbox-unchecked.png);border-radius:5px;
}
QCheckBox::indicator:checked
{    border-image: url(:/images/checkbox-checked.png);
}
QCheckBox::indicator:unchecked:hover
{    border-image: url(:/images/checkbox-unchecked-hover.png);
}
QCheckBox::indicator:checked:hover
{border-image: url(:/images/checkbox-checked-hover.png);
}

QGroupBox

QGroupBox {background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #E0E0E0, stop: 1 #EEEEEE);border: 2px solid gray;border-radius: 5px;margin-top: 10px; /* leave space at the top for the title */
}QGroupBox::title {subcontrol-origin: margin;subcontrol-position: top center; /* position at the top center */padding: 2px 3px;color: white;margin-top: 2px;background-color: gray;border-radius: 3px;spacing: 5px;
}QGroupBox::indicator {width: 13px;height: 13px;border: 1px solid black;background: white;
}QGroupBox::indicator:checked {background: yellow;
}

QComboBox

QComboBox {color: black;border:1px solid black;border-radius:5px;padding: 1px 1px 1px 1px;    /*不加这个圆角会有缺失*/
}
QComboBox::drop-down
{width:25px;border-image: url(:/images/comboBox/drop-down.png);
}
QComboBox::drop-down:hover
{border-image: url(:/images/comboBox/drop-down-hover.png);
}
/*把checked换成on也行*/
QComboBox::drop-down:checked
{border-image: url(:/images/comboBox/drop-down-on.png);
}
QComboBox::drop-down:checked:hover
{border-image: url(:/images/comboBox/drop-down-on-hover.png);
}

下拉项使用委托(未测试)

QSpinBox、QTimeEdit、QDateEdit、QDateTimeEdit
QSpinBox 的 subcontrol 有 ::up-button, ::down-button, ::up-arrow, ::down-arrow。

up-button 显示在 QSpinBox 里，它的 subcontrol-origin 是相对于 QSpinBox的
down-button 显示在 QSpinBox 里，它的 subcontrol-origin 是相对于 QSpinBox的
up-arrow 显示在 up-button 里，它的 subcontrol-origin 是相对于 up-button 的
down-arrwo 显示在 down-button 里，它的 subcontrol-origin 是相对于 down-button 的

QSpinBox
{border:1px solid black;border-radius:5px;
}
/*按钮*/
QSpinBox:down-button,QSpinBox:up-button
{width:16px;height:15px;subcontrol-origin:padding;background:white;border:2px solid rgb(217,217,217);border-radius:5px;
}QSpinBox:down-button
{subcontrol-position:left center;
}QSpinBox:up-button
{subcontrol-position:right center;
}QSpinBox:down-button:hover,QSpinBox:up-button:hover
{border:2px solid rgb(138,138,138);
}
/*箭头*/
QSpinBox:down-arrow
{    border-image: url(:/images/spinBox/down-arrow.png);
}QSpinBox:up-arrow
{border-image: url(:/images/spinBox/up-arrow.png);
}
QSpinBox:down-arrow:hover
{    border-image: url(:/images/spinBox/down-arrow-hover.png);
}QSpinBox:up-arrow:hover
{border-image: url(:/images/spinBox/up-arrow-hover.png);
}

QSlider
QSlider 的 subcontrol 有 ::groove（槽），::handle，::add-page 和 ::sub-page。

groove 显示在 QSlider 里，它的 subcontrol-origin 是相对于 QSlider 的
handle 显示在 groove 里，它的 subcontrol-origin 是相对于 groove 的
sub-page 显示在 groove 里，它的 subcontrol-origin 是相对于 groove 的
add-page 显示在 groove 里，它的 subcontrol-origin 是相对于 groove 的
handle, sub-page, add-page 虽然都显示在 groove 里，但是都可以把它们扩展到 groove 外

QSlider::groove:horizontal
{border: 1px solid skyblue;background-color: skyblue;height: 10px;border-radius: 5px;
}QSlider::handle:horizontal
{background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.7 white,stop:0.8 rgb(143,212,255));width: 20px;border-radius: 10px;    margin-top: -5px;margin-bottom: -5px;
}
QSlider::sub-page:horizontal
{background: #999;margin: 5px;border-radius: 5px;
}QSlider::add-page:horizontal
{background: #666;margin: 5px;border-radius: 5px;
}

QProgressBar
对于 QProgressBar 的 QSS，大多数都是想把 chunk 定义为圆角矩形的样子，但是当它的 value 比较小时，chunk 的圆角会变成直角，即使使用图片都不行，效果很不理想，所以如果要修改 QProgressBar 的外观的话，推荐继承 QProgressBar 自己绘制或者使用 QStyle。

/*边框*/
QProgressBar
{border:1px solid skyblue;border-radius:5px;height:5px;text-align: center;
}
/*进度条*/
QProgressBar::chunk
{background-color: steelblue;border-radius: 5px;
}

QProgressBar
{
border-color: 1px solid blue;
border-radius: 5px;
text-align: center;
}

QProgressBar:chunk
{
background-color: aqua;   /*设置快的颜色*/
width: 5px;       /*块的宽度*/
margin: 0.5px;   /*让每个块之间有点间隔*/
}

如果最大值和最小值都为0，则会显示一个繁忙提示，等待系统容错处理结束，再继续恢复加载

progressBar->setRange(0,0);

原文链接：https://blog.csdn.net/Python_Alice/article/details/120761496

pyqt5样式表设计相关推荐

button 样式_实战PyQt5: 111-可以使用QSS样式表的部件
可以使用QSS样式表的部件 QSS样式表支持各种部件,属性,伪状态和子控件,从而可以实现定制部件的外观,下面我们将详细列出可以使用QSS样式表的部件: QAbstractScrollArea:所有派生 ...
python做一个窗口样式_python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法...
本文借用HTML的css语法,将样式表应用到窗口部件.这里只是个简单的例子,实际上样式表的语法很丰富. 以下类似于css: StyleSheet = """ QCombo ...
设计漂亮的样式表是一门艺术(译)
作者:珊瑚大家好, 我是珊瑚. 和66一样工作2+年了,在经过第一年的PHP开发之后, 对前端开发的喜爱被挖掘出来,并且一发不可收拾. 同时也迷恋平面设计, 可用性设计. 在CssRain这个平台上 ...
pyqt5把图标和qss样式表打包
做桌面程序少不了图标啊,样式表这些,比如pyqt5,用绝对路径不合适,一旦变了目录就不行了,只能用相对路径,但是相对路径也有问题,当用右键打开我们的程序时,相对路径也会失效,于是放度娘,发现pyqt5 ...
pyqt5登录界面设计——模仿qq登录界面，可登录注册（数据库）
pyqt5登录界面设计--模仿qq登录界面一.简单易用的可直接登录的界面--账号密码程序写死 1.1.效果图: 1.2.视频效果图 3.代码说明 4.使用示例 5.全部源码见: 二.带数据库的可登录 ...
PyQt5下界面设计, 无边框加阴影界面, 鼠标左键移动事件
本人小白, 网罗各个网页与资源学习总结的内容, 设置界面无边框且留有阴影, 且鼠标左键可以拖动界面的方法. 首先我们寻找一个模板进行学习演示, 例如腾讯会议的界面: 本人会仿照这个界面进行演示说明, ...
java中冒号是什么意思_css样式表有哪些？css双冒号是什么意思
SS即层叠样式表(英语:Cascading Style Sheets,又称串样式列表.级联样式表.串接样式表.阶层式样式表)是一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体.间距和颜 ...
在html中引用css样式表,怎么引用css样式？
怎么引用css样式?下面本篇文章给大家介绍一下在HTML中引用css样式的几种方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.使用行内样式表语法:在标签内部写入一个sty ...
[Qt教程] 第45篇进阶（五）Qt样式表
[Qt教程] 第45篇进阶(五)Qt样式表楼主发表于 2013-9-13 15:43:55 | 查看: 329| 回复: 1 Qt样式表版权声明该文章原创于Qter开源社区导语一个完善 ...

pyqt5样式表设计

前言：

Qt样式表

3、控件示例

pyqt5样式表设计相关推荐

最新文章

热门文章