常用QSS记录

最新推荐文章于 2023-10-26 14:08:14 发布
最新推荐文章于 2023-10-26 14:08:14 发布
阅读量242 收藏 1
点赞数
分类专栏： Qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39308337/article/details/106782466
版权

总结

QTextEdit设置背景色透明无效

直接调用background:transparent;无效。需要添加border:none;

基本状态

状态使用 :（单冒号） 来区分每一个状态

  • hover 鼠标滑过时候的状态
  • pressed 鼠标按下状态

QSlider

//水平方向
QSlider::groove:horizontal {
border: 1px solid #4A708B;
background: #C0C0C0;
height: 5px;
border-radius: 1px;
padding-left:-1px;
padding-right:-1px;
}

QSlider::sub-page:horizontal {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, 
    stop:0 #B1B1B1, stop:1 #c4c4c4);
background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,
    stop: 0 #5DCCFF, stop: 1 #1874CD);
border: 1px solid #4A708B;
height: 10px;
border-radius: 2px;
}

QSlider::add-page:horizontal {
background: #575757;
border: 0px solid #777;
height: 10px;
border-radius: 2px;
}

QSlider::handle:horizontal 
{
    background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, 
    stop:0.6 #45ADED, stop:0.778409 rgba(255, 255, 255, 255));

    width: 11px;
    margin-top: -3px;
    margin-bottom: -3px;
    border-radius: 5px;
}

QSlider::handle:horizontal:hover {
    background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #2A8BDA, 
    stop:0.778409 rgba(255, 255, 255, 255));

    width: 11px;
    margin-top: -3px;
    margin-bottom: -3px;
    border-radius: 5px;
}

QSlider::sub-page:horizontal:disabled {
background: #00009C;
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;
}

QScrollBar

QScrollBar:vertical/*垂直滚动条整个区域*/
{
     padding:8px 0px 8px 0px;/*预留出的上下两个按钮的空间*/
    background-color:red;
    min-width:10px;
    max-width:10px;
}
QScrollBar::handle:vertical/*垂直滚动条 中间滑块*/
{
    min-width:10px;
    max-width:10px;
   background-color:yellow; 
 }
 QScrollBar::add-line:vertical/*滑块下方点击按钮*/
 {
     min-height:20px;
     max-height:20px;
        background-color:rgb(0,255,255); 
 }
  QScrollBar::sub-line:vertical/*滑块上方点击按钮*/
 {
     min-height:20px;
     max-height:20px;
        background-color:rgb(0,255,255); 
 }
  QScrollBar::add-page:vertical/*滑块下方按钮到滑块下方区域*/
 {
     min-height:20px;
     max-height:20px;
        background-color:rgb(0,255,0); 
 }
  QScrollBar::sub-page:vertical/*滑块上方按钮到滑块上方区域*/
 {
     min-height:20px;
     max-height:20px;
        background-color:rgb(0,255,255); 
 }
 //垂直方向
 QSlider::groove:vertical {
border: 1px solid #4A708B;
background: #C0C0C0;
width: 5px;
border-radius: 1px;
padding-left:-1px;
padding-right:-1px;
padding-top:-1px;
padding-bottom:-1px;
}

QSlider::sub-page:vertical {
background: #575757;
border: 1px solid #4A708B;
border-radius: 2px;
}

QSlider::add-page:vertical {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, 
    stop:0 #c4c4c4, stop:1 #B1B1B1);
background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,
    stop: 0 #5DCCFF, stop: 1 #1874CD);
border: 0px solid #777;
width: 10px;
border-radius: 2px;
}

QSlider::handle:vertical 
{
	background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #45ADED, 
<span>	</span>stop:0.778409 rgba(255, 255, 255, 255));

    height: 11px;
    margin-left: -3px;
    margin-right: -3px;
    border-radius: 5px;
}

QSlider::sub-page:vertical:disabled {
background: #00009C;
border-color: #999;
}

QSlider::add-page:vertical:disabled {
background: #eee;
border-color: #999;
}

QSlider::handle:vertical:disabled {
background: #eee;
border: 1px solid #aaa;
border-radius: 4px;
}

QCheckBox

QCheckBox::indicator   /*QCheckBox可勾选区域*/
{
	width:20px;
	height:16px;
}
QCheckBox::indicator:checked /*QCheckBox勾选*/
{
	border-image:url(image/selected.png);
}
QCheckBox::indicator:unchecked /*QCheckBox未勾选*/
{
	border-image:url(image/unSelect.png);
}
QCheckBox::indicator:indeterminate  /*QCheckBox半勾选*/
{
    background-color:red;
 }

