qss样式表总结(使用时直接复制粘贴修改)

颜色

16进制:#ffbbcc#ffeeeecc(8位时,前面2位的ff表示透明度)

10进制:rgb(255,255,255)rgba(255,200,200,255)(最后一个数字表示透明度)

---------------------------------------------------------------------------------------------------------------------------------

字体

字体连写:

font: italic   bold   36px  "华文彩云";

按顺序是:字体风格,字体粗细,字体大小,字体族

字体大小:

font-size: 24px;

字体粗细:

font-weight: bold;

字体族:

font-family: "Microsoft YaHei";

字体风格:

font-style: italic;

字体颜色:

color:red;

字体装饰:(下划线、删除线之类的)

text-decoration:underline;

---------------------------------------------------------------------------------------------------------------------------------

边框

边框连写:

border: 1px  solid  red;

按顺序是:边框宽度 边框风格 边框颜色

边框宽度:

border-width: 1px;(4条边)

边框颜色:

border-color: green  red;(上下为绿,左右为红)

边框风格:

border-style: solid;

还可以单独指定某一条边框

border-top;

border-right;

border-bottom;

border-left;

圆角半径

border-radius:3px;(4个角的圆角半径是3px)

分别指定4个角:

border-top-left-radius;

border-top-right-radius;

border-bottom-right-radius;

border-bottom-left-radius;

-------------------------------------------------------------------------------------------------------------------------------- 

背景

背景连写:

background:  yellow  url(:/img/cat.png)   no-repeat  center; 

按顺序是背景色、背景图片、背景平铺、背景位置

background: url(:/img/cat.png)  repeat  right bottom;

按顺序是背景图片、背景平铺、背景水平位置、背景上下位置

background:  transparent;

也可以只指定其中1个或几个

背景颜色

background-color: yellow; 

背景图片

background-image: url(:/img/cat.png);

背景平铺

background-repeat: no-repeat;

背景位置

background-position:  right center;

背景渐变色

其中spread表示传播方向:pad(默认)、repeat、reflect

渐变的介绍参考这个博主:一文搞懂Qt中的颜色渐变(QGradient Class)_qt 渐变色-优快云博客 

线性渐变

background-color: qlineargradient(spread:pad,x1:0, y1:0, x2:0, y2:1, stop:0.2 red, stop:1 blue); 

径向渐变

background:qradialgradient(spread:pad,cx:0, cy:0, radius: 1,  fx:0.5, fy:0.5, stop:0 white, stop:1 green) ;

锥形渐变

