QSS入门(一)

一个比较挫的drak style 的设置界面,原谅我的设计能力。。。

主要是QSS的学习,使界面美化与业务逻辑分离。

不想说什么语法,什么介绍,直接上QSS加注释,方便自己查看。

QSpinBox,QComboBox{  //设置spinBox combox 类和他们的所有子类的style
border:1px solid #242424; //设置border
border-radius:3px;//设置border圆角
padding:2px;
background:#484848; //背景颜色
/*selection-background-color:#484848;
selection-color:#DCDCDC;*/
color : white;//文本颜色,ComboBox上显示的,不是item里的
}
 
QComboBox::down-arrow{//设置combox 的下三角 style
image:url(:/psblack/add_bottom.png); //设置图片
width:10px;
height:10px;
right:2px;
}
QComboBox::drop-down:on{
  
top:1px;
}
QComboBox::drop-down{
  
subcontrol-origin:padding; //在padding区域 显示三角
subcontrol-position:top right; //设置子控件的位置 右上 
width:15px;
border-left-width:0px;
border-left-style:solid;
border-top-right-radius:3px;
border-bottom-right-radius:3px;
border-left-color:#242424;
}
 
QComboBox:hover{ //QComboBox的鼠标滑过  设置渐变色
    background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 gray,stop:1 #525252);
}
 
 
QComboBox QAbstractItemView { //设置IQComboBox里的item 属性
 
/*      border: 2px solid darkgray;*/
    selection-color: white; //选泽时的字体颜色
    selection-background-color: #484848;//选泽时的背景颜色
      color : black;//未被选择的字体颜色
      border: 0px; 
       outline:0px; //去掉虚线
  }
 
 
QRadioButton{ //设置QRadioButton的字体颜色
    color : white;
}
 
QRadioButton::indicator::unchecked{ //当radiobutton不被选中是的圆圈图片
image:url(:/psblack/radiobutton_unchecked.png);
}
 
QRadioButton::indicator::unchecked:disabled{//当radiobutton不被选中同时disabled状态时,的圆圈图片
image:url(:/psblack/radiobutton_unchecked_disable.png);
}
 
QRadioButton::indicator::checked{ //同理选中时
image:url(:/psblack/radiobutton_checked.png);
}
 
QRadioButton::indicator::checked:disabled{
  
image:url(:/psblack/radiobutton_checked_disable.png);
}
 
 
QTabWidget::pane{ //好像是tabwidget的窗口
    background-color:#484848;
}
/* shuxing wei tab=true de suoyou widget baohan ta de zilei keyi
ba tabwidget nong quan hei le */
QWidget[tab="true"],.QWidget,QTabWidget{
  
background:#484848;
}
.QWidget{//只是设置QWidget这一类,不会涉及到子类
border-bottom:1px solid #242424;
}
 
 
QTabBar::tab{ //设置tab标签
border:1px solid #242424;
color:#DCDCDC;
margin:0px;
min-height: 12;
background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464,stop:1 #525252);
}
 
/*tabBar bei xuanzhong he shubiao huaguo*/
QTabBar::tab:selected,QTabBar::tab:hover{
  
border-style:solid;
border-color: white;
background:#444444;
}
/* shangfang de tabBar  hai you zuo you xia fang de bar */
//设置在上面的tab标签,默认tab在控件上方
QTabBar::tab:top,QTabBar::tab:bottom{
  
padding:3px 8px 3px 8px;
}
 
/*QTabBar::tab:left,QTabBar::tab:right{
  
padding:8px 3px 8px 3px;
} 被选中和鼠标滑过时*/
QTabBar::tab:top:selected,QTabBar::tab:top:hover{
  
border-width:0px 0px 2px 0px;
border-left-width:1px;
border-left-color:#242424;
border-right-width:1px;
border-right-color:#242424;
}
 
 
.QLabel:disabled{
  
    color : gray;
}
QCheckBox,QLabel{
  
    color : white;
}
 
QCheckBox:disabled{
  
    color : gray;
}
QCheckBox::indicator:unchecked{//QCheckbox的方框
image:url(:/psblack/checkbox_unchecked.png);
}
 
QCheckBox::indicator:unchecked:disabled{
  
image:url(:/psblack/checkbox_unchecked_disable.png);
}
 
QCheckBox::indicator:checked{
  
image:url(:/psblack/checkbox_checked.png);
}
 
QCheckBox::indicator:checked:disabled{
  
image:url(:/psblack/checkbox_checked_disable.png);
}
 
QCheckBox::indicator:indeterminate{
  
image:url(:/psblack/checkbox_parcial.png);
}
 
QCheckBox::indicator:indeterminate:disabled{
  
image:url(:/psblack/checkbox_parcial_disable.png);
}
.QGroupBox{ 
border:1px solid darkgray;
border-radius:4px;
margin-top:8px;
padding: 6px 0;
}
 
.QGroupBox::title{ //groupbox 的 标题
subcontrol-origin:margin;
position:relative;
left:10px;
color : white;
}
QLineEdit {
  
     border: 1px solid gray;
     border-radius: 4px;
     padding: 0 0;
     background: gray;

                
  • 30
    点赞
  • 240
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
Qt是一种流行的跨平台应用程序开发框架,提供了丰富的工具和库,使开发人员能够轻松创建高性能的应用程序。Qt提供了许多可扩展的方式来自定义和美化应用程序,其中之一就是通过使用Qt样式表(qss)。在程序中,我们可以使用qss来定义应用程序的外观和样式,从而更好地匹配用户的期望和品味。 下面是一些qss的实例: 1.按钮样式: QPushButton { background-color: yellow; border-style: outset; border-width: 2px; border-radius: 10px; border-color: beige; font: bold 14px; min-width: 10em; padding: 6px; } 这段代码给按钮添加了黄色的背景色,4像素的凹出边框,10像素的圆角边框,浅褐色的边框和粗体14像素的字体,并在按钮上添加6像素的填充。 2.标签样式: QLabel { color: #ff4411; font-weight: bold; font-size: 12px; font-family: "Arial"; } 这段代码将标签的字体颜色设置为红色和黄色的混合色,粗体12px的字体,并使用Arial字体族。 3.字体样式: QTextEdit{ font-family:"SimSun"; font-size:14px; } 这段代码将文本编辑器的字体设置为宋体并设置字号为14。 4.滑块样式: QSlider::groove:horizontal { border: 1px solid black; height: 10px; background: grey; margin: 0px; } QSlider::handle:horizontal { background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #bbb, stop:1 white); border: 1px solid black; width: 10px; margin: -2px 0; border-radius: 3px; } 这段代码将水平滑块的滑动轨迹高度设置为10像素,背景为灰色,并使用黑色描边。滑块的句柄使用渐变颜色并具有黑色描边。滑块的宽度为10像素,并使用3像素的圆角。 这些示例只是qss样式的冰山一角。开发人员可以通过使用丰富的qss属性和样式来自定义他们的应用程序的外观和样式。qss是Qt应用程序创建过程中的有用工具,能够使用户界面更加美观、用户友好。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

小卒曹阿瞒

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

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

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

打赏作者

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

抵扣说明:

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

余额充值