Qt样式表使用总结2，基本语法

0&＃xff0c;简介

本文只是简单介绍下最常用的qss写法&＃xff0c;方便新手快速上手&＃xff0c;不会完整涵盖所有语法知识点。

希望新手以20%的时间了解到80%使用率的技能&＃xff0c;细枝末节的内容在实践中慢慢接触即可。

1&＃xff0c;最简单的写法

qss语法大致沿袭css&＃xff0c;最简单的写法&＃xff1a;

选择器{
属性&＃xff1a;值;
属性&＃xff1a;值;
...
属性&＃xff1a;值;
}


QPushButton{border:1px solid #8B7E66;background:#1C86EE;color:white;
}

会对所有按钮都应用样式&＃xff1a;背景色浅蓝色、文字颜色白色、边框1像素实线米灰色。

2&＃xff0c;常用属性

背景色&＃xff1a;background:#1C86EE;

文本色&＃xff1a;color:white;

边框&＃xff1a;border:1px solid #8B7E66;

边框圆角&＃xff1a;border-radius: 4px;

单独设置四个边框&＃xff1a;

border-left:1px solid red; 
border-right:1px solid red; 
border-top:1px solid green; 
border-bottom:1px solid green;

内边距&＃xff1a;

padding:10px 5px 15px 20px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;

外边距&＃xff1a;

margin:10px 5px 15px 20px;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;

宽高&＃xff1a;

width: 100px;
height: 20px;

某种状态下的图片&＃xff1a;image: url(:/image/ok.png);

字体&＃xff1a;

font-family:"Microsoft YaHei";
font-size:12px;
font-weight:bold;

3&＃xff0c;用控件名或属性进行筛选

如让样式只对btnOK和btnCancel 两个名称的按钮应用生效。

QPushButton#btnOK,#btnCancel{border:1px solid #8B7E66;background:#1C86EE;color:white;
}

以上大部分情况下够用了&＃xff0c;不过有时候通过属性过滤可能更方便&＃xff1a;

QPushButton[xxx&＃61;"abc"]{border:1px solid #8B7E66;background:#1C86EE;color:white;
}

该按钮需设置属性xxx&＃61;"abc"&＃xff1a;

ui->pushButton->setProperty("xxx","abc");

4&＃xff0c;控件的不同状态

不同的控件可能有各种状态&＃xff0c;一般对应不同的样式&＃xff1a;

如QPushButton就有正常、鼠标滑过(hover)、鼠标按下(pressed)等状态。

QCheckBox有checked、unchecked等。

QLineEdit的禁用状态disabled和可用状态enabled 也需要明显的样式区分。

QPushButton{background:#EE6AA7;border:1px solid #8B7E66;border-radius:5px;color:white;
}
QPushButton:hover{background:#FF6EB4;
}
QPushButton:pressed{background:#CD6090;
}