PySide6中QSS(Qt Style Sheet,类似CSS)支持的属性

 更新时间:2026年01月22日 09:01:14   作者:Wiktok  
本文总结了PySide6中QSS(Qt样式表)支持的常用属性,分为通用属性和控件专属属性两大类,下面就来详细的介绍如何使用,感兴趣的可以了解一下

PySide6中的QSS(Qt Style Sheet,类似CSS)支持的属性可分为通用属性控件专属属性,覆盖样式、布局、交互等场景。以下按分类列出常用属性(包含核心用法):

一、通用属性(所有控件支持)

属性名作用示例
background-color设置背景色:background-color: #F5F5F5;
background-image设置背景图:background-image: url("bg.png");(支持本地/资源文件)
background-repeat背景图重复方式:background-repeat: no-repeat;(不重复)
background-position背景图位置:background-position: center;(居中)
color设置文本颜色:color: #333333;
font-family字体:font-family: "微软雅黑", "SimHei";
font-size字号:font-size: 14px;
font-weight字重:font-weight: bold;(加粗)/normal(常规)
font-style字体样式:font-style: italic;(斜体)
border边框简写:border: 1px solid #CCCCCC;(宽度+样式+颜色)
border-width边框宽度:border-width: 2px;
border-style边框样式:border-style: dashed;(虚线)/solid(实线)
border-color边框颜色:border-color: #FF0000;
border-radius边框圆角:border-radius: 4px;(圆角半径)
padding内边距(控件内容与边框的距离):padding: 5px;
margin外边距(控件与其他控件的距离):margin: 3px;
width/height控件固定宽/高:width: 100px; height: 30px;
min-width/min-height最小宽/高:min-width: 80px;
max-width/max-height最大宽/高:max-height: 50px;
opacity透明度(0-1):opacity: 0.8;(半透明)
visibility可见性:visibility: hidden;(隐藏但保留空间)/visible(显示)
display显示方式:display: none;(隐藏且不保留空间)/block(显示)

二、布局相关属性

属性名作用示例
alignment子控件对齐方式(仅布局/容器):alignment: center;
spacing布局内控件间距(仅布局):spacing: 10px;

三、控件专属属性(常用控件)

1. 按钮类(QPushButton/QToolButton等)

