PySide6中QSS（Qt Style Sheet，類似CSS）支持的屬性

更新時(shí)間：2026年01月22日 09:01:14 作者：Wiktok

本文總結(jié)了PySide6中QSS（Qt樣式表）支持的常用屬性,分為通用屬性和控件專屬屬性兩大類,下面就來詳細(xì)的介紹如何使用,感興趣的可以了解一下

一、通用屬性（所有控件支持）

屬性名	作用示例
background-color	設(shè)置背景色：background-color: #F5F5F5;
background-image	設(shè)置背景圖：background-image: url("bg.png");（支持本地/資源文件）
background-repeat	背景圖重復(fù)方式：background-repeat: no-repeat;（不重復(fù)）
background-position	背景圖位置：background-position: center;（居中）
color	設(shè)置文本顏色：color: #333333;
font-family	字體：font-family: "微軟雅黑", "SimHei";
font-size	字號(hào)：font-size: 14px;
font-weight	字重：font-weight: bold;（加粗）/normal（常規(guī)）
font-style	字體樣式：font-style: italic;（斜體）
border	邊框簡(jiǎn)寫：border: 1px solid #CCCCCC;（寬度+樣式+顏色）
border-width	邊框?qū)挾龋篵order-width: 2px;
border-style	邊框樣式：border-style: dashed;（虛線）/solid（實(shí)線）
border-color	邊框顏色：border-color: #FF0000;
border-radius	邊框圓角：border-radius: 4px;（圓角半徑）
padding	內(nèi)邊距（控件內(nèi)容與邊框的距離）：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（顯示）

二、布局相關(guān)屬性

屬性名	作用示例
alignment	子控件對(duì)齊方式（僅布局/容器）：alignment: center;
spacing	布局內(nèi)控件間距（僅布局）：spacing: 10px;

三、控件專屬屬性（常用控件）

1. 按鈕類（QPushButton/QToolButton等）