QScrollBar:horizontal
{
     padding:0px 8px 0px 8px;
    background-color:red;
    min-height:10px;
    max-height:10px;
}
QScrollBar::handle:horizontal
{
    min-height:10px;
    max-height:10px;
   background-color:rgb(152,152,1); 
 }
 QScrollBar::add-line:horizontal
 {
     min-width:20px;
     max-width:20px;
        background-color:rgb(255,0,0); 
 }
 QScrollBar::sub-line:horizontal
 {
     min-width:20px;
     max-width:20px;
        background-color:rgb(255,0,0); 
 }
  QScrollBar::add-page:horizontal
 {
     min-height:20px;
     max-height:20px;
        background-color:rgb(0,255,0); 
 }
  QScrollBar::sub-page:horizontal
 {
     min-height:20px;
     max-height:20px;
        background-color:rgb(0,255,255); 
 }

QComboBox

QTableView

QTableView {
    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;
}

QCalendarWidget


QCalendarWidget QTableView
{
    color:#ffffff;    
   alternate-background-color:#3275d4;
    background-color:#3275d4;
}
QCalendarWidget QTableView
{
    selection-color: yellow;
    selection-background-color: rgb(77, 77, 77);

 }
 QToolButton#qt_calendar_nextmonth 
{
     background-color:red;
}
 QToolButton#qt_calendar_prevmonth
{
     background-color:red;
}

 QToolButton#qt_calendar_monthbutton
{
    background-color:yellow;
 }
  QToolButton#qt_calendar_yearbutton 
{
    background-color:rgb(0,255,255);
 }
 
QSpinBox#qt_calendar_yearedit
{
    background-color:#3275d4;
    color:yellow;
 } 
 
 QWidget#qt_calendar_navigationbar
 {
     color:yellow;
     background-color:yellow;
 }

QSpinBox

QSpinBox::up-button/*右侧上方点击按钮*/
{

}
QSpinBox::down-button/*右侧下方点击按钮*/
{

}
QSpinBox::up-arrow/*右侧上方点击按钮中的小三角区域*/
{

}
QSpinBox::down-arrow/*右侧下方点击按钮中的小三角区域*/
{

}

QTabWidget

QTabBar::tab  /*tab页的颜色*/
{
    color:red;
    background-color:yellow;
 }
 QTabBar::tab:hover
 {
        background-color:red;
 }
 
  QTabBar::tab:selected/*当前选择的tab页*/
 {
        background-color:white;
 }
 QTabWidget:pane /*QTabWidget 中间窗体的背景色*/
{
 border:none;   
 }

QToolButton

  QToolButton { /* all types of tool button */
      border: 2px solid #8f8f91;
      border-radius: 6px;
      background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                        stop: 0 #f6f7fa, stop: 1 #dadbde);
  }

  QToolButton[popupMode="1"] { /* only for MenuButtonPopup */
      padding-right: 20px; /* make way for the popup button */
  }

  QToolButton:pressed {
      background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                        stop: 0 #dadbde, stop: 1 #f6f7fa);
  }

  /* the subcontrols below are used only in the MenuButtonPopup mode */
  //只对 弹出方式为 MenuButtonPopup 的QToolButton有效
  QToolButton::menu-button {
      border: 2px solid gray;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
      /* 16px width + 4px for border = 20px allocated above */
      width: 16px;
  }

  QToolButton::menu-arrow {
      image: url(downarrow.png);
  }

使用记录

b ackground-image与border-image 的区别

background-image 不会拉伸图片
border-image 会拉伸图片

QSS中的注释

使用 // 来注释 不要使用 // 这种，否则导致后续样式无效**

QLineEdit 设置 background:transparent; 无效，可能是没有设置 # border 属性
QLineEdit 设置 padding-left 的时候，会把原来的大小撑大
QToolButton 中的menu设置样式无效
可能是 menu没有作为子窗体 无法继承自父窗体样式

