Qt第五十一章：Qt样式表-Qss

拼搏现实的明天。 2024-03-30 12:35 9阅读 0赞

**目录**

一、盒子模型

二、选择器

三、伪状态

四、字体

五、边框

六、背景

七、边距

八、示例大全

--------------------

#### 一、盒子模型 ####

![1033cf705c4e7619186ee93a9ee1ddd5.png][]

#### 二、选择器 ####

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>示例</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>通用选择器</td> 
   <td>*</td> 
   <td>匹配所有控件</td> 
  </tr> 
  <tr> 
   <td>类型选择器</td> 
   <td>QPushButton</td> 
   <td>匹配给定类型控件，包括子类</td> 
  </tr> 
  <tr> 
   <td>类选择器</td> 
   <td>.QPushButton</td> 
   <td>匹配给定类型控件，不包括子类</td> 
  </tr> 
  <tr> 
   <td>属性选择器</td> 
   <td>QPushButton[flat=“false”]</td> 
   <td>匹配给定类型控件中符合[属性]的控件</td> 
  </tr> 
  <tr> 
   <td>ID选择器</td> 
   <td>QPushButton#button_close</td> 
   <td>匹配给定类型，且对象名为button_close的控件</td> 
  </tr> 
  <tr> 
   <td>子对象选择器</td> 
   <td>QDialog&gt;QPushButton</td> 
   <td>匹配给定类型的直接子控件</td> 
  </tr> 
  <tr> 
   <td>子孙对象选择器</td> 
   <td>QDialog QPushButton</td> 
   <td>匹配给定类型的子孙控件</td> 
  </tr> 
  <tr> 
   <td>辅助(子控件)选择器</td> 
   <td>QComboBox::drop-down</td> 
   <td>复杂对象的子控件</td> 
  </tr> 
  <tr> 
   <td>伪状态选择器</td> 
   <td>QPushButton:hover</td> 
   <td>控件的特定状态下的样式</td> 
  </tr> 
  <tr> 
   <td>多选择器</td> 
   <td> <p>QPushButton#button_send_captcha:hover,</p> <p>QPushButton#button_register:hover</p> <p>{ <br> &nbsp; &nbsp; color: rgb(65, 65, 65);<br> }</p> </td> 
   <td>多个选择器取并集，用逗号隔开</td> 
  </tr> 
 </tbody> 
</table>

#### 三、伪状态 ####

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>状态</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:disabled</td> 
   <td>控件禁用</td> 
  </tr> 
  <tr> 
   <td>:enabled</td> 
   <td>控件启用</td> 
  </tr> 
  <tr> 
   <td>:focus</td> 
   <td>控件获取输入焦点</td> 
  </tr> 
  <tr> 
   <td>:hover</td> 
   <td>鼠标在空间上悬停</td> 
  </tr> 
  <tr> 
   <td>:pressed</td> 
   <td>鼠标按下</td> 
  </tr> 
  <tr> 
   <td>:checked</td> 
   <td>控件被选中</td> 
  </tr> 
  <tr> 
   <td>:unchecked</td> 
   <td>控件没有选中</td> 
  </tr> 
  <tr> 
   <td>:indeterminate</td> 
   <td>控件部分被选中</td> 
  </tr> 
  <tr> 
   <td>:open</td> 
   <td>控件打开</td> 
  </tr> 
  <tr> 
   <td>:closed</td> 
   <td>控件关闭</td> 
  </tr> 
  <tr> 
   <td>:on</td> 
   <td>控件可以切换，且处于on状态</td> 
  </tr> 
  <tr> 
   <td>:off</td> 
   <td>控件可以切换，且处于off状态</td> 
  </tr> 
  <tr> 
   <td>!</td> 
   <td>对以上状态的非状态</td> 
  </tr> 
 </tbody> 
</table>

#### 四、字体 ####

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>示例</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>font-family</td> 
   <td>font-family: 楷体, serif;&nbsp;</td> 
   <td>字体类型</td> 
  </tr> 
  <tr> 
   <td>font-size</td> 
   <td>font-size: 18px;</td> 
   <td>字体大小</td> 
  </tr> 
  <tr> 
   <td>font-style</td> 
   <td>font-style:italic;</td> 
   <td> <p>字体风格</p> <p>italic 为斜体</p> <p>normal 为不斜体</p> </td> 
  </tr> 
  <tr> 
   <td>font-weight</td> 
   <td>font-weight: bold;</td> 
   <td> <p>字体加粗</p> <p>bold 为加粗</p> <p>normal 为不加粗</p> </td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>color:rgba(255,100,0,100%);</td> 
   <td>字体颜色</td> 
  </tr> 
  <tr> 
   <td>letter-spacing</td> 
   <td>letter-spacing: 10px;</td> 
   <td>字间距</td> 
  </tr> 
  <tr> 
   <td>line-height</td> 
   <td>line-height: 50px;</td> 
   <td>行高</td> 
  </tr> 
 </tbody> 
