参考博客:https://blog.csdn.net/qq21497936/article/details/79424146
以下内容是摘抄以上大神博客,发现写的很全,所以摘抄做笔记了,谢谢!
一、名词解析
选择器(selector)
选择特定的类,如示例1中的QPushButton#pushButton_shutdown,选择器的选择方式有七种,如下表:
示例:(一)QPusuButton使用选择器
//只针对这个按钮设置颜色
QPushButton#pushButton_4 {
background-color: rgb(255, 255, 0, 100);
}
//指针按钮悬停的效果
QPushButton:hover{
background-color: rgb(255,160, 0); }
QPushButton:pressed {
background-color: red;
}
//针对按钮按下的效果
QPushButton:pressed {
background-color: red;
}
//暂未知
QPushButton:checked {
background-color: red;
}
基本效果如下:
(二) QCheckBox
QCheckBox#checkBox::indicator{
width:10px;
height:10px;
background-color: red;
}
效果如下:
状态选择器(pseudo-states)
状态选择器,可根据不同控件的不同状态对窗口进行控制,如”hover”表示鼠标放上时的状态,”pressed”表示鼠标保持按下时的状态,可根据状态设置不同的外观,如示例1的QPushbutton的三种状态。
属性(property)
属性,是一个窗口部件所固有的特征,每一个类型的窗口控件都会有属于他们自己的属性,如width,height(辅助选择器才有),color等等,定制控件的不同外观。注意:属性是使用逻辑否(!)操作符,如!hover,是鼠标未放在上面的其他状态。
属性值(value)
属性值,跟在每一个属性后面有一个值,可以是bool,int,10px,red,rgb(0,0,0)等等,根据属性的不同,属性值的类型不同,通过修改指定控件的指定属性的属性值来实现不同的效果,如示例1:background-color,实例2:width、height、background-color。
盒模型(box model)
盒模型,包含了4个影响布局的矩形,如下图:
角弧度(radius)
窗口部件4个角弧度,设置radius设置角的弧度,如border-radius:4px。
前景色(color)
窗口部件的前景色用户绘制窗口部件上面的文本,由color设置。
背景色(背景图片)
窗口部件背景色,用于填充矩形,可通过background-color属性设置。当需要使用图片时,可使用background-image属性,指定资源控制,背景图片在盒模式区域的对齐和平铺方式可通过background-position和background-repeadr属性指定。注意:笔者设置背景图一般直接使用border-image,该属性缺省是缺省是进行平铺和拉伸的。
九宫格(border-image,border-width)
用于有边框分割的图像,图像可缩放和平铺其中的每个部分。一个本元素可将图片分成9个区域,四个角区域是不会变化,其他5个区域按照特定的方式进行变化。效果如下图:
使用border-image和border-width属性,语法如下:
QLabel#label_6 {
border-image:url("E:/111.jpg") 18 16 15 14 repeat repeat;
border-width:18 16 15 14;
}