Qt-css样式（详解）

•  样式表原理

  Margin  ：控件最外围的空白区域，总是透明的，当Margin为0时，控件大小就是显示的实际大小

  Border  ：控件的外边框

  Padding：控件的外边空到内显示区域的空白区域

  Content：控件的最内显示区域

 

• 控件状态

无:  正常视图状态（有缺省效果值）

hover:鼠标浮标效果

pressed：鼠标按下效果

active：控件激活状态

selected：控件被选择状态

read-only ：只读

//例(样式表编辑设置toolButoon鼠标悬浮时更改背景色)

#toolButton{
background-color:rgb(245,245,245);

}

#toolButton：hover{
background-color:rgb(250,250,250);

}

• 常用属性

font-family:楷体;为设置字体类型，标准形式需要加双引号，不加也可能会生效，具体看系统是否支持，中英文都支持，但要保证字体编码支持，一般程序编码为"utf-8"时没问题。

font-style:normal;为设置字体斜体样式，italic 为斜体， normal 为不斜体,oblique（倾斜）.
font-weight:bold;为设置字体加粗样式，bold 为加粗， normal 为不加粗;
font-size: 14px;设置字体大小.
注:字体同时设置时的顺序 style weight size family
color: #BDC8E2;设置字体颜色,可以使用十六进制数表示颜色,也可以使用某些特殊的字体颜色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255.

border-color 为设置边框颜色.

background-color: #2E3648;设置背景颜色.tansparent：背景色全透明
background-image: url("./image.png");设置背景图片，图片路径为 url(image-path).
background-repeat: no-repeat; 为设置背景图是否重复填充背景.
background-position: left center;设置背景图片显示位置,只支持 left ，right ，top， bottom， center；

padding-left: 10px;设置文字距离左边边界的距离.
padding-top: 8px;设置文字距离顶边边界的距离.
padding-right: 7px;设置文字距离右边边界的距离.
padding-bottom: 9px;为设置文字距离底边边界的距离.

border-style为设置边框样式，solid 为实线， dashed 为虚线， dotted 为点线， none 为不显示（如果不设置 border-style 的话，默认会设置为 none）.
border-width: 2px 为设置边框宽度，单位为 px 像素.

border-radius：设置圆角

outline:none；去除Linux环境下有红色方框的问题

• 样式设置

一，窗体中设置sheetstyle

例如在在文件中写好css，窗体中直接调用

MainWidget::MainWidget(QWidget *parent) :

    QWidget(parent),

    ui(new Ui::MainWidget)

{


    QFile file(":/qss/main.qss");

    file.open(QFile::ReadOnly);

    QTextStream filetext(&file);

    QString stylesheet = filetext.readAll();

    this->setStyleSheet(stylesheet);//直接调用

 　　file.close();

}
297

二，ui文件中点击change sheetsyle