属性名作用示例
icon按钮图标:icon: url("btn_icon.png");
icon-size图标大小:icon-size: 20px 20px;(宽×高)
pressed伪状态按下时样式:QPushButton:pressed { background-color: #E0E0E0; }
hover伪状态悬浮时样式:QPushButton:hover { border-color: #007AFF; }
checked伪状态选中时样式(单选/复选):QRadioButton:checked { color: #FF0000; }

2. 输入类(QLineEdit/QTextEdit等)

属性名作用示例
placeholder-text占位符文本:QLineEdit { placeholder-text: "请输入用户名"; }(Qt 5.10+)
selection-background-color选中文本背景色:QLineEdit { selection-background-color: #007AFF; }
selection-color选中文本颜色:QLineEdit { selection-color: white; }
read-only伪状态只读时样式:QLineEdit:read-only { background-color: #F0F0F0; }

3. 滚动条(QScrollBar)

属性名作用示例
handle子控件滚动条滑块:QScrollBar::handle { background-color: #CCCCCC; }
handle:hover滑块悬浮:QScrollBar::handle:hover { background-color: #AAAAAA; }
add-line/sub-line增减按钮:QScrollBar::add-line { background-color: #F0F0F0; }

4. 进度条(QProgressBar)

属性名作用示例
text-align进度文本对齐:QProgressBar { text-align: center; }
text进度文本格式:QProgressBar { text: "%p%"; }(%p表示百分比)
chunk子控件进度块:QProgressBar::chunk { background-color: #007AFF; }

5. 标签页(QTabWidget)

属性名作用示例
tab-bar子控件标签栏:QTabWidget::tab-bar { alignment: center; }(标签居中)
tab子控件标签项:QTabWidget::tab { padding: 5px 10px; }(标签内边距)
tab:selected选中标签:QTabWidget::tab:selected { background-color: white; }

四、伪状态(控制交互样式)

所有控件支持的伪状态(用于区分不同状态的样式):

伪状态名作用
:hover鼠标悬浮时
:pressed鼠标按下时
:focus控件获得焦点时
:disabled控件禁用时
:enabled控件启用时(默认)
:checked单选/复选/按钮组选中时
:unchecked未选中时
:active控件处于活动状态时

五、子控件(针对复合控件的内部元素)

部分复合控件支持通过::子控件名设置内部元素样式,常用子控件:

控件名子控件名作用示例
QScrollBar::handle/::add-line滑块/增加按钮
QProgressBar::chunk进度块
QTabWidget::tab-bar/::tab标签栏/标签项
QComboBox::drop-down下拉箭头按钮:QComboBox::drop-down { border-left: 1px solid #CCCCCC; }
QSpinBox::up-button/::down-button上下调节按钮

总结

QSS属性的核心逻辑和CSS一致,但增加了Qt专属的伪状态、子控件,以适配复杂的桌面控件。实际使用时,可通过「通用属性+伪状态+子控件」组合,实现精细的样式控制。

常用控件的QSS样式模板
你需要的PySide6常用控件QSS样式模板已整理完成,覆盖开发中高频使用的10类控件,模板可直接复制使用,也可根据需求调整颜色、尺寸等参数,兼顾美观性和实用性。

一、通用基础样式(全局复用)

/* 全局通用样式:统一字体、消除默认边距 */
* {
    font-family: "微软雅黑", "SimHei", Arial, sans-serif;
    font-size: 14px;
    margin: 0px;
    padding: 0px;
}

/* 窗口基础样式(QMainWindow/QWidget) */
QWidget {
    background-color: #F5F7FA;  /* 浅灰蓝背景,护眼 */
    color: #333333;             /* 主文本色 */
}

二、按钮类控件(QPushButton/QToolButton)

/* 普通按钮默认样式 */
QPushButton {
    background-color: #409EFF;  /* 蓝色主色调 */
    color: white;
    border: none;
    border-radius: 4px;         /* 圆角 */
    padding: 6px 12px;          /* 内边距,保证点击区域 */
}

/* 按钮悬浮状态 */
QPushButton:hover {
    background-color: #66B1FF;  /* 浅蓝 hover 效果 */
}

/* 按钮按下状态 */
QPushButton:pressed {
    background-color: #337ECC;  /* 深蓝 pressed 效果 */
}

/* 禁用按钮 */
QPushButton:disabled {
    background-color: #C0C4CC;
    color: #909399;
}

/* 工具按钮(QToolButton)- 适配工具栏 */
QToolButton {
    background-color: transparent;  /* 透明背景 */
    border: none;
    padding: 4px;
}
QToolButton:hover {
    background-color: #E5E9F2;
    border-radius: 4px;
}
QToolButton:pressed {
    background-color: #D0D7E8;
}

三、输入类控件(QLineEdit/QTextEdit/QPlainTextEdit)

/* 单行输入框 */
QLineEdit {
    background-color: white;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    padding: 6px 8px;
    selection-background-color: #409EFF;  /* 选中文本背景色 */
    selection-color: white;               /* 选中文本颜色 */
}
/* 输入框获焦 */
QLineEdit:focus {
    border-color: #409EFF;  /* 蓝色焦边框 */
    outline: none;          /* 消除默认外边框 */
}
/* 只读输入框 */
QLineEdit:read-only {
    background-color: #F5F7FA;
    color: #909399;
}
/* 占位符文本颜色 */
QLineEdit {
    placeholder-text-color: #C0C4CC;
}

/* 多行文本框(QTextEdit/QPlainTextEdit) */
QTextEdit, QPlainTextEdit {
    background-color: white;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    padding: 8px;
    selection-background-color: #409EFF;
    selection-color: white;
}
QTextEdit:focus, QPlainTextEdit:focus {
    border-color: #409EFF;
    outline: none;
}

四、选择类控件(QComboBox/QRadioButton/QCheckBox)

/* 下拉选择框 */
QComboBox {
    background-color: white;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    padding: 6px 8px;
}
/* 下拉箭头按钮 */
QComboBox::drop-down {
    border: none;
    width: 20px;
}
QComboBox::down-arrow {
    image: url(:/icons/arrow_down.png);  /* 自定义下拉箭头(替换为自己的图标路径) */
    width: 10px;
    height: 10px;
}
QComboBox:focus {
    border-color: #409EFF;
    outline: none;
}

/* 单选按钮 */
QRadioButton {
    spacing: 6px;  /* 按钮与文本间距 */
}
QRadioButton::indicator {
    width: 16px;
    height: 16px;
    border: 1px solid #DCDFE6;
    border-radius: 8px;  /* 圆形 */
    background-color: white;
}
QRadioButton::indicator:checked {
    background-color: #409EFF;
    border-color: #409EFF;
}

/* 复选框 */
QCheckBox {
    spacing: 6px;
}
QCheckBox::indicator {
    width: 16px;
    height: 16px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    background-color: white;
}
QCheckBox::indicator:checked {
    image: url(:/icons/check.png);  /* 勾选图标(替换为自己的路径) */
    background-color: #409EFF;
    border-color: #409EFF;
}

五、进度条(QProgressBar)

QProgressBar {
    height: 8px;
    border-radius: 4px;
    background-color: #E5E9F2;
    text-align: center;  /* 进度文本居中 */
    color: #666666;
}
/* 进度块样式 */
QProgressBar::chunk {
    background-color: #409EFF;
    border-radius: 4px;
}
/* 进度条(成功状态)- 绿色 */
QProgressBar#successBar {
    background-color: #F0F9EA;
}
QProgressBar#successBar::chunk {
    background-color: #67C23A;
}
/* 进度条(失败状态)- 红色 */
QProgressBar#errorBar {
    background-color: #FEF0F0;
}
QProgressBar#errorBar::chunk {
    background-color: #F56C6C;
}

六、标签页(QTabWidget)

QTabWidget::tab-bar {
    alignment: left;  /* 标签左对齐 */
}
/* 标签项默认样式 */
QTabBar::tab {
    background-color: #E5E9F2;
    color: #666666;
    padding: 8px 16px;
    margin-right: 2px;  /* 标签间间距 */
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
/* 选中标签 */
QTabBar::tab:selected {
    background-color: white;
    color: #409EFF;
    font-weight: bold;
}
/* 标签悬浮 */
QTabBar::tab:hover:!selected {
    background-color: #D0D7E8;
}
/* 标签页内容区域 */
QTabWidget::pane {
    border: 1px solid #E5E9F2;
    background-color: white;
    border-radius: 0px 6px 6px 6px;
    padding: 8px;
}

七、列表/表格控件(QListWidget/QTableWidget)

/* 列表控件 */
QListWidget {
    background-color: white;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    outline: none;
}
/* 列表项 */
QListWidget::item {
    padding: 6px 8px;
}
/* 列表项悬浮 */
QListWidget::item:hover {
    background-color: #E5E9F2;
}
/* 列表项选中 */
QListWidget::item:selected {
    background-color: #409EFF;
    color: white;
}

/* 表格控件 */
QTableWidget {
    background-color: white;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    gridline-color: #E5E9F2;  /* 表格网格线颜色 */
    outline: none;
}
/* 表格表头 */
QHeaderView::section {
    background-color: #F5F7FA;
    border: none;
    border-bottom: 1px solid #E5E9F2;
    padding: 6px;
    text-align: center;
}
/* 表格单元格 */
QTableWidget::item {
    padding: 4px;
}
QTableWidget::item:selected {
    background-color: #409EFF;
    color: white;
}

八、滚动条(QScrollBar)

/* 垂直滚动条 */
QScrollBar:vertical {
    width: 8px;
    background-color: transparent;
}
/* 滚动条滑块 */
QScrollBar::handle:vertical {
    background-color: #C0C4CC;
    border-radius: 4px;
    min-height: 20px;  /* 滑块最小高度 */
}
QScrollBar::handle:vertical:hover {
    background-color: #909399;
}
/* 滚动条上下按钮(隐藏) */
QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {
    height: 0px;
}
/* 水平滚动条 */
QScrollBar:horizontal {
    height: 8px;
    background-color: transparent;
}
QScrollBar::handle:horizontal {
    background-color: #C0C4CC;
    border-radius: 4px;
    min-width: 20px;
}
QScrollBar::handle:horizontal:hover {
    background-color: #909399;
}
QScrollBar::add-line:horizontal, QScrollBar::sub-line:horizontal {
    width: 0px;
}

九、对话框(QDialog)

QDialog {
    background-color: white;
    border-radius: 8px;  /* 对话框圆角 */
}
/* 对话框标题栏(自定义标题栏时用) */
QLabel#titleLabel {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
}
/* 对话框关闭按钮 */
QPushButton#closeBtn {
    background-color: transparent;
    color: #909399;
    font-size: 16px;
    border: none;
}
QPushButton#closeBtn:hover {
    color: #F56C6C;
}

十、使用方法示例(Python代码)

import sys
from PySide6.QtWidgets import QApplication, QMainWindow, QPushButton, QVBoxLayout, QWidget

class QssDemo(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS样式模板示例")
        self.setGeometry(100, 100, 400, 300)

        # 1. 加载QSS样式
        with open("style.qss", "r", encoding="utf-8") as f:  # 将上述样式保存为style.qss
            qss_style = f.read()
        self.setStyleSheet(qss_style)

        # 2. 创建控件(自动应用样式)
        central_widget = QWidget()
        layout = QVBoxLayout(central_widget)
        
        btn1 = QPushButton("普通按钮")
        btn2 = QPushButton("禁用按钮")
        btn2.setDisabled(True)
        
        layout.addWidget(btn1)
        layout.addWidget(btn2)
        self.setCentralWidget(central_widget)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = QssDemo()
    window.show()
    sys.exit(app.exec())

总结

  1. 模板特点:所有样式遵循「扁平化设计」,颜色统一(主色调#409EFF,中性色#F5F7FA等),适配大多数桌面应用场景;
  2. 灵活调整:可修改颜色值(如将#409EFF替换为项目主色调)、圆角、内边距等参数,适配个性化需求;
  3. 命名控件:通过#控件名(如QProgressBar#successBar)可为特定控件设置专属样式,不影响同类型其他控件;
  4. 图标替换:模板中涉及图标的位置(如下拉箭头、勾选图标),需替换为自己的图标路径(支持本地路径/资源文件)。

到此这篇关于PySide6中QSS(Qt Style Sheet,类似CSS)支持的属性的文章就介绍到这了,更多相关PySide6 QSS内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Python IndexError报错分析及解决方法

    Python IndexError报错分析及解决方法

    在Python编程中,IndexError是一种常见的异常类型,它通常发生在尝试访问序列(如列表、元组或字符串)中不存在的索引时,本文将深入分析IndexError的成因、表现形式,并提供相应的解决办法,同时附带详细的代码示例,需要的朋友可以参考下
    2024-07-07
  • Python如何给函数库增加日志功能

    Python如何给函数库增加日志功能

    这篇文章主要介绍了Python如何给函数库增加日志功能,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-08-08
  • Python:一行代码,导入Python所有库

    Python:一行代码,导入Python所有库

    在本篇内容里小编给大家分享如何用一行代码,导入Python所有库,有需要的朋友们可以学习下,希望能够给你带来帮助
    2021-10-10
  • Python logging日志模块 配置文件方式

    Python logging日志模块 配置文件方式

    这篇文章主要介绍了Python logging日志模块 配置文件方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • python 处理pdf加密文件的操作代码

    python 处理pdf加密文件的操作代码

    这篇文章主要介绍了python 处理pdf加密文件的操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • Python实现的求解最小公倍数算法示例

    Python实现的求解最小公倍数算法示例

    这篇文章主要介绍了Python实现的求解最小公倍数算法,涉及Python数值运算、判断等相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • Python修改列表值问题解决方案

    Python修改列表值问题解决方案

    这篇文章主要介绍了Python修改列表值问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • python去除所有html标签的方法

    python去除所有html标签的方法

    这篇文章主要介绍了python去除所有html标签的方法,涉及Python正则替换的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-05-05
  • Python+PyQt构建自动化定时任务执行工具详细代码示例

    Python+PyQt构建自动化定时任务执行工具详细代码示例

    在日常工作中,我们常常会用到需要周期性执行的任务,这篇文章主要介绍了Python+PyQt构建自动化定时任务执行工具的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-09-09
  • CentOS7上使用pyenv搭建Django环境

    CentOS7上使用pyenv搭建Django环境

    本文主要介绍了CentOS7上使用pyenv搭建Django环境,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论