屬性名	作用示例
icon	按鈕圖標(biāo)：icon: url("btn_icon.png");
icon-size	圖標(biāo)大小：icon-size: 20px 20px;（寬×高）
pressed偽狀態(tài)	按下時(shí)樣式：QPushButton:pressed { background-color: #E0E0E0; }
hover偽狀態(tài)	懸浮時(shí)樣式：QPushButton:hover { border-color: #007AFF; }
checked偽狀態(tài)	選中時(shí)樣式（單選/復(fù)選）：QRadioButton:checked { color: #FF0000; }

2. 輸入類（QLineEdit/QTextEdit等）

屬性名	作用示例
placeholder-text	占位符文本：QLineEdit { placeholder-text: "請(qǐng)輸入用戶名"; }（Qt 5.10+）
selection-background-color	選中文本背景色：QLineEdit { selection-background-color: #007AFF; }
selection-color	選中文本顏色：QLineEdit { selection-color: white; }
read-only偽狀態(tài)	只讀時(shí)樣式：QLineEdit:read-only { background-color: #F0F0F0; }

3. 滾動(dòng)條（QScrollBar）

屬性名	作用示例
handle子控件	滾動(dòng)條滑塊：QScrollBar::handle { background-color: #CCCCCC; }
handle:hover	滑塊懸浮：QScrollBar::handle:hover { background-color: #AAAAAA; }
add-line/sub-line	增減按鈕：QScrollBar::add-line { background-color: #F0F0F0; }

4. 進(jìn)度條（QProgressBar）

屬性名	作用示例
text-align	進(jìn)度文本對(duì)齊：QProgressBar { text-align: center; }
text	進(jìn)度文本格式：QProgressBar { text: "%p%"; }（%p表示百分比）
chunk子控件	進(jìn)度塊：QProgressBar::chunk { background-color: #007AFF; }

5. 標(biāo)簽頁（QTabWidget）

屬性名	作用示例
tab-bar子控件	標(biāo)簽欄：QTabWidget::tab-bar { alignment: center; }（標(biāo)簽居中）
tab子控件	標(biāo)簽項(xiàng)：QTabWidget::tab { padding: 5px 10px; }（標(biāo)簽內(nèi)邊距）
tab:selected	選中標(biāo)簽：QTabWidget::tab:selected { background-color: white; }

四、偽狀態(tài)（控制交互樣式）

所有控件支持的偽狀態(tài)（用于區(qū)分不同狀態(tài)的樣式）：

偽狀態(tài)名	作用
:hover	鼠標(biāo)懸浮時(shí)
:pressed	鼠標(biāo)按下時(shí)
:focus	控件獲得焦點(diǎn)時(shí)
:disabled	控件禁用時(shí)
:enabled	控件啟用時(shí)（默認(rèn)）
:checked	單選/復(fù)選/按鈕組選中時(shí)
:unchecked	未選中時(shí)
:active	控件處于活動(dòng)狀態(tài)時(shí)

五、子控件（針對(duì)復(fù)合控件的內(nèi)部元素）

部分復(fù)合控件支持通過::子控件名設(shè)置內(nèi)部元素樣式，常用子控件：

控件名	子控件名	作用示例
QScrollBar	::handle/::add-line	滑塊/增加按鈕
QProgressBar	::chunk	進(jìn)度塊
QTabWidget	::tab-bar/::tab	標(biāo)簽欄/標(biāo)簽項(xiàng)
QComboBox	::drop-down	下拉箭頭按鈕：QComboBox::drop-down { border-left: 1px solid #CCCCCC; }
QSpinBox	::up-button/::down-button	上下調(diào)節(jié)按鈕

總結(jié)

QSS屬性的核心邏輯和CSS一致，但增加了Qt專屬的偽狀態(tài)、子控件，以適配復(fù)雜的桌面控件。實(shí)際使用時(shí)，可通過「通用屬性+偽狀態(tài)+子控件」組合，實(shí)現(xiàn)精細(xì)的樣式控制。

常用控件的QSS樣式模板
你需要的PySide6常用控件QSS樣式模板已整理完成，覆蓋開發(fā)中高頻使用的10類控件，模板可直接復(fù)制使用，也可根據(jù)需求調(diào)整顏色、尺寸等參數(shù)，兼顧美觀性和實(shí)用性。

一、通用基礎(chǔ)樣式（全局復(fù)用）

/* 全局通用樣式：統(tǒng)一字體、消除默認(rèn)邊距 */
* {
    font-family: "微軟雅黑", "SimHei", Arial, sans-serif;
    font-size: 14px;
    margin: 0px;
    padding: 0px;
}

/* 窗口基礎(chǔ)樣式（QMainWindow/QWidget） */
QWidget {
    background-color: #F5F7FA;  /* 淺灰藍(lán)背景，護(hù)眼 */
    color: #333333;             /* 主文本色 */
}

二、按鈕類控件（QPushButton/QToolButton）

/* 普通按鈕默認(rèn)樣式 */
QPushButton {
    background-color: #409EFF;  /* 藍(lán)色主色調(diào) */
    color: white;
    border: none;
    border-radius: 4px;         /* 圓角 */
    padding: 6px 12px;          /* 內(nèi)邊距，保證點(diǎn)擊區(qū)域 */
}

/* 按鈕懸浮狀態(tài) */
QPushButton:hover {
    background-color: #66B1FF;  /* 淺藍(lán) hover 效果 */
}

/* 按鈕按下狀態(tài) */
QPushButton:pressed {
    background-color: #337ECC;  /* 深藍(lán) 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;  /* 藍(lán)色焦邊框 */
    outline: none;          /* 消除默認(rèn)外邊框 */
}
/* 只讀輸入框 */
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);  /* 自定義下拉箭頭（替換為自己的圖標(biāo)路徑） */
    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;
}

/* 復(fù)選框 */
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);  /* 勾選圖標(biāo)（替換為自己的路徑） */
    background-color: #409EFF;
    border-color: #409EFF;
}

五、進(jìn)度條（QProgressBar）

QProgressBar {
    height: 8px;
    border-radius: 4px;
    background-color: #E5E9F2;
    text-align: center;  /* 進(jìn)度文本居中 */
    color: #666666;
}
/* 進(jìn)度塊樣式 */
QProgressBar::chunk {
    background-color: #409EFF;
    border-radius: 4px;
}
/* 進(jìn)度條（成功狀態(tài)）- 綠色 */
QProgressBar#successBar {
    background-color: #F0F9EA;
}
QProgressBar#successBar::chunk {
    background-color: #67C23A;
}
/* 進(jìn)度條（失敗狀態(tài)）- 紅色 */
QProgressBar#errorBar {
    background-color: #FEF0F0;
}
QProgressBar#errorBar::chunk {
    background-color: #F56C6C;
}

六、標(biāo)簽頁（QTabWidget）

QTabWidget::tab-bar {
    alignment: left;  /* 標(biāo)簽左對(duì)齊 */
}
/* 標(biāo)簽項(xiàng)默認(rèn)樣式 */
QTabBar::tab {
    background-color: #E5E9F2;
    color: #666666;
    padding: 8px 16px;
    margin-right: 2px;  /* 標(biāo)簽間間距 */
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
/* 選中標(biāo)簽 */
QTabBar::tab:selected {
    background-color: white;
    color: #409EFF;
    font-weight: bold;
}
/* 標(biāo)簽懸浮 */
QTabBar::tab:hover:!selected {
    background-color: #D0D7E8;
}
/* 標(biāo)簽頁內(nèi)容區(qū)域 */
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;
}
/* 列表項(xiàng) */
QListWidget::item {
    padding: 6px 8px;
}
/* 列表項(xiàng)懸浮 */
QListWidget::item:hover {
    background-color: #E5E9F2;
}
/* 列表項(xiàng)選中 */
QListWidget::item:selected {
    background-color: #409EFF;
    color: white;
}

/* 表格控件 */
QTableWidget {
    background-color: white;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    gridline-color: #E5E9F2;  /* 表格網(wǎng)格線顏色 */
    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;
}

八、滾動(dòng)條（QScrollBar）

/* 垂直滾動(dòng)條 */
QScrollBar:vertical {
    width: 8px;
    background-color: transparent;
}
/* 滾動(dòng)條滑塊 */
QScrollBar::handle:vertical {
    background-color: #C0C4CC;
    border-radius: 4px;
    min-height: 20px;  /* 滑塊最小高度 */
}
QScrollBar::handle:vertical:hover {
    background-color: #909399;
}
/* 滾動(dòng)條上下按鈕（隱藏） */
QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {
    height: 0px;
}
/* 水平滾動(dòng)條 */
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;
}

九、對(duì)話框（QDialog）

QDialog {
    background-color: white;
    border-radius: 8px;  /* 對(duì)話框圓角 */
}
/* 對(duì)話框標(biāo)題欄（自定義標(biāo)題欄時(shí)用） */
QLabel#titleLabel {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
}
/* 對(duì)話框關(guān)閉按鈕 */
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. 創(chuàng)建控件（自動(dòng)應(yīng)用樣式）
        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())

