QT之Qss样式设计

一、背景颜色

(1)有颜色:

background-color:rgb(255,255,255);  
background-color:rgbs(255,255,255,30);  //最后一个参数是透明度  0~255
background-color:yellow     	        //常用颜色名(17种标准色与130种其他颜色) 
background-color:#FF0000

17 种标准色 
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, orange, purple, red, silver, teal, white, yellow

(2)透明色:background:transparent;

(3)背景为图片:image:url(:/Sys/calibration.png);

二、控件尺寸

width:12px;	          //设置宽度 单位像素
height:40px  		  //设置高度
min-width:65px;           //最小宽度 有些时候设置width无效可以尝试设置min-width                       
min-height:12px;          //最小高度                       
max-width:12px;           //最大宽度
max-height:12px;          //最大高度

三、文本颜色

colo:rgb(255,255,255);   		//前景色 文本颜色
color: #F5F5F5;                         //前景(文本)颜色   
color: qlineargradient();               //前景(文本)颜色:线性渐变 
color: qradialgradient();               //前景(文本)颜色:辐射渐变 
color: qconicalgradient();              //前景(文本)颜色:梯形渐变  

四、文本字体 

font-size:20px  		//字体大小
font-family:黑体			//字体选择 

微软雅黑: Microsoft YaHei    宋体:SimSun    黑体:SimHei    仿宋: FangSong
楷体:  KaiTi           隶书:LiSu    幼圆:YouYuan    华文细黑:STXihei    
华文楷体:STKaiti    华文宋体:STSong    华文中宋:STZhongsong    华文仿宋:STFangsong    
方正舒体:FZShuTi    方正姚体:FZYaoti    华文彩云:STCaiyun    华文琥珀:STHupo
华文隶书:STLiti    华文行楷:STXingkai    华文新魏:STXinwei

五、边距

(1)外边距

margin: 14px 18px 20px 18px;			//外边距 顺序上右下左 
margin-top: 14px;
margin-right: 18px;
margin-bottom: 20px;
margin-left: 18px;

(2)内边距 

padding: 4px;                            //内边距  顺序上右下左  只写一个参数代表相等
padding-left: 5px;                       /* 文字左边距 */  
padding-right: 10px;                     /* 文字右边距 */  
padding-top: 3px;                        /* 文字顶边距 */  
padding-bottom: 3px;                     /* 文字底边距 */ 

六、边框

扫描二维码关注公众号,回复: 16102061 查看本文章

(1)样式

border:3px solid red  
        //边框---可以分开设置 solid 实线 dotted 点状边框   none无边框  dashed 虚线
border---四条边相同样式
border-style 
border-top-style
border-right-style  
border-bottom-style  
border-left-style

(2)宽度

border-width 上 右 下 左  ----- 边框宽度	//3px 边框像素---宽度-单位:像素,也可以em,1em=16px
border-top-width   
border-right-width  
border-bottom-width  
border-left-width

 (3)圆弧边框

border: 1px solid #FDBC03;                   /* 边框:宽度 颜色*/  
border-image:url(boder.png) 4 8 12 16;       /* 边界图 切线 */  
border-radius: 4px;                          /*边框圆角半径 */  
border-top-left-radius: ;                    /* 角弧度:左上角*/  
border-top-right-radius: ;                   /* 角弧度:右上角*/  
border-bottom-left-radius: ;                 /* 角弧度:左下角*/  
border-bottom-right-radius: ;                /* 角弧度:右下角*/ 

(4)变宽颜色

border-color:		    //边框颜色 上 右 下 左
border-top-color  
border-right-color  
border-bottom-color  
border-left-color

七、伪状态列表

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

八、 子部件列表 

::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的向上按钮

例如:
    //按钮基本样式
        QPushButton{border-image:url(:/Remote/btn_Under-the_n.png);}
    //按钮按下样式
        QPushButton:pressed{border-image:url(:/Remote/btn_Under-the_c.png);}

    ComBox->setStyleSheet("QComboBox{"
                                "border-image:url(:/Sys/output-box.png);"
                                "font:黑体;"
                                "font-size:20px;"
                                "color:rgb(255,255,255);"
                                "background-color:transparent;"
                                "width:209px;"
                                "height:45px;"
                            "}"
                            //下拉箭头区域样式
                            "QComboBox::drop-down{"
                                "background-color:transparent;"
                                "width:36px;"
                                "top:10px;"
                                "height:22px;"
                                "right:4px;"
                            "}"
                            //下拉箭头样式
                            "QComboBox::down-arrow {"
                                "image:url(:/Sys/btn_pulldown.png);"
                            "}"
                            "QComboBox QAbstractItemView {"
                                "border-image:url(:/Sys/A-drop-down-box.png);"
                                "color:rgb(255,255,255);"
                                "height:43px;"
                                "outline:0px;" //去掉虚线
                            "}"
                            //下拉选项
                            "QComboBox::item{"
                                "height:50px;"
                                "width:200px;"
                            "}"
                            //鼠标移动到下拉选项
                            "QComboBox::item:hover{"
                                "color:rgb(0,190,255);"
                            "}"
                            //滚动条轨道
                            "QScrollBar::vertical{"
                                "border-radius:5px;"
                                "width: 10px;"
                                "background:none;"
                            "}"
                            //滑块主体
                            "QScrollBar::handle::vertical{"
                              "border-radius:5px;"
                              "width:10px;"
                              "background:rgb(68,88,137);"
                            "}"
                            //鼠标移动到滑块
                            "QScrollBar::handle::vertical::hover{"
                              "background:rgb(0,190,255);"
                            "}"
                            //上箭头
                            "QScrollBar::add-line::vertical{"
                              "border:none;"
                            "}"
                            //下箭头
                            "QScrollBar::sub-line::vertical{"
                              "border:none;"
                            "}"
                          );

猜你喜欢

转载自blog.csdn.net/weixin_41734758/article/details/108412545