background: qconicalgradient(cx:0.5, cy:0.5, angle:30,  stop:0 white, stop:1 #00FF00);

-------------------------------------------------------------------------------------------------------------------------------- 

边框图片

该属性可以实现图片随着控件的形状任意缩放

如果只是单纯的想实现图片随着控件的形状任意缩放,则只需要指定border-image即可

border-image:url(:/img/test.png);

如果想实现更多的效果

则还需要搭配边框border,通常border-image四边的宽度和边框宽度一致

{/*上右下左 全为30  ,默认是拉伸*/
border-image:url(:/img/test.png) 30;

border-top: 30px transparent;
border-bottom: 30px transparent;
border-right: 30px transparent;
border-left:30px transparent;}

{/*上右下左 分别为 10 30 10 30 的内容*/
border-image:url(:/img/test.png) 15 30 15 30 ; 
/*四个边框宽度*/
border-top: 30px transparent;
border-bottom: 30px transparent;
border-right: 30px transparent;
border-left:30px transparent;}

{ /边框宽度33%的比例、  上下 是重复 、左右 是 拉伸*/
border-image:url(:/img/test.png) 33%  repeat  stretch ; 
/*四个边框宽度*/
border-top: 30px transparent;
border-bottom: 30px transparent;
border-right: 30px transparent;
border-left:30px transparent;}

-------------------------------------------------------------------------------------------------------------------------------- 

qproperty-xxxxxx

样式表还支持qproperty前缀的属性,但是在伪状态中,qproperty前缀修饰的属性不会生效

QLabel{   
/*属性*/
qproperty-minimumSize: 200px 100px;
qproperty-maximumSize: 200px 100px;
 
qproperty-text:"样式效果";
qproperty-alignment:AlignCenter;

qproperty-pixmap: url(:/img/plane.png); 
qproperty-scaledContents: true; }

-------------------------------------------------------------------------------------------------------------------------------- 

QLineEdit

QLineEdit的PlaceHolderText和清除按钮的颜色会自动根据文本颜色调整,无法定制

QLineEdit{
font: normal normal 16px  "Microsoft Yahei";
border:1px solid red;
padding:5px;
color: black;
background:pink;
/*选中背景色*/
selection-background-color:yellow;
/*选中的文字颜色*/
selection-color:green;
/*可在qss里设置只读
qproperty-readOnly:true;*/
/*密码模式下,显示的掩码*/
lineedit-password-character:10084;
/*密码模式下,输入字符后多久(ms)变成掩码*/
lineedit-password-mask-delay: 300 ;  
}
/*只读伪状态*/
QLineEdit:read-only {
border-color: black;
background: gray;
}
/*属性选择器控制不同模式下的样式*/
/*密码模式下的样式*/
QLineEdit[echoMode="2"]
{  
	color: red;  
    font-size:20px; 
}

 

-------------------------------------------------------------------------------------------------------------------------------- 

QPushButton

需要注意的是:hover伪状态设置一定要在pressed伪状态之前

QPushButton
{ 
	padding:0px 4px;/*上下padding为0px 左右为4px    4个值为上右下左*/ 
	border: 1px solid #aaaaaa;/*边框*/
    border-radius:8px;/*圆角边框*/
	background: qlineargradient(spread:pad,x1:0, y1:0, x2:0, y2:1, stop:0 #ffffff, stop:1 #eeeeee);/*渐变背景色*/
	outline:none;/*表示焦点时无虚线框*/
    text-align: center;/*文字对齐方式*/
	font:normal normal 15px "Microsoft Yahei";
    image:url("./image/222.jpg");
}
/*鼠标悬停在按钮上,注意hover伪状态设置一定要在pressed伪状态之前!!!!!!!!!!*/
QPushButton:hover
{
	background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #ee0000, stop:1 #ffffff);
	border:1px solid pink;
}
/*按钮选中,需要checkable设置为true才生效 */
QPushButton:checked
{
    font-size:24px;
	font-style:italic ;
    font-weight:bold ;
}
/*按钮按下时*/
QPushButton:pressed
{
	background: yellow;
} 

/*按钮被禁用*/
QPushButton:disabled
{
	background: gray;
}

按钮贴图:4种方法

  • background-image (不会缩放,可以指定位置,或者平铺效果)
  • icon(图片在文字的旁边,如果代码里设置了icon,则该属性不生效,还可通过icon-size属性指定图片大小)

  • image(图片在正中心,且会随着按钮的尺寸等比例缩放)

  • border-image(图片填满整个按钮)

--------------------------------------------------------------------------------------------------------------------------------

QRadioButton、QCheckBox

他们相关的子控件是::indicator 

相关的伪状态是:checkeduncheckedindeterminate(QCheckBox支持,表示半选状态)

其中,样式表中spacing属性可以指定::indicator 和文本的间距

setLayoutDirection接口可以指定::indicator 和文本的排列方向

QRadioButton

QRadioButton {  
    color:  red;/*文字颜色*/
	spacing:20px;/*间距20px*/
}

 /*左侧指示子控件*/
QRadioButton::indicator {
	height: 16px; 
	width: 16px;
	border-radius:8px;
	border-width: 1px;
    border-style:solid;
	border-color: blue;	
    top:2px;/*还可以用子控件的几个位置属性来微调子控件的位置*/
}

/*左侧指示子控件选中后背景变成渐变色*/
/*还可以贴图*/
QRadioButton::indicator:checked { 
    /*渐变背景*/
	background-color: qlineargradient(spread:pad, x1:0.5, y1:1, x2:0.5, y2:0, stop:0 rgba(90, 113, 0, 255), stop:1 rgba(0, 0, 252, 255));
}

/*左侧指示子控件未选中背景变成灰色*/
QRadioButton::indicator:unchecked {  
	background-color: gray;
}

 QCheckBox

QCheckBox
{
    spacing: 15px;/*左右子控件的间距*/
    color: green;
}
 
 /*左侧指示子控件*/
QCheckBox::indicator 
{
    width: 20px;
    height:20px;
}

/*选择框未选中*/
QCheckBox::indicator:unchecked {
       image: url(:/img/u1.png);
}

QCheckBox::indicator:unchecked:hover {
     image: url(:/img/u2.png);
}

QCheckBox::indicator:unchecked:pressed {
    image: url(:/img/u3.png);
}


/*选择框选中*/

QCheckBox::indicator:checked {
    image: url(:/img/c1.png);
}

QCheckBox::indicator:checked:hover {
     image: url(:/img/c2.png);
}

QCheckBox::indicator:checked:pressed {
     image: url(:/img/c3.png);
}

/*选择框部分选中, 需要三态的复选框 ,tristate设置为true */
QCheckBox::indicator:indeterminate {
    image: url(:/img/i1.png);
}

QCheckBox::indicator:indeterminate:hover {
      image: url(:/img/i2.png);
}

QCheckBox::indicator:indeterminate:pressed {
    image: url(:/img/i3.png);
}

-------------------------------------------------------------------------------------------------------------------------------- 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值