QSS&CSS
  • Jun 18, 2019

主要是记录一下自己子在给客户端美化过程中遇到的一些问题， 以及一些对Qt一些常用控件写好的demo

注意细节区分

关于图像的加载方式区分

  • border-image：图片显示采取拉伸效果为默认缺省
  • background-image：图片显示采取重复效果为默认缺省 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。 图像可以无限平铺、沿着某个轴（x 轴或 y 轴）平铺，或者根本不平铺。

  body
  {
      background-image:url('bgimage.gif');
      background-repeat:no-repeat;     //属性设置是否及如何重复背景图像
      //repeat 默认。背景图像将在垂直方向和水平方向重复。
      //repeat-x 背景图像将在水平方向重复。
      //repeat-y 背景图像将在垂直方向重复。
      //no-repeat 背景图像将仅显示一次。
      //inherit 规定应该从父元素继承 background-repeat 属性的设置。
      background-attachment:fixed;     //属性设置背景图像是否固定或者随着页面的其余部分滚动。
      //scroll  默认值。背景图像会随着页面其余部分的滚动而移动。
      //fixed 当页面的其余部分滚动时，背景图像不会移动。
      //inherit 规定应该从父元素继承 background-attachment 属性的设置。
      background-position:center;     //属性设置背景图像的起始位置。
  }
  • image：图片显示采取原图大小为默认缺省
  • background：包含background-image

padding和margin的区别

padding

在一个声明中设置所有 内边距 属性。

说明： 设置元素所有内边距的宽度，或者设置各边上内边距的宽度。 行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

padding:10px 5px 15px 20px;

margin

在一个声明中设置所有 外边距 属性。

说明: 这个属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。 块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

 margin:10px 5px 15px 20px;

margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

一些基本的属性意思

QSS 一些伪状态

伪状态 描述
:checked button部件被选中
:disabled 部件被禁用
:enabled 部件被启用
:focus 部件获得焦点
:hover 鼠标位于部件上
:indeterminate checkbox或radiobutton被部分选中
:off 部件可以切换，且处于off状态
:on 部件可以切换，且处于on状态
:pressed 部件被鼠标按下
:unchecked button部件未被选中

QSS 子部件描述

子部件 描述
::down-arrow combo box或spin box的下拉箭头
::down-button spin box的向下按钮
::drop-down combo box的下拉箭头
::indicator checkbox、radio button或可选择group box的指示器
::item menu、menu bar或status bar的子项目
::menu-indicator push button的菜单指示器
::title group box的标题
::up-arrow spin box的向上箭头
::up-button spin box的向上按钮

border-style

属性设置一个元素的四个边框的样式。此属性可以有一到四个值。

  • dotted 是点状
  • solid 是实线
  • double 是双线
  • dashed 是虚线

border

简写属性在一个声明设置所有的 边框 属性。

可以按顺序设置如下属性：

  • border-width
  • border-style

  • border-color

    { border: 5px solid red; }

border-radius

属性是一个简写属性，用于设置四个 border-*-radius 属性

该属性允许为元素添加圆角边框！

border-radius: 1-4 length|% / 1-4 length|%;
border-radius:2em;

注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

box-shadow

属性用于向方框添加阴影：

box-shadow：100px 100px 10px #888888;
- 前2个px是阴影的偏离位置
- 第3个px是阴影的模糊程度
- 最后一个参数是阴影的颜色

font

  • font-size 字体大小

  • font-family 字体类型

    font:14px “Microsoft YaHei”;

font-weight

设置文本的粗细

可能的值

值 描述
normal 默认值。 定义标准的字符
bold 定义粗体字符
bolder 定义更粗的字符
lighter 定义更细的字符
100 200 300 400 500 600 700 800 900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。 
font-weight:bold;

常用的部分示例

QSpinBox, QTimeEdit

QSpinBox{
    height:22px;
    border:2px solid rgb(229,230,231);
    padding: 2px;
    padding-left:5px;
    border-radius:3px;
    font:15px \"Microsoft YaHei\";
}
QSpinBox::down-button{
    subcontrol-origin: padding;
    subcontrol-position:left;
    width: 22px;
    image: url(:/Images/Resource/left_arrow.png);
}
QSpinBox::up-button{
    subcontrol-origin: padding;
    subcontrol-position:right;
    width: 22px;
    image: url(:/Images/Resource/right_arrow.png);
}

QComboBox 美化示例

