偷偷学习qt 样式，然后写出惊艳所有人的界面

QT样式表

 qt样式表主要受到css的启发，通过调用QWidget:: setStyleSheet() 或 QApplication::setStyleSheet()来设置样式，也可以在界面的样式表中直接填写。

盒子模型（the Box Model）

 学习样式之前我们要先了解盒子模型，也是最基本的样式：

• content  为最内部的矩形，通常是绘制文子、图片的地方。
• padding 负责指定填充操作，主要是窗口部件内容，与边缘线（border）之间的空隙，它可以用top 、right、bottom、left 设置它的大小。
• border 认为是窗口的外边框、你可把它当成门框。
• margin 最外边的矩形，主要负责边缘区域，与窗口部分的距离。

如果没有指定它们四个，默认是4个重合在一起。

 我们来使用最简单布局，看看效果。

 对应样式表：

QLineEdit
{
	border:5px solid gray;
	border-radius: 10px;
	padding: 10 10 10 20px;
	background: yellow;
    selection-background-color: blue;
}

这里先可以不要理解其它的东西，后面会有对应表，上图中我们选中的字体，就是content 内容，padding 部分就是 参数上，右，底，左的方式，简单记住顺时针方式。border，就是上面灰色部分，我们可以修改 padding最后一个参数为30，看看效果。

我们可以看到明显的向右移动内容。这下有关盒子模型基本都了解了吧，

QSS基本写法：

selector {property: value}

 举例：

QLineEdit
{
	background:yellow;
}

多个选择器可以并列使用，它们之间用逗号隔开。

QPushButton,QLineEdit, QComboBox{ color: red }

如果是指定莫个选择器中的单独一个控件：

QLineEdit#lineEdit
{
	background:yellow;
}

其中 lineEdit 是对应的一个对象，我们常用# 加对象名字。

对应状态：

selector：status {property: value}

举例,当鼠标移动button上时候，颜色变成红色：

QPushButton:hover
{
    color:red;
}

子控件，当控件里面有子控件可以这样用：

QComboBox::drop-down
{
    
}

下面是常用的属性表：

属性	说明
background	在一个声明中设置所有的背景属性
background-color	设置元素的背景颜色。
background-image	用于背部图片，可用于background-color添加透明度，QFrame{background-image: url(:/images/xxx.png);  }
background-repeat	无论是否指定重复的填充背景图片，用于盒模式，在没有指定的时候会（x,y）方向开始重复，使用方式 background-repeat：repeat-y;  延Y的背景图片。
background-position	在盒子模型中指定位置图片的开始，background-position:bottom left; 显示在左下角开始显示
background-attachment	描述背景图片是否在QAbstractScrollArea 的区域跟滚动条滚动，fixed是图片不跟滚动条
background-clip	规定背景的绘制区域。
background-origin	规定背景图片的定位区域。
background-size	规定背景图片的尺寸。

常见的border 属性：

border	设置部件的外框线
border-top	简单设计部件上部的外框线
border-right	简单设计部件右部的外框线
border-bottom	简单设计部件底部的外框线
border-left	简单设计部件左部的外框线
border-color	设计部件外框线的颜色
border-top-color	设计部件上部的外框线颜色
border-right -color	设计部件右部的外框线颜色
border-bottom-color	设计部件底部的外框线颜色
border-left-color	设计部件左部的外框线颜色
border-image	设置4个角位置的image
border-radius	外框线的角度
border-top-left-radius	左上角的弧度
border-top-right-radius	右上角的弧度
border-bottom-left-radius	左下角的弧度
border-bottom-right-radius	右下角的弧度
border-style	设置四条边框的样式。
border- top-style	这里top 可以写成 left bottom right，表示对应部分的样式
border-width	设置边框的宽度值

常用的font属性：

font	在一个声明中设置所有字体属性。
font-family	字体集
font-size	文本字体大小
font-style	文本样式
font-weight	文本字体的磅数

目前暂时记录到这里，后期有时间给大家继续更新，qt样式，让我们写出来更加漂亮的界面。