目录
一、盒子模型
二、选择器
三、伪状态
四、字体
五、边框
六、背景
七、边距
八、示例大全
一、盒子模型
二、选择器
选择器 | 示例 | 描述 |
通用选择器 | * | 匹配所有控件 |
类型选择器 | QPushButton | 匹配给定类型控件，包括子类 |
类选择器 | .QPushButton | 匹配给定类型控件，不包括子类 |
属性选择器 | QPushButton[flat=“false”] | 匹配给定类型控件中符合[属性]的控件 |
ID选择器 | QPushButton#button_close | 匹配给定类型，且对象名为button_close的控件 |
子对象选择器 | QDialog>QPushButton | 匹配给定类型的直接子控件 |
子孙对象选择器 | QDialog QPushButton | 匹配给定类型的子孙控件 |
辅助(子控件)选择器 | QComboBox::drop-down | 复杂对象的子控件 |
伪状态选择器 | QPushButton:hover | 控件的特定状态下的样式 |
多选择器 | QPushButton#button_send_captcha:hover, QPushButton#button_register:hover { | 多个选择器取并集，用逗号隔开 |
三、伪状态
状态 | 描述 |
:disabled | 控件禁用 |
:enabled | 控件启用 |
:focus | 控件获取输入焦点 |
:hover | 鼠标在空间上悬停 |
:pressed | 鼠标按下 |
:checked | 控件被选中 |
:unchecked | 控件没有选中 |
:indeterminate | 控件部分被选中 |
:open | 控件打开 |
:closed | 控件关闭 |
:on | 控件可以切换，且处于on状态 |
:off | 控件可以切换，且处于off状态 |
! | 对以上状态的非状态 |
四、字体
属性 | 示例 | 描述 |
font-family | font-family: 楷体, serif; | 字体类型 |
font-size | font-size: 18px; | 字体大小 |
font-style | font-style:italic; | 字体风格 italic 为斜体 normal 为不斜体 |
font-weight | font-weight: bold; | 字体加粗 bold 为加粗 normal 为不加粗 |
color | color:rgba(255,100,0,100%); | 字体颜色 |
letter-spacing | letter-spacing: 10px; | 字间距 |
line-height | line-height: 50px; | 行高 |
五、边框
属性 | 示例 | 描述 |
border-style | border-style: solid; | 边框风格: 无边框none、点状dotted、虚线dashed、实线solid、 双线double、3d凹槽groove、3d垄状ridge、3d内嵌inset、 3d外嵌outset、父样式inherit |
border-width | border-width: 2px; | 边框宽度 |
border-color | border-color: blue; | 边框颜色 |
border-radius | border-radius: 10px; | 边框圆角 |
border-top-width | border-top-width: 2px; | 顶部边框的宽度 |
border-top-left-radius | border-top-left-radius: 10px; | 左上角圆角 |
border-left-color | border-left-color: blue; | 左边框颜色 |
六、背景
属性 | 示例 | 描述 |
background-color | background-color: rgb(232, 248, 78); background-color: transparent;透视 | 背景颜色 |
background-image | background-image: url("./image.png"); | 背景图片 |
background-repeat | background-repeat: no-repeat; | no-repeat 不重复 repeat-x 在x轴重复 repeat-y 在y轴重复 |
background-position | background-position: left center; | 显示位置 left right top bottom center； left right center 水平位置， top bottom center 垂直位置 |
min-width: 100px; | min-width: 100px; | 最小宽度 |
max-width | max-width: 400px; | 最大宽度 |
min-height | min-height: 20px; | 最小高度 |
max-height | max-height: 50px; | 最大高度 |
七、边距
属性 | 示例 | 描述 |
padding-top | padding-top:10px; | 内边距-上边距 |
padding-left | padding-left:10px; | 内边距-左边距 |
padding-right | padding-right:10px; | 内边距-右边距 |
padding-bottom | padding-bottom:10px; | 内边距-下边距 |
margin-top | margin-top:10px; | 外边距-上边距 |
margin-right | margin-right:10px; | 外边距-右边距 |
margin-bottom | margin-bottom:10px; | 外边距-下边距 |
margin-left | margin-left:10px; | 外边距-左边距 |
八、示例大全
Qt css样式大全(整理版）_xiao_-_zhu的博客-_qt如何批量设置css字体属性：(font)大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)行高 {line-height: normal;}(正常) 单位：PX、PD、EM粗细
