PySide6中的QSS（Qt Style Sheet，类似CSS）支持的属性

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类控件，模板可直接复制使用，也可根据需求调整颜色、尺寸等参数，兼顾美观性和实用性。

一、通用基础样式（全局复用）

css 复制代码

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

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

二、按钮类控件（QPushButton/QToolButton）

css 复制代码

/* 普通按钮默认样式 */
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）

css 复制代码

/* 单行输入框 */
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）

css 复制代码

/* 下拉选择框 */
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）

css 复制代码

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）

css 复制代码

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）

css 复制代码

/* 列表控件 */
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）

css 复制代码

/* 垂直滚动条 */
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）

css 复制代码

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代码）

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())

总结

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