• Qt样式表之 QSS 语法介绍;QLineEdit、


     内容来自Qt样式表之 QSS 语法介绍-3YL的博客

    Qt样式表是一个可以自定义部件外观的十分强大的机制,可以用来美化部件。Qt样式表的概念、术语和语法都受到了HTML的层叠样式表(Cascading Style Sheets, CSS 教程)的启发,不过与CSS不同的是,Qt样式表应用于部件的世界。

    类型选择器QPushButton匹配QPushButton及其子类的实例
    ID选择器QPushButton#okButton匹配所有objectName为okButton的QPushButton实例。

     CSS常用样式

    1 CSS文字属性

    注:px:相对长度单位,像素(Pixel)。pt:绝对长度单位,点(Point)。

    CSS文字属性及示例说明
    color:#999999;文字颜色
    font-family:Microsoft Yahei,sans-serif;字体家族
    font-size:16pt;字体大小
    font-style:itelic;(normal、oblique)字体样式
    letter-spacing:1pt;字间距离
    line-height:200%;设置行高
    font-weight:bold;(lighter、normal、数值900)字体粗细
    text-decoration:underline;(line-through、overline、none)字体修饰
    text-align:left;(right、center、justify)文字左对齐
    vertical-align:top;(bottom、middle、text-top、text-bottom)垂直对齐方式
    text-transform:uppercase;(lowercase、capitalize)英文大写
    font-variant: small-caps;(normal)小型大写字母

    2 CSS背景样式:

    CSS背景样式及示例说明
    background:black;背景颜色为黑色
    background-color:#F5E2EC;背景颜色
    background-image:url(/image/bg.gif);背景图片

    border-image:url(:/icons/pulldown.png)

    部件背景图片
    background:transparent;透视背景
    background-repeat : repeat;重复排列-网页默认
    background-position : center;指定背景位置-居中对齐

    CSS边框空白

    CSS边框空白及示例说明
    padding:5px 10px 5px 10px;所有边框留空白
    padding-top:10px;上边框留空白
    padding-right:10px;右边框留空白
    padding-bottom:10px;下边框留空白
    padding-left:10px;左边框留空白

     CSS框线

    CSS框线建议书写方式说明
    border:1px solid red;所有边框线
    border-top:1px solid #6699cc;上框线
    border-bottom:1px solid #6699cc;下框线
    border-left:1px solid #6699cc;左框线
    border-right:1px solid #6699cc;右框线
    border-radius:8px;

    边框圆角半径

    border:none;无边框

    以上是建议书写方式,但也可以使用常规书写方式,如下表所示:

    CSS框线常规书写方式说明
    border-top-color:#369;设置上框线颜色
    border-top-width:1px;设置上框线宽度
    border-top-style:solid设置上框线样式

    其他框线样式如下:

    • solid - 实线

    • dotted - 虚线

    • double - 双线

    • inset - 凹框

    • outset - 凸框

    • groove - 立体内凸框

    • ridge - 立体浮雕框

    5 CSS边界样式

    CSS边界样式及示例说明
    margin-top:10px;上边界值
    margin-right:10px;右边界值
    margin-bottom:10px;下边界值
    margin-left:10px;左边界值

    1 通过设置样式控制不同显示效果

    /*按钮普通态*/QPushButton
    {    /*字体为微软雅黑*/
        font-family:Microsoft Yahei;    /*字体大小为20点*/
        font-size:20pt;    /*字体颜色为白色*/    
        color:white;    /*背景颜色*/  
        background-color:rgb(14 , 150 , 254);    /*边框圆角半径为8像素*/ 
        border-radius:8px;
    }/*按钮停留态*/QPushButton:hover
    {    /*背景颜色*/  
        background-color:rgb(44 , 137 , 255);
    }/*按钮按下态*/QPushButton:pressed
    {    /*背景颜色*/  
        background-color:rgb(14 , 135 , 228);    /*左内边距为3像素,让按下时字向右移动3像素*/  
        padding-left:3px;    /*上内边距为3像素,让按下时字向下移动3像素*/  
        padding-top:3px;
    }

    注:注释只能使用/* */#//均无效。

    "QQ号码/手机/邮箱"的设置通过placeHoldText设置;可以实现输入灰字消失的效果;

  • 相关阅读:
    数据源、映射器的复用
    渗透测试-服务器信息收集
    AQS介绍
    安防视频监控平台EasyNVR无法控制云台,该如何解决?
    基于Echarts实现可视化数据大屏物流云大数据看板页面HTML模板
    elasticSearch配置
    【牛客刷题】带你在牛客刷题第二弹(简单排序)
    简单介绍24种设计模式
    产品经理的秘密武器:提高效率的 6 种软件工具
    揭秘计算机指令执行的神秘过程:CPU内部的绝密操作
  • 原文地址:https://blog.csdn.net/weixin_46432495/article/details/126131570