颜色
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
相关的伪状态是:checked ,unchecked,indeterminate(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);
}
--------------------------------------------------------------------------------------------------------------------------------