一、Qt样式表句法 1、一个样式法则由一个选择器(selector)和一些声明(declaration)组成。 a-选择器表明样式声明应用于选择器对应的类，或其子类。 b-声明由属性和值组成，属性有多个值时， 用空格隔开， 每条声明法则用分号结束。 2、选择器(selector) 2.1 Qt样式表支持CSS2定义的所有选择器。 选择器 # 例子 # 用途 通用选择器 # * # 所有组件 类型选择器 # ClassName # 所有ClassName类及其子类的组件 属性选择器 # ClassName[flat="false"] # 所有flat属性为false的ClassName类及其子类的组件。如果样式表应用后组件的属性再发生变化，需要重新应用样式表才能刷新显示效果。 非子类选择器 # .ClassName # 所有ClassName类的组件，但不包括其子类组件 ID选择器 # ClassName#className # ObjectName为className的ClassName实例 从属对象选择器 # ClassName1 ClassName2 # 所有从属于ClassName1的ClassName2的实例 子对象选择器 # ClassName1>ClassName2 # 所有直接从属于ClassName1的ClassName2的实例 3、QOjbect::setProperty()设置动态属性。 4、选择器可组合使用同一声明，多个选择器用逗号分隔。 5、子控件(sub-controls) 对组合的界面组件的子控件进行选择 5.1 "::"域解析符标识子控件。如：QComboBox::drop-down; QSpinBox::up-button; QSpinBox::down-button 5.2 常见子控件列表 子控件名 # 说明 branck # QTreeView的分支指示器 section # QHeaderView的分段 up-arrow # QHeaderView(排序指示器), QScrollBar, QSpinBox的向上箭头 down-arrow # QHeaderView(排序指示器), QComboBox, QScrollBar, QSpinBox的下拉箭头[箭头并非下拉按钮] up-button # QSpinBox, QScrollBar的向上的按钮 [按钮并非向上的箭头] down-button # QSpinBox, QScrollBar的向下的按钮 indicator # QAbstractItemView, QCheckBox, QRadioButton, 可勾选的QMenu菜单项， 可勾选的QGroupBox的指示器 icon # QAbstractItemView, QMenu的图标 item # QAbstractItemView, QMenuBar, QStatusBar的一个项 text # QAbstractItemView的文字 right-arrow # QMenu, QScrollBar的向右箭头 left-arrow # QMenu, QScrollBar的向左箭头 separator # QMenu, QMainWindow的分隔器 handle # QScrollBar, QSplitter, QSlider的滑块 chunk # QProgressBar的进度显示快 groove # QSlider的凹槽 menu-arrow # 具有下拉菜单的QToolButton的下拉箭头 menu-button # QToolButton的菜单按钮 menu-indicator # QPushButton的菜单指示器 close-button # QTabBar, QDockWidget页面的关闭按钮 pane # QTabWidget的面板 tab # QTabBar, QToolBox的分页 tab-bar # QTabWidget的分页条。 这个子控件只用于控制QTabBar在QTabWidgegt中的位置，定义分页的样式使用tab子控件 6、伪状态(pseudo-states) 6.1 选择器可以包含伪状态，使得样式法则只能应用于界面组件的某个状态， 也就是一种条件应用法则。伪状态跟在选择器后边，用“:”分隔 6.2 伪状态可以取反， 在伪状态前边加一个感叹号"!" 6.3 伪状态可以串联使用， 相当于逻辑与的计算。 例如：QCheckBox:hover:checked{color:red;} 鼠标移动到被勾选的QCheckBox组件上方时文字变红。 6.4 伪状态可以并联使用， 相当于逻辑或的计算。 例如：QCheckBox:hover, QCheckBox:checked{color:red;} 鼠标移动到组件上方，或组件被勾选 6.5 子控件可以使用伪状态。 例如：QCheckBox::indicator:checked{image:url(...);} 组件的子控件在checked状态下显示的图片 6.6 常见的伪状态 伪状态 # 描述 active # 当组件处于一个活动的窗体时， 此状态为真 alternate # 当QAbstractItemView的alternatingRowColors()属性为true时， 绘制交替的行时此状态为真 exclusive # 条目是一个排他性组的一部分， 如：排他性QActionGroup的一个项 flat # 条目是flat的， 如:QPushButton的flat属性设置true时 default # 条目是缺省的， 如：一个缺省的QPushButton按钮， 或QMenu中一个缺省的action has-children # 条目有子条目， 如：QTreeView的一个节点具有子节点 open # 条目处于打开状态， 如：QTreeView的一个展开的条目 close # 条目处于关闭状态， 如：QTreeView的一个没有展开的条目 off # 对于可以切换状态的条目， 其状态处于"off" on # 对于可以切换状态的条目， 其状态处于"on" adjoins-item # QTreeView::branch与一个条目相邻时， 状态为真(真实描述：item左侧到顶的空白区域 background-color:blue;) enabled # 条目被使能 disabled # 条目被禁用 editable # QComboBox是可编辑的 edit-focus # 条目有编辑焦点 movable # 条目是可移动的 read-only # 条目只读或不可编辑 top # 组件处于顶端， 如QTabBar的页头位于顶端 bottom # 组件处于底部，如QTabBar的标头位于底部 checked # 组件处于被勾选状态， 如QAbstractButton的checked属性为true unchecked # 组件处于未被勾选状态 selected # 条目被选中， 如：QTabBar中一个被选中的页， 或QMenu中被选中的菜单项 horizontal # 条目具有水平方向 vertical # 条目具有垂直方向 hover # 鼠标移动到条目上方时 pressed # 鼠标按下时 first # 第一个项， 如：QTabBar中的第一个页 last # 最后一个项， 如：QTabBar中最后一个项 left # 条目位于左侧， 如：QTabBar的页头位于左侧 right # 条目位于右侧， 如：QTabBar的页头位于右侧 maximized # 条目处于最大化， 如：最大化的QMdiSubWindow窗口 minimized # 条目处于最小化， 如：最小化的QMdiSubWindow窗口 7、属性 在Qt帮助文件中查找"Qt Style Sheets Reference"查看所有属性的详细说明。 7.1 每一个界面组件，都可以用盒子模型(Box Model)来表示， 模型由四个同心矩形表示。 margin; border; padding; content; 7.2 content-内容区域 min-width; max-width; min-height; max-height; 7.3 padding-包围content的矩形区域 padding-top; padding-bottom; padding-left; padding-right; 7.4 border-包围padding的矩形区域 border-width; border-style; border-color; border-radius; border-image 使边框转角半径等于content宽度或长度的一半，宽度和长度相等，就可以得到一个圆形按钮。 7.5 margin-border之外与父组件之间的空白边距 margin-top; margin-bottom; margin-left; margin-right; 7.6 缺省情况下， margin, border-width, padding属性缺省值为零，四个同心矩形就是重合的一个矩形。 7.7 常用的属性表 属性名 color; //前景色 background-color; //背景色 selection-color; selection-backgroun-color; 7.8 qss文件的使用 QFile file(.../xxx.qss); file.open(QFile::ReadOnly); QString styleSheet = QString::fromLatin1(file.readAll()); qApp->setStyleSheet(styleSheet); 8、样式定义的明确性 8.1 多条样式法则对同一属性定义不同值时，选择器的明确性(specificity)决定法则应用于更明确的控件。 8.2 具有伪状态的选择器被认为比没有伪状态的选择器明确性更强。 8.3 两个选择器具有相同的明确性， 则以法则出现的先后顺序为准，后出现的法则起作用。 QPushButton:hover{color:white;} QPushButton:enabled{color:red;} 当鼠标停留在一个使能按钮上时，只有第二条法则起作用，如果不希望出现冲突，应使法则更明确，如下 QPushButton:hover:enabled{color:white;} QPushButton:enable{color:red;}; 8.4 针对8.3，值得注意的是， 父子关系的两个类作为选择器时，具有相同的明确性。 QPushButton{color:red;} QAbstractButton{color:gray;} 依赖于先后顺序，显示为灰色。 9、样式定义的级联性 9.1 样式定义可以在qApp、窗口或一个具体组件中定义， 任何一个组件的样式是其父组件、父窗口和qApp的样式融合。当出现冲突时， 组件会使用离自己最近的样式定义，即按顺序使用组件自己的样式、或父组件的样式定义、或窗口的样式定义， 或qApp的样式定义，而不考虑选择器的确定性。 9.2 !!!样式定义的级联性， 不会考虑样式选择器的确定性。 10、qss文件的注释 /*Tree header*/ --正确 //Tree header --错误，会导致后边的qss无效 11、qss调试的好办法 做项目时，调试qss, 修改某局部qss，而重新构建整个项目才能看出修改效果的方法，实在是耗时低效。 一个好的办法是，再启动一个Qt Creator创建一个test工程，添加一个QWidget设计界面，拖一个要美化的控件组件，右键级联方式，实时查看修改后的效果是否满意，满意后，再把样式拷贝到项目中。完美。 二、应用于不同平台的外观样式设置 QStyle