Qt QSS常用样式总结

最新推荐文章于 2024-10-01 21:24:30 发布
最新推荐文章于 2024-10-01 21:24:30 发布
阅读量1w 收藏 180
点赞数 41
分类专栏： qt qss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33559992/article/details/85331081
版权
qt 同时被 2 个专栏收录
29 篇文章 6 订阅
订阅专栏
qss
1 篇文章 0 订阅
订阅专栏

QTabWidget

在这里插入图片描述

/****************************************************************************
*			QTabWidget  	
*		描述：pane 指整个tab组件
*				   border-width 组件的外框宽度
*				   border-color 外框颜色  border-style外框风格   （比如outset就是凸出立体感）
*				   border-radius  外框的圆角像素			
****************************************************************************/
QTabWidget::pane {
        border: none;//无边框
        border-top: 3px solid rgb(0, 160, 230);//边款顶部：3px   实线   颜色(0,160,230)
        background: transparent;//背景透明
}
QTabWidget::tab-bar {//tab-bar  
        border: none;	//
}
QTabBar::tab {
        border: none;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        color: rgb(0, 0, 0);
        background: rgb(255, 255, 255, 30);
        height: 28px;
        min-width: 85px;
        margin-right: 5px;
        padding-left: 5px;
        padding-right: 5px;
}
QTabBar::tab:hover {
   background: rgb(0, 0, 255, 40);
}
QTabBar::tab:selected {
        color: white;
        background: rgb(0, 160, 230);
}

QSlider

在这里插入图片描述

/****************************************************************************
*			QSlider  	
*		描述：滑动块样式
*			仿网易云样式
****************************************************************************/
/* 一定要先设置groove，不然handle的很多效果将没有*/
QSlider::groove:horizontal {
    border: none;
    height: 6px;
    border-radius: 3px;
    background: lightgray;
}
QSlider::handle:horizontal {
    border: none;
    margin: -5px 0px; /* 上下边距和左右边距*/
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #e83c3c;
    border-image: url(:/images/playPbHandle16_White.png);
}
/*划过部分*/
QSlider::sub-page:horizontal {
    background: #e83c3c;
    height: 4px;
    border-radius: 3px;
}
/*未划过部分*/
QSlider::add-page:horizontal {
    background: lightgray;
    height: 4px;
    border-radius: 3px;
}

在这里插入图片描述

/****************************************************************************
*			QSlider  	
*		描述：滑动块样式
*				horizontal --> 水平滑动槽
****************************************************************************/
QSlider::groove:horizontal {  
	border: 1px solid #bbb;  
	background: white;  
	height: 10px;  
	border-radius: 4px;  
}  
  
