QSS-青色风格

VIP文章 已于 2022-12-01 09:57:23 修改
阅读量199 收藏 1
点赞数
分类专栏： QT 文章标签： css html css3
于 2022-11-21 15:56:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GraceLand525/article/details/127966560
版权

青色皮肤

 表格右下角水平和垂直滚动条交汇处需单独设置cornerWidget，例如：

	QLabel *pLabel = new QLabel;
	ui.tableWidget->setCornerWidget(pLabel);

青色风格

skin.qss

/*所有窗口控件去除虚线框*/
*{
    outline: none;             /*去除轮廓虚线框*/
}
/*所有窗口控件禁用状态*/
*:!enabled
{
    background-color: #f6f5ec; /*背景颜色*/
    border: 1px solid #c3c3c5; /*边框宽度样式及颜色*/
    border-radius: 4;           /*边框圆角半径*/
    color: #c3c3c5;            /*字体颜色*/
}

QWidget
{
    background-color: #f6f5ec;  /*背景颜色*/
    /*border: 0px solid #208791;	/*边框宽度样式及颜色*/
    border-radius: 4;           /*边框圆角半径*/
    color: #130c0e;             /*字体颜色*/
}
/**********************************************菜单栏**************************************************************/
QMenuBar
{
    background: #f6f5ec;        /*背景颜色*/
    border: 0px solid #f6f5ec;  /*边框宽度样式及颜色*/
}
/*菜单项*/
QMenuBar::item
{
    background: transparent;        /*背景透明*/
    border: 0px solid #7a7a7a;      /*边框宽度样式及颜色*/
    padding: 5px 10px 5px 10px;     /*内边距 上右下左*/
}
/*鼠标滑过菜单栏item*/
QMenuBar::item:selected
{
    background: #50b7c1;
    color: #ffffff;
}
/*********************************************下拉菜单*************************************************************/
QMenu
{
    background: #f6f5ec;        /*背景颜色*/
    border: 1px solid #208791;  /*边框宽度样式及颜色*/
    border-radius: 4;       /*倒角半径*/
    color: #130c0e;             /*字体颜色*/
}
/*下拉菜单项*/
QMenu::item
{
    background: #f6f5ec;        /*背景颜色*/
    border-radius: 4;           /*倒角半径*/
    padding: 0px 30px 0px 30px; /*内边距 上右下左*/
    min-height: 30px;           /*高度*/
}
/*下拉菜单选中项*/
QMenu::item:selected
{
    background: #50b7c1;    /*背景颜色*/
    color: #ffffff;         /*字体颜色*/
}
/*下来菜单分隔线*/
QMenu::separator
{
    background: #208791;    /*背景颜色*/
    margin: 2px 7px 2px 7px; /*内边距 上右下左*/
    height: 1px;            /*高度*/
}
/*指示器*/
QMenu::indicator
{
    padding: 0px 2px 0px 3px;   /*内边距 上右下左*/
    width: 25px;    /*宽度*/
    height: 25px;   /*高度*/
}
/*指示器选中状态*/
QMenu::indicator:checked
{
    image: url(:/QSS/Resources/dagou.png);
}
/*图标*/
QMenu::icon
{
    background: transparent;    /*背景颜色*/
    padding: 0px 2px 0px 10px;   /*内边距 上右下左*/
    width: 25px;    /*宽度*/
    height: 25px;   /*高度*/
}
/*箭头*/
QMenu::right-arrow
{
    padding: 0px 4px 0px 0px;   /*内边距 上右下左*/
    image: url(:/QSS/Resources/sls_QTreeView_youjiantou.png);
}
QMenu::right-arrow:selected
{
    image: url(:/QSS/Resources/sls_QTreeView_xiajiantou_hover.png);
}
/**************************************************工具栏**********************************************************/
QToolBar
{
    background: #f6f5ec;    /*背景颜色*/
    border: none;           /*无边框*/
    color:#130c0e;          /*字体颜色*/
}
/*工具条分隔线*/
QToolBar::separator
{
    background: #208791;        /*背景颜色*/
    margin: 3px 3px 3px 3px;    /*外边距 上右下左*/
    width: 1px;                 /*宽度*/
}
/*拖动手柄*/
QToolBar::handle
{
    /*image: url(handle.png);*/
    /*background: #2e3135;    /*背景颜色*/
    /*border: 1px dotted #74787c;  /*边框宽度样式及颜色*/
}
/*********************************************工具栏上的按钮*********************************************************/
/*工具条按钮普通状态*/
QToolButton
{
    background: #50b7c1;        /*背景颜色*/
    /*border: 0px solid #b1b1b1;  /*边框宽度样式及颜色*/
    border-radius: 2;          /*圆角半径*/
    color:#130c0e;              /*字体颜色*/
    margin: 2px 2px 2px 2px;    /*外边距 上右下左*/
    height:20;                  /*高度*/
}
/*鼠标滑过*/
QToolButton:hover
{
    background: #50b7c1;    /*背景颜色*/
    color:#ffffff;          /*字体颜色*/
}
/*鼠标按下*/
QToolButton:pressed
{
    background: #208791;    /*背景颜色*/
    color:#ffffff;          /*字体颜色*/
}
/*选中状态*/
QToolButton:checked
{
    background: #9ACD32;    /*背景颜色*/
    color:#ffffff;          /*字体颜色*/
}
/*鼠标滑过选中状态*/
QToolButton:checked:hover
{
    background: #7aad12;    /*背景颜色*/
    color:#ffffff;          /*字体颜色*/
}
/*提示标题*/
QToolTip
{
    background: #f6f5ec;        /*背景颜色*/
    opacity:255;                /*透明度*/
    border: 1px solid #130c0e;  /*边框宽度样式及颜色*/
    color:#130c0e;              /*字体颜色*/
}
/*******************************************QStatusBar状态栏*************************************************************/
/*常规状态*/
QStatusBar
{
    background: #f6f5ec;        /*背景颜色*/
    border: 2px ridge #005761;  /*边框宽度样式及颜色*/
    border-radius: 0;           /*边框圆角半径*/
    color: #130c0e;             /*字体颜色*/
    margin-right: 0px;          /*右外边距*/
}
QStatusBar::item
{
    background: transparent;   /*透明背景*/
    border: 0px solid #7a7a7a;  /*边框宽度样式及颜色*/
    color: #130c0e;             /*字体颜色*/
}
/*针对状态栏内的控件设置样式*/
QStatusBar QLabel
{
    /*background: #2e3135;        /*背景颜色*/
    /*border:1px solid #00ff00;
    /*color: #ff0000;             /*字体颜色*/
}
/********************************************pushButton按钮************************************************/
/*常规状态*/
QPushButton
{
    background: #50b7c1;        /*背景颜色*/
    opacity : 255;              /*背景透明度：0-255 */
    border-radius: 2px;         /*边框圆角半径，border-left，top，righ，bottom*/
    color: #f6f5ec;             /*字体颜色*/
    min-width:80px;				/* 控件最小宽度 */
    min-height:23px;			/* 控件最小高度 */
}
/*鼠标滑过*/
QPushButton:hover
{
    background: #40a7b1;    /*背景颜色*/
    color: #f6f5ec;         /*字体颜色*/
}
/*鼠标按下*/
QPushButton:pressed
{
    background: #3097a1;    /*背景颜色*/
}
/*选中*/
QPushButton:checked
{
    background: #9acd32;    /*背景颜色*/
    color: #ffffff;         /*字体颜色*/
}
/*鼠标滑过选中状态*/
QPushButton:checked:hover
{
    background: #8abd22;    /*背景颜色*/
    color:#ffffff;          /*字体颜色*/
}
/*菜单箭头*/
QPushButton::menu-indicator
{
    image: url(:/QSS/Resources/sls_QTreeView_xiajiantou_hover.png);  /*小箭头图标*/
    /*image:none; /*无小箭头*/
    padding: 2px 2px 0px 0px;           /*内边距 上右下左*/
    subcontrol-position: right center;  /*滑块位置，left左边，center中部，right右边,top顶，center中部，bottom底*/
    subcontrol-origin: padding;         /*起始位置位于边缘 margin  border  padding  content*/
}
/*鼠标滑过菜单箭头*/
QPushButton::menu-indicator:hover
{
    image: url(:/QSS/Resources/sls_QTreeView_xiajiantou_hover.png);  /*小箭头图标*/
    padding: 2px 2px 0px 0px;           /*内边距 上右下左*/
    subcontrol-position: right center;  /*滑块位置，left左边，center中部，right右边,top顶，center中部，bottom底*/
    subcontrol-origin: padding;         /*起始位置位于边缘 margin  border  padding  content*/
}
/*菜单箭头禁用*/
QPushButton::menu-indicator:!enabled
{
    image: url(:/QSS/Resources/sls_QTreeView_xiajiantou_Disable.png);  /*小箭头图标*/
    padding: 2px 2px 0px 0px;           /*内边距 上右下左*/
    subcontrol-position: right center;  /*滑块位置，left左边，center中部，right右边,top顶，center中部，bottom底*/
    subcontrol-origin: padding;         /*起始位置位于边缘 margin  border  padding  content*/
}
/*禁用*/
QPushButton:!enabled
{
    background: #f6f5ec;        /*背景颜色*/
    border: 1px solid #c3c3c5;  /*边框宽度样式及颜色*/
    color: #c3c3c5;             /*字体颜色*/    
    min-width:80px;				/* 控件最小宽度 */
    min-height:23px;			/* 控件最小高度 */
}
/********************************************lingEdit编辑框*********************************************************/
/*常规状态*/
QLineEdit
{
    background: #f6f5ec;        /*背景颜色*/
    border: 1px solid #208791;  /*边框宽度样式及颜色*/
    color: #130c0e;             /*字体颜色*/
    border-radius: 4;           /*倒角半径*/
    min-height:23px;			/* 控件最小高度 */
}
/*获取焦点*/
QLineEdit:focus
{
    border: 1px solid #50b7c1;  /*边框宽度样式及颜色*/
    color: #130c0e;             /*字体颜色*/

}
/*鼠标滑过*/
QLineEdit:hover
{
    border: 1px solid #50b7c1;  /*边框颜色*/
}
/*只读状态*/
QLineEdit:read-only
{
    background:#d6d5cc; /*背景颜色*/
    color: #635c5e;             /*字体颜色*/
}
/********************************************textEdit文本框*******************************************************/
/*常规状态*/
QTextEdit
{
    background: #f6f5ec;        /*背景颜色*/
    border: 1px solid #208791;  /*边框宽度样式及颜色*/
    color: #130c0e;             /*字体颜色*/
}
/*获取焦点*/
QTextEdit:focus
{
    border: 1px solid #50b7c1;  /*边框宽度样式及颜色*/
    color: #130c0e;             /*字体颜色*/
}
/*鼠标滑过*/
QTextEdit:hover
{
    border: 1px solid #50b7c1;  /*边框宽度样式及颜色*/
}
/**************************************************textBrowser*************************************************************/
/*常规状态*/
QTextBrowser
{
    background: #e6e5dc;    /*透明背景*/
    color: #130c0e;         /*字体颜色*/
}
/**************************************************label静态文本*************************************************************/
/*常规状态*/
QLabel
{
    background: transparent;    /*透明背景*/
    color: #130c0e;             /*字体颜色*/
}
QLabel#TitleContent,#TitleIcon
{
    background: transparent;    /*透明背景*/
    color: #130c0e;             /*字体颜色*/
}
/****************************************************checkBox复选按钮********************************************************/
/*常规状态*/
QCheckBox
{
    color: #130c0e;              /*字体颜色*/
    spacing: 2px;                /*文本与指示器的间隔*/
}
/*选中*/
QCheckBox:checked
{
    color: #1d953f;              /*字体颜色*/
}
/*半选中*/
QCheckBox:indeterminate
{
    color: #f47920;              /*字体颜色*/
}
/*鼠标滑过未选中状态*/
QCheckBox:hover
{
    color: #65c294               /*字体颜色*/
}
/*鼠标滑过选中状态*/
QCheckBox:hover:checked
{
    color: #65c294               /*字体颜色*/
}
/*鼠标滑过半选中状态*/
QCheckBox:hover:indeterminate
{
    color: #faa755               /*字体颜色*/
}
/*未选中时的禁用状态*/
QCheckBox:!enabled
{
    background: #f6f5ec;        /*背景颜色*/
    border: 1px solid #f6f5ec;  /*边框宽度样式及颜色*/
    color: #c3c3c5;             /*字体颜色*/
}
/*选中时的禁用状态*/
QCheckBox:checked:!enabled
{
    color: #c3c3c5;            /*字体颜色*/
}
/*指示器选中时的禁用状态*/
QCheckBox:indeterminate:!enabled
{
    color: #c3c3c5;            /*字体颜色*/
}
/*****************************************************radioButton单选按钮*********************************************/
/*常规状态*/
QRadioButton
{
    color: #130c0e;              /*字体颜色*/
    spacing: 2px;                /*文本与指示器的间隔*/
}
/*选中*/
QRadioButton:checked
{
    color: #1d953f;              /*字体颜色*/
}
/*鼠标滑过未选中状态*/
QRadioButton:hover
{
    color: #938c8e;              /*字体颜色*/
}
/*鼠标滑过选中状态*/
QRadioButton:hover:checked
{
    color: #65c294
}
/*未选中时文本禁用状态*/
QRadioButton:!enabled
{
    background: #f6f5ec;        /*背景颜色*/
    border: 1px solid #f6f5ec;  /*边框宽度样式及颜色*/
    color: #c3c3c5;             /*字体颜色*/
}
/*选中时禁用状态*/
QRadioButton:checked:!enabled
{
    color: #c3c3c5;            /*字体颜色*/

}
/*指示器常规图标*/
QRadioButton::indicator
{
    image: url(:/QSS/Resources/sls_radioButton_off.png);
}
/*指示器选中状态图标*/
QRadioButton::indicator:checked
{
    image: url(:/QSS/Resources/sls_radioButton_on.png);
}
/*指示器禁用状态图标*/
QRadioButton::indicator:!enabled
{
    image: url(:/QSS/Resources/sls_radioButton_off_Disable.png);
}
/*指示器选中时禁用状态图标*/
QRadioButton::indicator:checked:!enabled
{
    image: url(:/QSS/Resources/sls_radioButton_on_Disable.png);
}
/******************************************************comboBox下拉列表框*********************************************/
/*常规状态*/
QComboBox
{
    background: #50b7c1;       /*背景颜色*/
    border: 1px solid #50b7c1; /*边框宽度样式及颜色*/
    border-radius: 4;          /*圆角半径*/
    color: #f6f5ec;            /*字体颜色*/ 
    min-width:100px;			/*最小宽度*/
    padding: 1px 18px 1px 3px;   /* 字体填衬 */
    font: normal normal 12px "Microsoft YaHei";		/*字体及大小*/
}
/*下拉选择项背景颜色*/
QComboBox QAbstractItemView
{
    outline: 0px solid gray;						/* 选定项的虚框 */
    background: #107781;                            /*背景颜色*/
    border: 1px solid #64686c;                      /*边框宽度样式及颜色*/
    color: #f6f5ec;                                 /*字体颜色*/
    selection-background-color: rgba(105,153,158,150); /*选中项的背景颜色及透明度*/
    selection-color: #ffffff;                       /*选中时的字体颜色*/
}
/*常规箭头图片*/
QComboBox::down-arrow
{
    image: url(:/QSS/Resources/sls_comboBox.png); /*资源文件夹里的图片*/
}
/*禁用时箭头图片*/
QComboBox::down-arrow::!enabled
{
    image: url(:/QSS/Resources/sls_comboBox_Disable.png); /*资源文件夹里的图片*/
}
/*箭头位置及去除背景*/
QComboBox::drop-down
{
    background: transparent;				/*背景透明*/
    /*border: 0px solid #74787c;			/*边框宽度样式及颜色*/
    width: 20px;							/*箭头距离右边框位置*/
    subcontrol-origin: padding;				/* 子控件在父元素中的原点矩形。如果未指定此属性，则默认为padding。 */
    subcontrol-position: top right;			/* 下拉框的位置（右上） */
 
    border-left-width: 1px;					/* 下拉框的左边界线宽度 */
    border-left-color: darkgray;			/* 下拉框的左边界线颜色 */
    border-left-style: soli
最低0.47元/天 解锁文章
GraceLand525
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QSS美化之青色风格最全，可直接用
11-30
QSS美化之青色风格最全，可直接用
Qt5自定义状态栏QStatusBar外观（背景）和状态栏基本用法（显示普通消息、临时消息、永久消息）
净无邪博客
10-19 8691
本文主要总结Qt状态栏QSatatuBar用法，通过继承状态栏，自定义状态栏背景图形，以及状态栏三种基本用法。 状态栏类QStatusBar主要有显示普通消息、显示定时消息、显示永久消息三种功能。三种都十分常用，下面先总结自定义状态栏外观用法和将状态栏三种用法进行详细讲解和代码编写。 一、自定义状态栏外观 1.1原理详解 状态栏类QStatusBar继承于QWidget，我们继承QStat...
statusBar 背景颜色设置问题
Mackellen的专栏
12-22 1211
经常遇到修改 statusBar 的颜色问题，用完就忘记， 故写此文章记录下，提醒自己。 一般修改状态栏需要注意4个属性。 1. self.navigationController.navigationBar.translucent = YES; //是否让View 延伸到 navigationBar的背景。  2. self.navigationController.navig
Qt5自定义状态栏QStatusBar外观（背景）和状态栏基本用法（显示普通消息、临时消息、永久消息）.zip
10-19
这是一个Qt自定义状态栏基本用法，包括自定义状态栏的外观形状，三种显示普通消息、临时消息、永久消息用法和图文示例，具体的原理详细可以参考博主博主这篇博客：https://blog.csdn.net/naibozhuan3744/article/details/102642222。编译环境：Qt5.9.4+QtCreator4.5.0+MinGW32
改变沉浸式状态栏背景颜色
daimengs的博客
05-21 643
private void initWindow() { Window window=getWindow(); if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.LOLLIPOP){ //5.0以上的手机 window.clearFlags(WindowManager.LayoutParams.FLAG_...
QSS---注意事项
laner__gg的博客
04-14 551
1、QSS---注意事项： 级联：QSS可以在QApplication（整个应用程序中所有的控件）、父控件（控件本身，以及空控件内部所有的子控件）、子控件中设置；一个控件的最终样式，会受到父控件和QApplication的影响。 冲突：如果一个控件，作为后代控件，被多个祖先控件影响，则会产生不同属性之间进行叠加，相同属性之间进行覆盖。（控件最终会受到哪个控件的影响，看特异性，特指某一个控件，优先级会更高一点） 确定控件属性，首先观察其特异性，在特异性相同的情况下，根据其先后顺序确定其属性。
Qss-StyleBlack
02-23
Qss-StyleBlack
QSS-Skin-Builder.zip
最新发布
02-22
1. 所有其他窗体都是其布居中的widget。 2. 左上角图标、标题、标题居中、右上角最小化最大化关闭都可设置，包括设置样式+图标+图形字体（默认...8. 重新设计QSS样式，去掉单选框图片、滚动条图片，增加主菜单样式。
QSS - Qmail-Scanner Statistics-开源
04-24
Qmail-Scanner统计信息（QSS）使用Qmail-Scanner日志文件生成每日，每月和每年的统计信息。 它还显示了由Qmail-Scanner阻止的病毒的完整列表，该病毒来自的前五个域以及国家/地区
Qt调用JS脚本
热门推荐
梦之旅的专栏
03-22 1万+
https://github.com/mygit03/DoJS 基于 Qt5.10.1 调用 Python 脚本实现简单的四则运算 程序通过调用js脚本的函数执行计算（将计算公式写入js脚本，在程序中通过传参数调用js脚本中的函数进行计算，最后将计算结果返回，显示到界面） //DoJS.pro #-------------------------------------------...
Qt 读写文件，并显示到tablewidget
梦之旅的专栏
04-20 1万+
//将表格数据写入文件 void DiagramTableItem::saveTable() {     QString fileName = QFileDialog::getSaveFileName(0,tr("保存文件"),                                                 tr("/root/Projects/product"),
Qt格式化输出数据
梦之旅的专栏
04-27 1万+
float fvalue = 6.537; 1. int sprintf (char *__stream, const char *__format, ...); 例如: char buf[512]; sprintf(buf, "%+10.2f", fvalue); sprintf(buf, "%+-m.nf", fvalue); +:显示正负
遍历treeWidget节点，索引到要找的节点并选中
梦之旅的专栏
09-19 1万+
void DevMainWindow::indexCurTreeItem(QModelIndex index) { QTableWidgetItem *tableItem = ui->tableWidget->item(index.row(), 5); qDebug() "item.text:::" tableItem->text(); itemText1
Qt之程序打包(使用windeployqt.exe查找依赖库)
梦之旅的专栏
08-10 1万+
Qt 官方开发环境使用的动态链接库方式，在发布生成的exe程序时，需要复制一大堆 dll，如果自己去复制dll，很可能丢三落四，导致exe在别的电脑里无法正常运行。因此 Qt 官方开发环境里自带了一个工具：windeployqt.exe。以官方 Qt 5.7.0+MinGW 开发环境为例: 从开始菜单-->Qt 5.7.0-->5.7-->MinGW 5.3.0 (32-bit)
QLineEdit用正则限制文本框的输入内容+正则表达式语法
梦之旅的专栏
09-23 1万+
QRegExp regx("[0-9\.]+$"); ui->lineEdit->setValidator(new QRegExpValidator(regx, ui->lineEdit));
Qt网络传输之QNetworkAccessManager的使用
梦之旅的专栏
03-16 1万+
把 QNetworkAccessManager 的 get/post 请求封装成函数，此方法可以避免使用槽函数响应网络请求；#include <QtNetwork/QNetworkAccessManager> #include <QtNetwork/QNetworkRequest> #include <QtNetwork/QNetworkReply> #incl...
Qt获取本机的IP地址、用户名等相关信息
梦之旅的专栏
09-09 1万+
1.pro文件加入QT += network2.添加头文件#include #include #include #include //获取主机名 QString localHost = QHostInfo::localHostName(); //获取用户名 QString getUserName() { #if 1 QStringList envVa
qss flex-direction
10-14
Q: qss flex-direction是用来做什么的？ A: qss flex-direction是用来设置flex容器内flex项目的排列方向的属性，可以设置为row（默认值，水平方向）、column（垂直方向）、row-reverse（水平方向，反向排列）和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值