一路初心向前
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
QSS蓝色主题
06-09
QSS蓝色主题，大概内容如下QWidget#frmLogin,QWidget#frmPopup,QWidget#frmHostInfo,QWidget#frmLogout,QWidget#frmConfig,QWidget#frmData,QWidget#frmDefence,QWidget#frmHost,QWidget#frmMain,QWidget#frmPwd,QWidget#frmSelect,QWidget#frmMessageBox{ border:1px solid #1B89CA; border-radius:0px; } .QFrame{ border:1px solid #5CACEE; border-radius:5px; } QWidget#widget_title{ background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #1B89CA, stop:1 #1077B5); }
PyQt 主题设置（对界面进行美化）
m0_62252120的博客
04-18 2116
使用QSS美化PyQt界面，分享6套超赞皮肤 - muzing的文章 - 知乎 https://zhuanlan.zhihu.com/p/390192953。实现单个控件样式的编辑，而实现主题的切换，实质是批量对所有控件进行样式编辑，QSS是来源于CSS，算是Qt定制版的一个CSS子集。这种方法就适用于内容较多，且不方便在程序中编写。学习过程记录，如有问题，望指正（手动鞠躬）！在编写多个主题后，加入需适配的界面文件。我们将所需控件的属性通过编写.（也可以直接找现成的）。下拉框遍历读取主题，读。
QSS总结
u012719076的博客
03-11 1624
QSS总结以及最近做的Qt项目 https://www.cnblogs.com/wangqiguo/p/4960776.html#_label6 关于QT的QSS的知识总结 https://blog.csdn.net/Mario_z/article/details/80566297
qss简介大全
热门推荐
houxian1103的博客
05-10 2万+
​ Qt style sheet, 简写就是qss, Qt样式表，不需要用C++代码控件进行重载，就可以修改控件外观，美化界面，类似于前端的css, 但是没有css功能强大.​ 例如下面QLabel的样式设置除了以上样式外，还有很多，qss千变万化，可以写出各种花里胡哨的样式。
常用QSS样式收集
10-27
Qt样式QSS，常用QSS样式收集，网上收集而来。Qt样式QSS，常用QSS样式收集，网上收集而来。
pyqt5 qss常用美化资源包
08-03
下载之后直接导入项目根目录中，配合我的一片qss美化文章，可以完美使用，也可以自己的定义一些qss内容，然后达到自己想要的效果
pyqt 常用控件qss设置
12-21
pyqt 常用控件qss设置 适合qt qss新手参考学习
常用的4中qss
06-09
4种常见的qss，包括白色，黑色，黑色渐变等，qss文件，在qt的main函数中，直接加载即可
Qt开发中常用QSS样例
02-07
一些常用Qt空间的Qss样例，如： QLineEdit,QTextEdit {/*控件初始化的设置*/ border: 1px solid #32435E; border-radius: 5px; /*控件边框的弧度，数值越大，则弯曲得越厉害*/ /* padding: 0 8px; */ background...
使用Qss设置QT程序界面的样式和皮肤
zy_小轩的博客
10-27 206
使用Qss设置QT程序界面的样式和皮肤 - 一字千金 - 博客园
QSS的使用
pzs0221的专栏
09-10 4486
一、程序应用qss文件 QString qssPath = QString("%1/stylesheet/style.qss").arg(a.applicationDirPath()); QFile file(qssPath); if(file.open(QFile::ReadOnly)) { a.setStyleSheet(file.readAll()); } file.close(); 二、单个应用qss
Qt QSS QCheckBox和QRadioButton
m0_73443478的博客
12-29 1265
Qt QSS QCheckBox和QRadioButton
qt之qss操作设置主题更换
kbq的博客
06-21 3795
前言： 自从安装了自定义控件，审美要求就上来了，不仅仅在满足于普通的 画面风格，可能也是看了更多的比较炫的界面，所以才想要自己做的程序界面也不落后。本文以极简的方式讲解傻瓜式自定义主题使用，当然这肯定是需要借助其他大牛做好的qss文件才可以。 准备： 当然是准备好需要风格的qss文件啦，这里提供一个我收集的一些qss 文件，有几个好看的，暂时就不大量收集，准备在几个好的qss基础上修改自己满...
qss dark主题
JerryZhang132的博客
01-26 200
qss dark风格
Qt Qss黑色样式(带详细注释)【一】
芒种、的博客
12-21 3275
/* ================================================ * author:chencan lastedited:20201209 * ================================================ */ $backgroundcolor = #f5f5f5; /*浮动窗口*/ QDockWidget{ /*背景色*/ background-color:rgb(245,245,245); } /*浮动窗口-子控件弹出-鼠标停
QSS样式设计案例以及详细注释
最新发布
weixin_58478143的博客
10-26 140
* 设置下拉按钮的左边框为1px solid #999（浅灰色） *//* 设置下拉按钮的边框圆角半径为0px（顶部）、4px（右侧）、4px（底部）和0px（左侧） *//* 设置单行输入框的边框宽度为1px，边框颜色为#999（浅灰色） *//* 设置按钮控件的边框宽度为1px，边框颜色为#999（浅灰色） *//* 设置滑块控件的边框宽度为1px，边框颜色为#999（浅灰色） *//* 设置组合框的边框宽度为1px，边框颜色为#999（浅灰色） *//* 设置所有控件的字体为微软雅黑 */
分享一款开箱即用的qss暗黑主题
https://ligo100.cn 小何博客欢迎访问。
01-26 1331
前言 这是一款暗黑色的主题，美化了绝大部分的控件，qss代码对于初学者有很好的参考价值。 代码如下 QWidget:window { /* Borders around the code editor and debug window */ border: 0px solid #263238; background-color: #263238; } QToolTip { background-color: #80CBC4; color: black; padding.
CheckBox 如何改变背景色和选中时的背景颜色
YuKing_HONG的博客
05-18 7329
CheckBox 如何改变背景色和选中时的背景颜色 转载 忘记是谁的了。 <style> input[type=checkbox] { cursor: pointer; position: relative; width: 15px; height: 15px; font-size: 14px; } input[ty...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一路初心向前

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值