1、选择器
1.1、通用选择器
/*
格式：* { 属性: 值; }
通用选择器一般用来给应用程序设置统一的字体，大小，颜色等
*/
* {font-family: "Microsoft YaHei";outline: 0px;color: #DCDCDC;
}
1.2、类型选择器
/* 格式： 类名 { 属性: 值; } */
/* 类名即 Widget 类名, 由 QObject :: metaObject() :: className()获取, 类型选择器匹配所有该类以及该类的派生类的对象 */
QPushButton {color: blue;
}
/* 程序中所有的 QPushButton 类和它的派生类的对象, 它们的前景色(即文字颜色)被设置为蓝色 */
/* 一般用于为控件做统一初始化 */
/*
注意点：
当自定义控件在命名空间之中(或它是一个嵌套类)，QObject::className()会返回(::)，与子控件选择器
相冲突当为命名空间中 widget 使用类型选择器时, 我们必须将” :: ”替换成” -- ”
*/
namespace ns {class MyPushButton : public QPushButton {}
}qApp->setStyleSheet("ns--MyPushButton { background: yellow; }");
1.3、类选择器
/* 格式：.类名 { 属性: 值; } */
/* 类名与类型选择器中的类名一样，前面的.表示只匹配该类的所有对象，而不匹配其派生类对象 */
.QPushButton {color: blue;
}/* 比如当用QFrame做容器时可以用它来只对QFrame做样式，而不对其派生类(QLabel, QAbstractScrollArea 等等)生效 */
1.4、ID 选择器
/* 格式：#id{ 属性: 值; } */
/* id 指的是 objectName, 每个 QObject 类及其派生类都有的一个属性 */
#button {color: red;
}/* 一般用于特殊控件，比如登录按钮等 */
/*
注意点:1. objectName 是大小写敏感的.2. “#”与 ID 之间不可以有空格3. 由于 objectName 是所有 QObject 类对象的一个属性, 在运行过程中可以改变, 所以一般情况下, 要使用 ID 选择器时, 保证 objectName 不要在运行时被改变, 否则重新加载stylesheet 文件时, 对应的 ID 选择器将不会匹配到原来的控件.4. 由于 objectName 允许字符串中含有空格, 但是 ID 选择器中, ID 是从紧跟#后的第一个字符开始直到遇到空格或“{”之间的字符串, 因此, 如果是为了使用 ID 选择器而设置objectName, 则 objectName 中不能含有空格5. 由于任何对象的 objectName 都可以出现重复, 因此在设置 objectName 时, 尽量保持其唯一性6. Qt 官方给出的 ID 选择器的格式为:类名#id{ 属性: 值; }但实际上不加类名也是可以的(加了类名的 ID 选择器在 CSS 中被称为交集选择器),在正式开发中, 还是建议加上类名, 因为这样可以看出这个 id 选择器所匹配的对象的类型,有利于提高阅读性.
*/
1.5、后代选择器
/* 格式：选择器 1 选择器 2{ 属性: 值; } */
/* 在选择器 1 匹配的所有对象中, 找到选择器 2 所匹配的所有后代对象 */
/*
注意点：
注意点:1. 后代选择器必须用空格隔开每个选择器2. 后代选择器可以通过空格一直延续下去, 例如:选择器 1 选择器 2 选择器 3 … 选择器 N{ 属性: 值; }3. 顾名思义, 后代选择器不仅包含”儿子”, 还包含”孙子”, “重孙子”等, 一般来说, 只要 B 控件显示在 A 控件上, 那么 B 控件就是 A 控件的后代.4. 后代选择器不仅可以使用类型选择器, 还可以使用类选择器, id 选择器等.5. Qt 中, 各控件的父子关系:通过简单的验证, 各控件的父子关系并非我们在创建对象时所指定的那样, 实际父子关系取决于如何布局.
*//*
用途：对多个相似对话框中的一个按钮进行样式修改时可以选择后代选择器
*/
BaseDialog QPushButton{min-width: 120px;min-height: 40px;max-width: 120px;max-height: 40px;font-size: 20px;padding: 0px;
}1.6、子元素选择器
/* 格式：选择器 1 >选择器 2 { 属性: 值; } */
/* 子元素选择器表示找到指定选择器所匹配的对象中的所有特定直接子元素然后设置属性,
即找到选择器 1 匹配到的对象中的被选择器 2 匹配到的直接子元素然后设置属性 *//*
注意点1. 子元素选择器必须用”>”连接, “>”两边有没有空格都可以, 但是不建议写空格, 因为会与后代选择器的连接符混淆.2. 子元素选择器只会查找”儿子”, 不会查找其他后代.3. 子元素选择器不仅可以使用类型选择器, 还可以使用类选择器,id 等选择器4. 子元素选择器不能通过”>”一直延续下去, 只能有一个”>”5. 由于 Qt 中有继承关系的 Widgets 较多, 在使用子元素选择器时, 请特别注意继承关系,比如我只想选中 QGroupBox 中的 QPushButton, 那么我即可以写成QWidget >QPushButton{color: red;} o1也可以写成QGroupBox>QPushButton{color: red;} o2这是因为 QGroupBox 是 QWidget 的派生类, 类型选择器 QWidget 会选中所有它的派生类对象,这些对象中包括 QGroupBox, 因此写法o1 会将所有的 QPushButton 的前景色设置为红色.鉴于此种情况, 我推荐在使用子元素选择器时, 使用类选择器替代类型选择器
*//* 例如我想给直接布局在 QGroupBox 的QCheckBox 设置一些特定属性 */
.QGroupBox > .QCheckBox {color: blue;
}1.7、属性选择器
/*
格式：[attribute=value]{ 属性: 值; }[attribute|=value]{ 属性:值; }[attribute~=value]{ 属性:值; }attribute=value 表示匹配有特定属性 attribute, 并且值为 value 的所有控件, 然后设置样式;
attribute|=value 表示匹配有特定属性 attribute, 并且值以 value 开头的所有控件, 然后设置样式;
attribute~=value 表示匹配有特定属性 attribute, 并且值包含 value 的所有控件, 然后设置样式;
*//*
注意点
1. attribute|=value 表示 attribute 属性的值以 value 开头, 无论 value 后面还有没有值, 或者
value 后面是什么, 均能匹配到
*/[objectName|="button"]{color: red;
}
/* 这表示将 objectName 属性以 button 开头的所有控件的前景色设置为红色 *//* attribute~=value 表示 attribute 属性的值中包含 value, 这里要注意的是:value 必须是独
立的单词, 也就是包含 value 并且 value 是被空格隔开的 */
1.8、并集选择器
/* 格式：选择器 1,选择器 2,选择器 3{ 属性: 值; } */.QLineEdit, .QComboBox{border: 1px solid gray;background-color:white;
}
1.9、子控件选择器
/*
格式：类型选择器::子控件{ 属性: 值; }类选择器::子控件{ 属性: 值; }
*//* QComboBox 的 drop-down 部分 */
QComboBox::down-arrow{image: url(:/res/arrowdown.png);
}
QComboBox::down-arrow:pressed {position: relative;top: 1px; left: 1px;
}
1.10、伪类选择器
/*
格式：类型选择器:状态{ 属性: 值; }类选择器:状态{ 属性: 值; }冒号两边不可有空格
*/QPushButton:hover { color: white }
/* 伪状态可以使用感叹号进行取反 */
QRadioButton:!hover { color: red }
/* 伪状态可以链接，在这样的情况下，隐式地包含了逻辑与 */
QCheckBox:hover:checked { color: white }
/* 上面表示在鼠标悬浮到一个已 check 的 QCheckBox 上时生效 *//* 支持并集选择器及子控件选择器 */
QCheckBox:hover, QCheckBox:checked { color: white }
QComboBox::drop-down:hover { image: url(dropdown_bright.png) }
2、属性
2.1、背景属性 background
连写格式:background: color image repeat position;
背景共有 7 个属性, 既可以每个属性单独设置, 也可以连写
background-color
设置控件的背景颜色, 默认是 border 之内的矩形区域, 包括内边距和内容矩形
background-image
格式是 url(filename), filename 是一个本地文件路径或 Qt 资源文件路径, 不支持网络图片；
设置控件的背景图片. 可以与背景颜色共存, 背景图片会覆盖背景颜色
background-repeat
repeat-x: 在水平方向上平铺
repeat-y: 在垂直方向上平铺
repeat: 在水平和垂直方向上都平铺, 这是默认值(但是 Qt 好像有 bug, 设置了 repeat 反
而不会平铺, 不设置才平铺)
no-repeat: 不平铺
作用: 设置背景图片的平铺方式.
background-position
top: 向上对齐 left: 向左对齐
bottom: 向下对齐 right:向右对齐
center: 居中
格式：background-position: 水平对齐方式 垂直对齐方式;
background-attachment
scroll : 滚动, 这是默认值
fixed: 固定
设置背景图片在带滚动条的控件(QAbstractScrollArea)中是固定在一个位置还是随着滚动条滚动.
background-clip
margin: 外边距矩形
border: 边框矩形
padding: 内边距矩形
content: 内容矩形
设置背景颜色覆盖的区域, 默认情况下背景只覆盖内边距矩形, 如果没有指定, 默认值为 border
background-origin
margin: 外边距矩形
border: 边框矩形
padding: 内边距矩形
content: 内容矩形
与 background-position 和 background-image 一起使用, 指明背景图片的覆盖范围矩形,如果没有指定, 默认为 padding
2.2、前景色 color
color 设置的前景色, 也就是控件文字的颜色, color 属性是被所有 widget 都支持的
2.3、边框属性 border
连写格式：border: width style color;
border-width
像素宽度, 数值后面一定要加上像素单位 px
border-style
取值: dashed，dot-dash，dot-dot-dash，dotted，double，groove，inset，outset，ridge，solid，none
设置边框的渲染样式
border-color
设置边框的颜色
border-radius
取值: 水平半径 垂直半径;均是以像素为单位, 值必须带 px, 第二个值是可选的,
如果只有一个值, 表示同时水平半径和垂直半径
border-image
格式：border-image: border-image-source border-image-slice border-image-repeat
border-image-source: 图片路径
border-image-slice: 图片切片, 单位只能是像素值, 因此数值不必带单位 px
border-image-repeat：指定边框图片的四条边和四个角的平铺方式。
有三种取值, 分别为 stretch(默认), round(均分平铺), repeat(平铺).
stretch 表示拉伸四条边相应的切片图片,来填补边框的间隙.
round 是把四个角和四条边分成均等区域然后用背景图片切好能铺满整个边框空隙, 不能多也不能少
repeat 是做直接复制填满空隙
单些格式：
border-top-width border-top-style border-top-color
border-right-width border- right -style border- right -color
border-bottom-width border- bottom -style border- bottom -color
border-left-width border- left -style border- left -color
2.4、字体属性 font
连写格式：font: style weight size family
font-style
设置字体风格。normal: 正常，italic: 斜体，oblique: 倾斜的字体
Italic 是使用文字的斜体，Oblique 是让没有斜体属性的文字倾斜
一些不常用的字体，或许就只有个正常体，如果你用 Italic，就没有效果了,这时候就要用 Oblique
font-weight
设置文字的粗细；三种方式：normal: 正常粗细、bold: 加粗、数值(数越大字越粗)
font-size
设置字体大小。单位有px，pt，px常用
font-family
设置字体样式。（QSS 中 font-family 只能指定一种字体）
微软雅黑： Microsoft YaHei
宋体：SimSun
黑体：SimHei
仿宋： FangSong
楷体： KaiTi
隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei
2.5、文本属性
text-align
设置文本的对齐方式。top, bottom, left, right, center
格式：text-align: 水平对齐方式 垂直对齐方式;
支持这个属性的控件目前只有 QPushButton 和 QProgressBar
text-decoration
给文本添加装饰。none: 没有装饰；underline: 下划线；overline: 上划线；line-through: 删除线
padding
padding: 上 右 下 左;
padding-top: ?px;
padding-right: ?px;
padding-bottom: ?px;
padding-left: ?px;
margin
与padding一致
width, height
这两个属性设置的是盒子内容的宽高.
这两个属性只对子控件选择器选中的对象有效
这两个属性的取值均是像素值, 即数字加像素单位 px
outline
控件有焦点时, 绘制在边框边缘的外围,可起到突出作用
outline
outline-color
outline-offset
outline-style
outline-radius
outline-bottom-left-radius
outline-bottom-right-radius
outline-top-left-radius
outline-top-right-radius
2.6、渐变 Gradient
附录
1、伪态列表
| 伪态 | 描述 |
|---|---|
| :active | 当小部件位于活动窗口中。 |
| :adjoins-item | 当QTreeView的子控件::branch与物体相邻时 |
| :alternate | |
| :bottom | 项目位于底部 |
| :checked | 被选中状态时 |
| :closable | 可关闭状态时 |
| :closed | 关闭状态时 |
| :default | 默认状态 |
| :disabled | 不可使用状态 |
| :editable | 可编辑态时 |
| :edit-focus | 拥有可编辑焦点时 |
| :enabled | 可用状态时 |
| :exclusive | |
| :first | 为第一个时。例如QTabBar的第一个选项卡 |
| :flat | 当为flat态时 |
| :floatable | 可浮动态时 |
| :focus | 拥有输入焦点时 |
| :has-children | 拥有子物体时 |
| :has-siblings | |
| :horizontal | 具有水平方向时 |
| :hover | 悬停在此控件上时 |
| :indeterminate | 拥有不确定态时 |
| :last | 最后一项 |
| :left | 位置位于左侧时 |
| :maximized | 最大化态时 |
| :middle | 在中间时 |
| :minimized | 最小化时 |
| :movable | 可移动态时 |
| :no-frame | 无边框态时 |
| :non-exclusive | |
| :off | 对于可以切换的控件，处于关闭状态时 |
| :on | 对于可切换的控件，处于打开状态时 |
| :only-one | |
| :open | 打开状态时，例如QComboBox具有一个可打开的菜单 |
| :next-selected | |
| :pressed | 当被鼠标按时，可当做clicked事件 |
| :previous-selected | |
| :read-only | |
| :right | |
| :selected | 被选择态 |
| :top | |
| :unchecked | 未被选中态 |
| :vertical | |
| :window |
2、子控件列表
| 子控件 | 描述 |
|---|---|
| ::add-line | 用于添加QScrollBar行的按钮 |
| ::add-page | 手柄（滑块）和QScrollBar的add-line之间的区域 |
| ::branch | QTreeView的分支指示器 |
| ::chunk | QProgressBar的进度块 |
| ::close-button | QDockWidget或QTabBar选项卡的关闭按钮 |
| ::corner | QAbstractScrollArea中两个滚动条之间的角 |
| ::down-arrow | QComboBox、QHeaderView、QScrollBar或QSpinBox的向下箭头 |
| ::down-button | QScrollBar或QSpinBox的向下按钮 |
| ::drop-down | QComboBox的下拉按钮 |
| ::float-button | QDockWidget的浮动按钮 |
| ::groove | QSlider的凹槽 |
| ::indicator | QAbstractItemView、QCheckBox、QRadioButton、可检查QMenu项或可检查QGroupBox的指示器 |
| ::handle | QScrollBar、QSplitter或QSlider的滑块 |
| ::icon | QAbstractItemView或QMenu的图标 |
| ::item | QAbstractItemView、QMenuBar、QMenu或QStatusBar的项 |
| ::left-arrow | QScrollBar的左箭头 |
| ::left-corner | QTabWidget的左角。例如，此控件可用于控制QTabWidget中左角小部件的位置 |
| ::menu-arrow | 带有菜单的QTool按钮的箭头 |
| ::menu-button | QToolButton的菜单按钮 |
| ::menu-indicator | QPushButton的菜单指示器 |
| ::right-arrow | QMenu或QScrollBar的右箭头 |
| ::pane | QTabWidget的窗格 |
| ::right-corner | QTabWidget的右角 |
| ::scroller | QMenu或QTabBar的滚动条 |
| ::section | QHeaderView的部分 |
| ::separator | QMenu或QMainWindow中的分隔符 |
| ::sub-line | 用于减去QScrollBar的一行的按钮 |
| ::sub-page | 手柄和QScrollBar的sub-line之间的区域 |
| ::tab | QTabBar或QToolBox的选项卡 |
| ::tab-bar | QTabWidget的选项卡栏 |
| ::tear | QTabBar的指示器 |
| ::tearoff | QMenu的指示器 |
| ::text | QAbstractItemView的文本 |
| ::title | QGroupBox或QDockWidget的标题 |
| ::up-arrow | QHeaderView、QScrollBar或QSpinBox的向上箭头 |
| ::up-button | QSpinBox的向上按钮 |
