zoukankan      html  css  js  c++  java
  • QSS-qt样式表

    QSS即Qt StyleSheet(Qt样式表)的简称,是一种用来自定义控件外观的强大机制,QSS可以让我们的程序界面更加漂亮

    每条QSS样式都由两部分组成:1. 选择器,该部分指定要美化的控件  2. 声明,该部分指定要在控件上使用的属性

    声明:

     样式:

    import sys
    from PyQt5.QtWidgets import QApplication, QWidget,QLabel,QPushButton
    
    class BTN(QPushButton):
        pass
    
    class Demo(QWidget):
    
        def __init__(self):
            super(Demo, self).__init__()
            self.resize(300,400)
            self.setWindowTitle('QSS学习')
            label=QLabel('测试文本',self)
            label.move(50,50)
            label.resize(100,100)
    
            self.setStyleSheet('QLabel{border-style:solid;border-16;border-color: red yellow blue green;}')  #设置样式
            #样式是个键值对,用;隔开
            # background-color   设置背景色
            # color 前景色
            # font-size:20px  字体大小
            # font-family:黑体
            # border:3px solid red  边框---上下左右可以分开设置
                # border---四条边相同样式
                        #border-style  四条线统一设置--上 右 下 左
                        #四条边分开设置 border-top-style    border-right-style  border-bottom-style  border-left-style
                # 3px 边框像素---宽度-单位:像素,也可以em,1em=16px
                    #border-width 上 右 下 左  ----- 边框宽度
                    #分开设置:border-top-width   border-right-width  border-bottom-width  border-left-width
                # solid 实线----边框样式   dotted 点状边框    none无边框     dashed 虚线
                    # double    双线    groove 定义3D凹槽边框。其效果取决于border-color的值
                    # ridge 定义3D垄状边框。其效果取决于 border-color的值
                    # inset 定义3D inset边框。其效果取决于 border-color的值
                    # outset 定义3D outset边框。其效果取决于 border-color的值
            # red 红色
                #统一设置 border-color 上 右 下 左
                #四条线分开设置 border-top-color  border-right-color  border-bottom-color  border-left-color
                #颜色 可以用rgb(2,2,2)   也可以  #00FF00
                #常用颜色 https://blog.csdn.net/zy_heu/article/details/78952173
            #  40px   设置宽度
            # height: 40px  设置高度
            # image:url(./大象.png)   添加图片
            # margin    外边距
            # padding   内边距
            # content  内容矩形
            # 设置多个属性用;隔开
    
    
    
    if __name__ == '__main__':
        app = QApplication(sys.argv)
        demo = Demo()
        demo.show()
        sys.exit(app.exec_())

     渐变色:

    线性渐变:
    qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 white, stop: 0.4 gray, stop:1 yellow)

     

    x1:0, y1:0, x2:1, y2:0   决定方向
    stop: 0.4 gray    定义位置的颜色   把整条线分层10分,0.4的位置是gray颜色

    辐射渐变:

    qradialgradient(cx:0.7, cy:0.7, radius:0.5, fx:0.5, fy:0.5, stop:0 red,  stop:1 blue)  

    cx:0.7, cy:0.7  是圆心位置

    radius:0.5   是半径

     fx:0.5, fy:0.5  光源位置

    stop:0 red     位置的颜色

    角度渐变:

    qconicalgradient(cx:0.5, cy:0.5, angle:90, stop:0 red, stop:1 blue)   

    cx:0.5, cy:0.5     圆心位置

    angle:90     起始角度

    stop:0 red    位置颜色

    边框圆角 :

     四个边框统一设置:---四个角相同

    border-radius:20px         圆角半径  单位 像素

    四个边框分别设置:

     border-top-left-radius:20px

    border-top-right-radius

    border-bottom-right-radius

    border-bottom-left-radius

    边框图片:

    border-image:url(./边框图片.png) 30 30 30 30 stretch;border-30

     

    四个角不会变 

    30 30 30 30   裁剪值    上右下左

    中间块的处理方式:stretch  拉伸     round  平铺      repeat 重复

    border-30    边框宽度----必须有

    外边距: 

    统一设置   margin  上 右 下 左

    分开设置:margin-top       margin-right        margin-bottom        margin-left  

    常用取值    16px   1em

    resize调整的是包含外边距的尺寸 

    内边距:

    统一设置   padding  上 右 下 左

    分开设置    padding-top      padding-right      padding-bottom       padding-left

    常用取值   16px    1em

    背景:

    background-color:yellow       背景颜色

    background-color:rgb(255,0,0)  

    background-color:#FF0000

    常用颜色 https://blog.csdn.net/zy_heu/article/details/78952173

    background-image:url(./大象.png);background-repeat:no-repeat       背景图片

    背景图片的处理方式:background-repeat:no-repeat     不重复  

    background-repeat:repeat-x     x方向重复

    background-repeat:repeat-xy     xy方向重复

    background-position:right top     图片位置

    top    left     right     bottom  

     background-origin:content      参照位置---图片贴着谁

    padding   默认

    content

    border

    margin

     background-clip:padding     背景裁剪---在指定范围外的都裁剪掉

    padding   默认

    content   

    border

    background-attachment :scroll       背景图像是否跟随滚动

    scroll       跟随滚动

    fixed       不跟随滚动

    字体: 

    分开设置:

    font-family:隶书         设置字体

    font-size:32px           字体大小   单位 16px=1em

    font-style:italic     字体样式:

    normal    默认值.显示一个标准的字体样式

    italic   显示一个斜体的字体样式

    oblique   显示一个倾斜的字体样式

    font-weight:normal       字体重量

    normal      默认值。定义标准的字符

    bold         定义粗体字符

    bolder     定义更粗的字符

    lighter     定义更细的字符

    100

    200

    300

    400

    500

    600

    700

    800

    900

    400 等同于 normal,而 700 等同于 bold

    color:red      前景色

    最小最大尺寸:

    min-width
    min-height
    max-width
    max-height

    复合控件的子控件:

    QSpinBox::up-button{Subcontrol-Position:left top}

    选择器   QSpinBox::up-button    子控件向上按钮

    Subcontrol-Position:left top     子控件位置

     

    Subcontrol-Origin:border     子控件相对父控件的参照位置

    bottom:10px     移动10像素

    bottom    向底部移动

    top

    left

    right

    position: relative;      相对位置移动

    position: absolute;    绝对位置移动

    三方库样式表 :---qdarkgraystyle

    安装:文件--->设置--->

    --->输入 qdarkgraystyle---->--->安装成功显示

    我的报错   不知为何???

    选择器: 

    import sys
    from PyQt5.QtWidgets import QApplication, QWidget,QVBoxLayout,QLabel,QPushButton,QCheckBox
    
    class BTN(QPushButton):
        pass
    
    class Demo(QWidget):
    
        def __init__(self):
            super(Demo, self).__init__()
            self.resize(300,400)
            self.setWindowTitle('QSS学习')
            self.setup_ui()
    
        def setup_ui(self):
            box1=QWidget(self)
            box1.setObjectName('box1')
            box3=QWidget(box1)
            box3.setStyleSheet('.QWidget{background-color:yellow}')
            box2 = QWidget(self)
    
            #box1.setStyleSheet('color: red')  #设置样式
            #注意:包括控件本身和所有子控件
            #color 前景色
            
            bl = QVBoxLayout()
            self.setLayout(bl)
    
            bl.addWidget(box1)
            bl.addWidget(box2)
            label1 = QLabel('标签1', box1)
            label1.setObjectName('lm')  # 设置ObjectName
            label1.setProperty('notice_level','error')  #给控件设置自定义属性和属性值
            label1.move(50, 50)
            btn1 = QPushButton('按钮1', box1)
            btn1.move(150, 50)
            btn=BTN('按钮',box1)
            btn.move(150,100)
            label11 = QLabel('标签11', box3)
    
    
    
            label2 = QLabel('标签2', box2)
            label2.move(50, 50)
            btn2 = QPushButton('按钮2', box2)
            btn2.move(150, 50)
            btn2.setObjectName('lm')
            label2.setProperty('notice_level', 'warning')  # 给控件设置自定义属性和属性值
    
            #选择器:---指明样式对什么控件使用
    
            #通配符选择器--匹配所有控件
            #box1.setStyleSheet('* {background-color: yellow;}')
            #* 表示所有控件
    
            #类型选择器---通过控件类型来匹配控件
            #self.setStyleSheet('.QPushButton{background-color: yellow}')
            #QPushButton  表示匹配QPushButton类控件及其子类控件
            #.QPushButton  表示匹配QPushButton类控件---不包括子类控件
    
            #ID选择器:----通过ObjectName属性进行选择--使用#
            #self.setStyleSheet('#lm{background-color: yellow}')
            #ObjectName属性为lm的控件
    
            #self.setStyleSheet('QPushButton#lm{background-color: yellow}')
            #在QPushButton类控件当中ObjectName属性为lm的控件
    
            #属性选择器:--根据setProperty自定义属性和属性值进行选择--使用[]
            #self.setStyleSheet('.QLabel[notice_level]{background-color: blue}.QLabel[notice_level="error"]{border:3px solid red} .QLabel[notice_level="warning"]{border:3px solid yellow}')
            #[notice_level]  具有notice_level属性
            #[notice_level="error"]   notice_level属性值是error的
    
            #包含选择器:---用空格
            #self.setStyleSheet('QWidget#box1 QLabel {background-color: blue}')
            #QWidget#box1中包含的QLabel类控件及其所有子控件--直接包含 间接包含都行
    
            #直接包含选择器---- 用 >
            #self.setStyleSheet('QWidget#box1 >QLabel {background-color: blue}')
            # QWidget#box1中包含的QLabel类控件及其子控件--只能直接包含不包括间接包含
    
            #子控件选择器:---复合控件中的控件--用::
            cb1=QCheckBox('物理',box2)
            cb1.move(50,100)
            #self.setStyleSheet('QCheckBox::indicator {image:url(./大象.png);40px;height:40px;}')
            #::indicator  表示复选框中的指示器--勾选框
            #QCheckBox  QRadioButton  都有indicator控件
            #QComboBox  有drop-down控件
            #QSpinBox,QDateEdit,QDateTimeEdit,QTimeEdit  有up-button   down-button  up-arrow  down-arrow控件
            #其它看  https://www.cnblogs.com/liming19680104/p/11146956.html
    
            #self.setStyleSheet('#lm,#box1{background-color: blue}')
            # 上面选择器分类可以组合使用, 使用逗号隔开即可
    
    
            #伪状态:---在什么状态下使用样式表---使用:
            #self.setStyleSheet('QPushButton#lm:hover{background-color: yellow}  QPushButton#lm:pressed{background-color: blue}')
            #:hover   鼠标悬停在上面时
            #:pressed   控件被按下时
            #:checked   控件被选中
            #:unchecked   控件未被选中
            #:indeterminate   checkBox或者radioButton被部分选中(半选中)
            #:focus   控件获取焦点
            #:disabled   控件失效
            #:enabled   控件有效
            #:on   控件处于on状态---选择按钮开
            #:off   控件处于off状态
            #这部分不写时就是普通状态时
            #注意:不同的控件可能有某种特定的伪状态, 无法通用, 具体查看官方文档
            #! 可以否定  :!checked  没有被选中时
            #可以多个连用  :hover:checked  鼠标在上且被选中时
    
            #例子
            #self.setStyleSheet('QCheckBox::indicator{40;height:40} QCheckBox::indicator:checked{image:url(./对勾.png)} QCheckBox::indicator:unchecked{image:url(./圆圈.png)}')
    
    if __name__ == '__main__':
        app = QApplication(sys.argv)
        demo = Demo()
        demo.show()
        sys.exit(app.exec_())

    级联和冲突:

    两个选择器包含相同控件,而同一样式设置了不同属性时,以特异性更强的为准;如果选择器的特异性相同,取后者

    【特异性:对选择器和样式来说,谁包含的属性项多,谁的特异性就强】

  • 相关阅读:
    devise 异步发邮件
    ubuntutweak for lucid
    960gs blueprint
    Amoeba for mysql 0.31发布(读写分离、负载均衡、Failover、数据切分)
    Google App Servlet容器转型 – 从Tomcat到Jetty
    DBeaver
    用simple from暂不用formtastic
    [SQL Server]ORDER BY的问题
    PHP pathinfo() 函数
    php中使用head进行二进制流输出,让用户下载PDF等附件的方法
  • 原文地址:https://www.cnblogs.com/liming19680104/p/10421547.html
Copyright © 2011-2022 走看看