QSlider::sub-page:horizontal {  
	background: qlineargradient(x1: 0, y1: 0,    x2: 0, y2: 1,  stop: 0 #66e, stop: 1 #bbf);  
	background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,  stop: 0 #bbf, stop: 1 #55f);  
	border: 1px solid #777;  
	height: 10px;  
	border-radius: 4px;  
}  
  
QSlider::add-page:horizontal {  
	background: #fff;  
	border: 1px solid #777;  
	height: 10px;  
	border-radius: 4px;  
}  
  
QSlider::handle:horizontal {  
	background: qlineargradient(x1:0, y1:0, x2:1, y2:1,  stop:0 #eee, stop:1 #ccc);  
	border: 1px solid #777;  
	width: 13px;  
	margin-top: -2px;  
	margin-bottom: -2px;  
	border-radius: 4px;  
}  
  
QSlider::handle:horizontal:hover {  
	background: qlineargradient(x1:0, y1:0, x2:1, y2:1,  stop:0 #fff, stop:1 #ddd);  
	border: 1px solid #444;  
	border-radius: 4px;  
}  
  
QSlider::sub-page:horizontal:disabled {  
	background: #bbb;  
	border-color: #999;  
}  
  
QSlider::add-page:horizontal:disabled {  
	background: #eee;  
	border-color: #999;  
}  
  
QSlider::handle:horizontal:disabled {  
	background: #eee;  
	border: 1px solid #aaa;  
	border-radius: 4px;  
}

QTableView

在这里插入图片描述

/*QTableView 左上角样式*/
QTableView QTableCornerButton::section {
    color: white;/*文字颜色*/
    background-color: rgb(41, 139, 201);/*背景色*/
    border: 5px solid #418bc9;/*边框*/
    border-radius:0px;/*边框圆角*/
    border-color: rgb(41, 139, 201);/*边框颜色*/
    font: 10px;/*字体大小*/
    padding:0px 0 0 0px;/*内边距*/
 }

 QTableView {
	background:transparent;/*背景透明*/
    /*color: white;                                       /*表格内文字颜色*/
   /* gridline-color: black;                              /*表格内框颜色*/
    /*background-color: rgb(108, 108, 108);               /*表格内背景色*//*
    /*alternate-background-color: rgb(64, 64, 64);
    /*selection-color: white;                             /*选中区域的文字颜色*/
   /* selection-background-color: rgb(77, 77, 77);        /*选中区域的背景色*/
   /* border: 2px groove gray;
    /*border-radius: 0px;
    /*padding: 2px 4px;*/
}

QHeaderView {
    color: white;
    font: bold 10pt;
    background-color: rgb(41, 139, 201);
    border: 0px solid rgb(144, 144, 144);
    border:0px solid rgb(191,191,191);
    border-left-color: rgba(255, 255, 255, 0);
    border-top-color: rgba(255, 255, 255, 0);
    border-radius:0px;
    min-height:29px;
}

QHeaderView::section {
    color: white;
    background-color:rgb(41, 139, 201);
    border: 5px solid #f6f7fa;
    border-radius:0px;
    border-color:rgb(41, 139, 201);
}

QListWidget / QListView

在这里插入图片描述

/************* 左侧管理工具栏 ***************/
QWidget#mangeWidget, #listItemWidget, #musicMangeScrollAreaWidget {
    background-color: #f5f5f7;
}
QListWidget#musicMangeListWidget {
    border: none;
    outline: none;
    background-color: #f5f5f7;
}
QListWidget#musicMangeListWidget::item {
    background-color: #f5f5f7;
    border: solid
}
QListWidget#musicMangeListWidget::item:hover {
    background-color: #f5f5f7;
}
QListWidget#musicMangeListWidget::item:selected {
    background-color: #e6e7ea;
    border-left-width: 4px;
    border-left-color: #c62f2f;
}
QLabel#boxTitleLabel, #toolboxNameLabel {
    color: #696969;
    font-family: "Microsoft Yahei";
    font-size: 9pt;
    background-color: #f5f5f7;
}
QScrollArea#musicMangeScrollArea {
    border: 0px solid;
    border-right-width: 1px;
    border-right-color: #dcdbdc;
    background-color: #f5f5f7;
}
QScrollBar:vertical {
    border: none;
    background: #f5f5f7;
    width: 10px;
    margin: 0px 0 0px 0;
}
QScrollBar::handle:vertical {
    background: Gainsboro;
    min-height: 20px;
    border-radius: 5px;
    border: none;
}
QScrollBar::add-line:vertical {
    border: 0px solid grey;
    background: #32CC99;
    height: 0px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
    border: 0px solid grey;
    background: #32CC99;
    height: 0px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
    width: 0px;
    height: 0px;
}
QPushButton#playListTitleButton, #openListButton,
        #createPLayListButton {
    border: none;
}
QPushButton#playListTitleButton {
    text-align : left;
    color: #696969;
    font-family: "Microsoft Yahei";
    font-size: 9pt;
    background-color: #f5f5f7;
}

QPushButton

在这里插入图片描述

红色悬停样式表1
/* Red Button */
QPushButton#RedButton {
    border-radius: 8px;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    background-color: white;
    color: black;
    border: 2px solid #f44336;
}

QPushButton#RedButton:hover {
    background-color: #f44336;
    color: white;
}

QPushButton#RedButton:pressed {
    background-color: #06AD56;
}

红色悬停样式表2
/* Red Button 2 */
QPushButton#RedButton2 {
    background-color: #f44336;
    border-radius: 8px;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    color: white;
}

QPushButton#RedButton2:hover {
    background-color: white;
    border: 2px solid #f44336;
    color: black
}

QPushButton#RedButton2:pressed {
    background-color: #06AD56;
}

QCheckBox

在这里插入图片描述