總結(jié)

模板特點(diǎn)：所有樣式遵循「扁平化設(shè)計(jì)」，顏色統(tǒng)一（主色調(diào)#409EFF，中性色#F5F7FA等），適配大多數(shù)桌面應(yīng)用場(chǎng)景；
靈活調(diào)整：可修改顏色值（如將#409EFF替換為項(xiàng)目主色調(diào)）、圓角、內(nèi)邊距等參數(shù)，適配個(gè)性化需求；
命名控件：通過#控件名（如QProgressBar#successBar）可為特定控件設(shè)置專屬樣式，不影響同類型其他控件；
圖標(biāo)替換：模板中涉及圖標(biāo)的位置（如下拉箭頭、勾選圖標(biāo)），需替換為自己的圖標(biāo)路徑（支持本地路徑/資源文件）。

到此這篇關(guān)于PySide6中QSS（Qt Style Sheet，類似CSS）支持的屬性的文章就介紹到這了,更多相關(guān)PySide6 QSS內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

PySide6
QSS

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

PySide6中QSS（Qt Style Sheet，類似CSS）支持的屬性

目錄

一、通用屬性（所有控件支持）

二、布局相關(guān)屬性

三、控件專屬屬性（常用控件）

1. 按鈕類（QPushButton/QToolButton等）

2. 輸入類（QLineEdit/QTextEdit等）

3. 滾動(dòng)條（QScrollBar）

4. 進(jìn)度條（QProgressBar）

5. 標(biāo)簽頁（QTabWidget）

四、偽狀態(tài)（控制交互樣式）

五、子控件（針對(duì)復(fù)合控件的內(nèi)部元素）

總結(jié)

一、通用基礎(chǔ)樣式（全局復(fù)用）

二、按鈕類控件（QPushButton/QToolButton）

三、輸入類控件（QLineEdit/QTextEdit/QPlainTextEdit）

四、選擇類控件（QComboBox/QRadioButton/QCheckBox）

五、進(jìn)度條（QProgressBar）

六、標(biāo)簽頁（QTabWidget）

七、列表/表格控件（QListWidget/QTableWidget）

八、滾動(dòng)條（QScrollBar）

九、對(duì)話框（QDialog）

十、使用方法示例（Python代碼）

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

PySide6中QSS（Qt Style Sheet，類似CSS）支持的屬性

目錄

一、通用屬性（所有控件支持）

二、布局相關(guān)屬性

三、控件專屬屬性（常用控件）

1. 按鈕類（QPushButton/QToolButton等）

2. 輸入類（QLineEdit/QTextEdit等）

3. 滾動(dòng)條（QScrollBar）

4. 進(jìn)度條（QProgressBar）

5. 標(biāo)簽頁（QTabWidget）

四、偽狀態(tài)（控制交互樣式）

五、子控件（針對(duì)復(fù)合控件的內(nèi)部元素）

總結(jié)

一、通用基礎(chǔ)樣式（全局復(fù)用）

二、按鈕類控件（QPushButton/QToolButton）

三、輸入類控件（QLineEdit/QTextEdit/QPlainTextEdit）

四、選擇類控件（QComboBox/QRadioButton/QCheckBox）

五、進(jìn)度條（QProgressBar）

六、標(biāo)簽頁（QTabWidget）

七、列表/表格控件（QListWidget/QTableWidget）

八、滾動(dòng)條（QScrollBar）

九、對(duì)話框（QDialog）

十、使用方法示例（Python代碼）

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

PySide6中QSS（Qt Style Sheet，類似CSS）支持的屬性

一、通用屬性（所有控件支持）

三、控件專屬屬性（常用控件）

四、偽狀態(tài)（控制交互樣式）

五、子控件（針對(duì)復(fù)合控件的內(nèi)部元素）

一、通用基礎(chǔ)樣式（全局復(fù)用）

二、按鈕類控件（QPushButton/QToolButton）

三、輸入類控件（QLineEdit/QTextEdit/QPlainTextEdit）

六、標(biāo)簽頁（QTabWidget）

七、列表/表格控件（QListWidget/QTableWidget）

九、對(duì)話框（QDialog）