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

0，简介

 

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

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

 

1，最简单的写法

 

qss语法大致沿袭css，最简单的写法：

选择器{
属性：值; 
属性：值; 
... 
属性：值; 
}

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

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

 

2，常用属性

 

背景色：background:#1C86EE;

文本色：color:white;

边框：border:1px solid #8B7E66;

边框圆角：border-radius: 4px;

单独设置四个边框：

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

内边距：

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

外边距：

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

宽高：

width: 100px;
height: 20px;

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

字体：

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

 

3，用控件名或属性进行筛选

 

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

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

 

以上大部分情况下够用了，不过有时候通过属性过滤可能更方便：

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

该按钮需设置属性xxx="abc"：

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

 

4，控件的不同状态

 

不同的控件可能有各种状态，一般对应不同的样式：

伪类	说明
:disabled	Widget 被禁用时
:enabled	Widget 可使用时
:focus	Widget 得到输入焦点
:hover	鼠标放到 Widget 上
:pressed	鼠标按下时
:checked	被选中时
:unchecked	未选中时
:has-children	Item 有子 item，例如 QTreeView 的 item 有子 item 时
:has-siblings	Item 有 兄弟，例如 QTreeView 的 item 有兄弟 item 时
:open	打开或展开状态，例如 QTreeView 的 item 展开，QPushButton 的菜单弹出时
:closed	关闭或者非展开状态
:on	Widget 状态是可切换的（toggle）, 在 on 状态
:off	Widget 状态是可切换的（toggle）, 在 off 状态

如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; 
}