</table>

#### 五、边框 ####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>示例</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-style</td> 
   <td>border-style: solid;</td> 
   <td> <p>边框风格:</p> <p>无边框none、点状dotted、虚线dashed、实线solid、</p> <p>双线double、3d凹槽groove、3d垄状ridge、3d内嵌inset、</p> <p>3d外嵌outset、父样式inherit</p> </td> 
  </tr> 
  <tr> 
   <td>border-width</td> 
   <td>border-width: 2px;</td> 
   <td>边框宽度</td> 
  </tr> 
  <tr> 
   <td>border-color</td> 
   <td>border-color: blue;</td> 
   <td>边框颜色</td> 
  </tr> 
  <tr> 
   <td>border-radius</td> 
   <td>border-radius: 10px;</td> 
   <td>边框圆角</td> 
  </tr> 
  <tr> 
   <td>border-top-width</td> 
   <td>border-top-width: 2px;</td> 
   <td>顶部边框的宽度</td> 
  </tr> 
  <tr> 
   <td>border-top-left-radius</td> 
   <td>border-top-left-radius: 10px;</td> 
   <td>左上角圆角</td> 
  </tr> 
  <tr> 
   <td>border-left-color</td> 
   <td>border-left-color: blue;</td> 
   <td>左边框颜色</td> 
  </tr> 
 </tbody> 
</table>

#### 六、背景 ####

<table style="width:600px;"> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>示例</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>background-color</td> 
   <td> <p>background-color: rgb(232, 248, 78);</p> <p>background-color: transparent;透视</p> </td> 
   <td>背景颜色</td> 
  </tr> 
  <tr> 
   <td>background-image</td> 
   <td>background-image: url("./image.png");</td> 
   <td>背景图片</td> 
  </tr> 
  <tr> 
   <td>background-repeat</td> 
   <td>background-repeat: no-repeat;</td> 
   <td> <p>no-repeat 不重复</p> <p>repeat-x 在x轴重复</p> <p>repeat-y 在y轴重复</p> </td> 
  </tr> 
  <tr> 
   <td>background-position</td> 
   <td>background-position: left center;</td> 
   <td> <p>显示位置</p> <p>left right top bottom center；</p> <p>left right center 水平位置，</p> <p>top bottom center 垂直位置</p> </td> 
  </tr> 
  <tr> 
   <td>min-width: 100px;</td> 
   <td>min-width: 100px;</td> 
   <td>最小宽度</td> 
  </tr> 
  <tr> 
   <td>max-width</td> 
   <td>max-width: 400px;</td> 
   <td>最大宽度</td> 
  </tr> 
  <tr> 
   <td>min-height</td> 
   <td>min-height: 20px;</td> 
   <td>最小高度</td> 
  </tr> 
  <tr> 
   <td>max-height</td> 
   <td>max-height: 50px;</td> 
   <td>最大高度</td> 
  </tr> 
 </tbody> 
</table>

#### 七、边距 ####

<table style="width:600px;"> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>示例</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>padding-top</td> 
   <td>padding-top:10px;</td> 
   <td>内边距-上边距</td> 
  </tr> 
  <tr> 
   <td>padding-left</td> 
   <td>padding-left:10px;</td> 
   <td>内边距-左边距</td> 
  </tr> 
  <tr> 
   <td>padding-right</td> 
   <td>padding-right:10px;</td> 
   <td>内边距-右边距</td> 
  </tr> 
  <tr> 
   <td>padding-bottom</td> 
   <td>padding-bottom:10px;</td> 
   <td>内边距-下边距</td> 
  </tr> 
  <tr> 
   <td>margin-top</td> 
   <td>margin-top:10px;</td> 
   <td>外边距-上边距</td> 
  </tr> 
  <tr> 
   <td>margin-right</td> 
   <td>margin-right:10px;</td> 
   <td>外边距-右边距</td> 
  </tr> 
  <tr> 
   <td>margin-bottom</td> 
   <td>margin-bottom:10px;&nbsp;&nbsp; &nbsp;</td> 
   <td>外边距-下边距</td> 
  </tr> 
  <tr> 
   <td>margin-left</td> 
   <td>margin-left:10px;</td> 
   <td>外边距-左边距</td> 
  </tr> 
 </tbody> 
</table>

#### 八、示例大全 ####

[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-w![favicon32.ico][]https://blog.csdn.net/u013968786/article/details/51295744][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-w_favicon32.ico_https_blog.csdn.net_u013968786_article_details_51295744]

[1033cf705c4e7619186ee93a9ee1ddd5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/41df160bec504519b26959ba258f2c2e.png
[favicon32.ico]: https://g.csdnimg.cn/static/logo/favicon32.ico
[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-w_favicon32.ico_https_blog.csdn.net_u013968786_article_details_51295744]: https://blog.csdn.net/u013968786/article/details/51295744