QCheckBox{
    spacing: 2px;
    color: white;
    spacing:10px;
    font-family:"Microsoft YaHei";
}
QCheckBox::indicator {
    width: 45px;
    height: 30px;
}
QCheckBox::indicator:unchecked {
    image: url(:/Images/switchOff);
}
QCheckBox::indicator:unchecked:hover {
    image: url(:/Images/switchOffHover);
}
QCheckBox::indicator:unchecked:pressed {
    image: url(:/Images/switchOffPressed);
}
QCheckBox::indicator:checked {
    image: url(:/Images/switchOn);
}
QCheckBox::indicator:checked:hover {
    image: url(:/Images/switchOnHover);
}
QCheckBox::indicator:checked:pressed {
    image: url(:/Images/switchOnPressed);
}

QTabWidget 美化示例

QTabWidget::pane{
    border-top:3px solid rgb(47,64,80)
}
QTabWidget::tab-bar{
    left: 5px;
}
QTabBar::tab{
    border-top-right-radius:2px;
    border-top-left-radius:2px;
    border-top:1px solid rgb(220,220,220)；
    border-right:1px solid rgb(220,220,220);
    border-left:1px solid rgb(220,220,220);
    min-width:100px;
    min-height:40px;
    background-color:rgb(250,250,250);
    color:rgb(160,160,160);
    font:13px "Microsoft YaHei";
}
QTabBar::tab:selected{
    background-color:rgb(47,64,80);
    margin-left: -2px;
    margin-right: -2px;
}
QTabBar::tab:hover:selected{
    color:rgb(248,248,248);
}
QTabBar::tab:hover:!selected{
    background-color:rgb(240,240,240);
    color:rgb(100,100,100);
}
QTabBar::close-button{
    border-image:url(:/Images/Resource/tabclose_select.png)
}
QTabBar::close-button:hover:selected{
    border-image:url(:/Images/Resource/tabclose_high.png)
}
QTabBar::close-button:hover:!selected{
    border-image:url(:/Images/Resource/tabclose_red.png)
}

QTreeWidget美化示例

QHeaderView{
    background-color: rgb(255,255,255);
    border:0px solid rgb(229,230,231);
    border-bottom:2px solid rgb(229,230,231);
}
QHeaderView::section{
    height:40px;
}
QTreeView{
    show-decoration-selected:1;
    outline:0px;
}
QTreeWidget{
    border:2px solid rgb(229,230,231);
    border-radius:2px;
}
QTreeWidget::item{
    height:35px;
    border:1px solid rgb(229,230,231);
    color:rgb(100,100,100);
    border-left:0px solid rgb(229,230,231)
}
QTreeWidget::branch{
    border:1px solid rgb(229,230,231);
    border-right:0px solid rgb(229,230,231);
}
QTreeWidget::branch:selected{
    background-color:rgb(255,255,255);
}

QLineEdit 美化示例

QLineEdit{
    border:2px solid rgb(229,230,231);
    padding:5px; padding-left:10px;
    border-radius:3px;
    color:rgb(105,105,105);
    font:14px "Microsoft YaHei";
}
QLineEdit:focus{
    border:2px solid rgb(26,179,148);
}
QLineEdit:disabled{
    background-color:rgb(238,238,238)
}

QPushButton 美化示例

QPushButton{
    background:rgb(26,179,148);
    color:rgb(255,255,255);
    border-radius:3px;
    min-height:30px;
    min-width:60px;
    font:13px "Microsoft YaHei";
}
QPushButton:hover{
    background:rgb(24,166,137);
}
QPushButton:pressed {
    background:rgb(32,75,148);
}

常见问题

消除QTreeWidgetItem外层虚线框

QTreeView { outline: 0px;}

QComboBox 下拉列中美化失效问题

// 需要对使用美化的QComboBox插件添加Item的代理
#include <QStyledItemDelegate>
QStyledItemDelegate * itemDelegate = new QStyledItemDelegate(this);
ui->comboBox->setItemDelegate(itemDelegate);

QComboBox{
    height:22px;
    border:2px solid rgb(229,230,231);
    padding: 2px;
    padding-left:5px;
    border-radius:3px;
    font:14px "Microsoft YaHei";
}
QComboBox:focus,QComboBox:checked{
    border:2px solid rgb(26,179,148);
}
QComboBox::drop-down{
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 22px; "
    "border-left-width: 1px;
    border-left-color: darkgray;
    border-left-style: solid;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
QComboBox::down-arrow{
    border-image: url(:/Images/Resource/down_p.png);
}
QComboBox QAbstractItemView::item{
    height: 22px;
}
QComboBox QAbstractItemView::item:selected{
    background-color:rgb(30,144,255);
}
  • Qt 样式说明
    • MySQL 是怎样运行的-第二部分
    MySQL 是怎样运行的-第三部分