目录
一、盒子模型
二、选择器
三、伪状态
四、字体
五、边框
六、背景
七、边距
八、示例大全
一、盒子模型
二、选择器
| 选择器 | 示例 | 描述 |
|---|---|---|
| 通用选择器 | * | 匹配所有控件 |
| 类型选择器 | 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的博客-CSDN博客_qt如何批量设置css字体属性：(font)大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)行高 {line-height: normal;}(正常) 单位：PX、PD、EM粗细 {font-whttps://blog.csdn.net/u013968786/article/details/51295744
![[ 代码审计篇 ] 代码审计案例详解(二) XXE代码审计案例](https://img-blog.csdnimg.cn/e74f571168c04f0ea4bff15a3b30574f.png)