QCheckBox{
	color:#414347;
}
QCheckBox::indicator {
	width:16px;
	height:16px;
	border:1px solid #000000;
}
QCheckBox::indicator:disabled {
	width:16px;
	height:16px;
	border:1px solid #808080;
}
QCheckBox::indicator:checked {
	image:url(:/image/unchecked.png);
}

QCheckBox::indicator:checked:disabled{
	image:url(:/image/unchecked-dis.png);
}

QProgressbar

在这里插入图片描述

QProgressBar{
	font:9pt;
	border-radius:5px;
	text-align:center;
	border:1px solid #E8EDF2;
	background-color: rgb(255, 255, 255);
	border-color: rgb(180, 180, 180);
}
QProgressBar:chunk{
	border-radius:5px;
	background-color:#1ABC9C;
}
暖暖的纠结
关注
专栏目录
【AIOT】QT样式QSS
liudongdong_jlu
12-16 792
使用桌面的PyQt或者web的flaskweb方便快捷的部署搭建可视化AI应用演示Demo，这里记录使用PyQt搭建基于Mediapipe和MixMLP网络的识别控制系统QSS样式代码。样式表使用方式：在Qt Designer设计窗体时，直接用样式表编辑器为窗体或窗体上的某个部件设计样式表，对应用程序是固定的，无法取得换肤的效果，而且需要为每个窗体都涉及样式表，重复性工作太大；。，为了实现动态切换样式表，一般将样式定义保存为.qss后缀的纯文本文件，然后再程序中打开文件,读取文件内容，再调用。
Qt 常用 Qss 样式
云胡
09-10 1410
概述 Qss 样式 { border-style: solid; // 边框样式 border-width: 1px; // 边框宽度 border-radius: 5px; // 圆角边框 color: rgb(0,0,0); // 白色 padding: 2px; // 内边距 font: 20px; // 字体大小 background-color: rgb(255,255,255); // 背景颜色 } ...
QSS技术（三）—— Qt样式表（QSS）控件样式大全
J^T的博客
08-26 1284
是一个常用的按钮控件，常见的样式设置包括背景颜色、边框、字体、悬停和按下状态等。是一个单行文本输入控件，样式设置包括边框、背景颜色、文字颜色和光标样式等。是一个多行文本编辑控件，样式设置包括边框、背景颜色、文字颜色和滚动条等。是一个复选框控件，样式设置包括复选框指示器的样式、背景颜色和字体等。是一个单选框控件，样式设置包括单选框指示器的样式、背景颜色和字体等。是一个滑块控件，样式设置包括滑块的轨道、刻度和滑块本身的样式。是一个工具按钮控件，样式设置包括按钮的图标、背景颜色和边框等。
Qt界面优化——QSS
最新发布
Dirty_artist的博客
10-01 1001
QSS使用：选择器用法、子控件选择器、伪类选择器、盒子模型、控件样式示例
Qt的qss常用样式总结
wangshuping18的博客
02-08 5904
Qt常用的qss样式，方便快速设置界面风格
关于QSS 看这一篇就够了！
热门推荐
HelloKandy's Blog
03-16 1万+
1、QSS介绍 自定百度。 2、QSS常用属性大全 Qss背景属性(Background) background 在一个声明中设置所有的背景属性。 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 background-color 设置元素的背景颜色。 background-image 设置元素的背景图像。 background-position 设置背景图像的开始位置。 background-repeat 设置是否及如何重复背景图像。
Qt之QSS样式表
编程与实战的博客
04-10 1921
QSS（Qt Style Sheet）样式表是一种用于描述图形用户界面（GUI）样式的语言。它允许开发者为应用程序的控件定义视觉外观，例如颜色、字体、尺寸和布局等。QSS 样式表的主要目的是提供一种简洁而灵活的方式来美化应用程序的界面，使其具有一致的外观和风格。通过使用 QSS，开发者可以分离界面的样式和功能代码，从而更容易维护和定制界面的外观。QSS 样式表通常以.qss文件的形式保存，其中包含了一系列的样式规则。这些规则使用选择器来指定要应用样式的控件，以及对应的样式属性和值。
Qt 样式表之QSS
billy的博客
03-09 1万+
QSS 简介 QSS 全称为 Qt Style Sheets 也就是 Qt 样式表，它是 Qt 提供的一种用来自定义控件外观的机制。QSS 大量参考了 CSS 的内容，只不过 QSS 的功能比 CSS 要弱很多，体现在选择器要少，可以使用的 QSS 属性也要少很多，并且并不是所有的属性都可以用在 Qt 的所有控件上。 QSS 语法高亮 通过 “工具” -> “选项” 进入设置，通过 “text/css” 快速定位，然后在详情中添加 “*.qss” 即可实现 QSS 文件语法高亮，注意分隔符用 ‘;’
常用QSS样式收集
10-27
Qt样式QSS，常用QSS样式收集，网上收集而来。Qt样式QSS，常用QSS样式收集，网上收集而来。
qt -- 常用的qss样式总结
ccr的博客
12-06 6993
设置背景颜色 在构造函数里添加： setAutoFillBackground(true);//必须有这条语句 setPalette(QPalette(QColor(250,250,200)));
Qt开发中常用QSS样例
02-07
一些常用Qt空间的Qss样例，如： QLineEdit,QTextEdit {/*控件初始化的设置*/ border: 1px solid #32435E; border-radius: 5px; /*控件边框的弧度，数值越大，则弯曲得越厉害*/ /* padding: 0 8px; */ background...
QT的QSS样式总结
予非池物
02-27 494
QLineEdit{ background-color:rgb(51,51,51); border-radius: 7px; border:1px; border-style:outset;# 有边框 boeder-color:Gray } background-color: rgba(255, 0, 0, 0.5);# 最后一位透明度 圆角窗体（有锯齿） QWidget{ background-color:rgb(33,37,38); border-top-left-rad.
Web--Css样式大全
YuKuoYuan的博客
01-03 3970
一. 字体属性：(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位：PX、PD、EM 粗细 {font-weight: bol
Qt之样式QSS
qq_40110291的博客
05-07 684
//////////全局底图//////////////// QMainWindow#mainWindow { border-image:url(:你的背景图.png); } QMainWindow { border-image:url(:你的背景图.png); } ////////////QLabel///////////////// QLabel { ...
QT QSS样式表
断点
10-26 942
前言： 转载请附上连接,本帖原创请勿照抄。 QSS(Qt Style Sheets)是Qt的样式表,为Qt提供许多的属性、伪状态、子控件等机制来自定义控件的外观,与HTML中的CSS类似。 一、创建引入QSS文件 1.创建QRC、QSS文件 首先当然要创建QSS文件，创建 一个QWidget项目，右键项目->添加一个qrc资源文件。然后在这里添加一个QSS文件（自己新建一个记事本，修改成myQss.qss），添加到qrc资源文件中 2. myQss.qss代...
Qt QSS样式使用
weixin_36323170的博客
02-14 704
介绍        Qt Qwidget 中在进行GUI开发中经常需要对控件进行美化，此时就需要对控件的样式进行修改；常用以下三种方法； 在C++代码中通过函数setStyleSheet(); 在设计师中进行美化； 引入QSS文件进行美化； 当然，并不拘泥于其中一种方法，有时候会结合三种方法一起使用，但是一般推荐使用QSS文件，或者在设计师中进行美化，代...
Qt样式表-QSS
10-10
Qt样式的使用 qss
qss.zip--QT 非常漂亮实用的QSS界面设计，含代码例子和编辑器，有文档介绍使用方法。
02-26
4. **文档**：文档部分介绍了如何使用QSS，可能包括了QSS的基本语法、常用属性、以及如何在QT项目中集成QSS等内容。这对于初学者来说是极好的学习资料，能快速掌握QSS的使用方法。 5. **自定义样式**：QSS的一个...
Qss三种样式
07-21
有三种比较全的样式，并且都有图片对应。在readme.txt里面的代码复制到main.cpp中即可
qt qss主题样式
04-27
QUI皮肤生成器介绍： 1：极简设计，傻瓜式操作步骤:，只需简单几步即可设计出漂亮的皮肤。 2：所见即所得，想要什么好的皮肤，分分钟搞定。 3：自动生成样式中所需要的对应颜色的图片资源文件，比如单选框、复选框指示器图片。 4：集成自定义无边框标题栏样式、左边导航切换样式、顶部导航切换样式、设备面板样式。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值