StyleSheets

最新推荐文章于 2021-02-07 16:05:19 发布
最新推荐文章于 2021-02-07 16:05:19 发布
阅读量1.6k 收藏
点赞数
分类专栏： Qt

scrollbar stylesheet

-------------------------------------------

this->scrollBarWidgets(Qt::AlignBottom);

    this->scrollBarWidgets(Qt::AlignRight);
 

    this->verticalScrollBar()->setStyleSheet("QScrollBar:vertical"
 

                                            "{"
 

                                            "width:8px;"
 

                                            "background:rgba(0,0,0,0%);"
 

                                            "margin:0px,10px,0px,10px;"
 

                                            "padding-top:2px;"
 

                                            "padding-bottom:2px;"
 

                                            "}"
 

                                            "QScrollBar::handle:vertical"
 

                                            "{"
 

                                            "width:8px;"
 

                                            "background:rgba(0,0,0,25%);"
 

                                            " border-radius:3px;"
 

                                            "min-height:50;"
 

                                            "}"
 

                                            "QScrollBar::handle:vertical:hover"
 

                                            "{"
 

                                            "width:8px;"
 

                                            "background:rgba(0,0,0,50%);"
 

                                            " border-radius:3px;"
 

                                            "min-height:50;"
 

                                            "}"
 

                                            "QScrollBar::add-line:vertical"
 

                                            "{"
 

                                            "height:0px;width:8px;"
 

                                            "subcontrol-position:bottom;"
 

                                            "}"
 

                                            "QScrollBar::sub-line:vertical"
 

                                             "{"
 

                                            "height:0px;width:8px;"
 

                                            "subcontrol-position:top;"
 

                                            "}"
 

                                            "QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical"
 

                                            "{"
 

                                            "background:rgba(0,0,0,10%);"
 

                                            "border-radius:3px;"
 

                                            "}"
 

                                            );
 

 

    this->horizontalScrollBar()->setStyleSheet("QScrollBar:horizontal"
 

                                               "{"
 

                                               "height:8px;"
 

                                               "background:rgba(0,0,0,0%);"
 

                                               "padding-right:2px;"
 

                                               "padding-left:2px;"
 

                                               "}"
 

                                               "QScrollBar::handle:horizontal"
 

                                               "{"
 

                                               "height:8px;"
 

                                               "background:rgba(0,0,0,25%);"
 

                                               " border-radius:3px;"
 

                                               "min-width:50;"
 

                                               "}"
 

                                               "QScrollBar::handle:horizontal:hover"
 

                                               "{"
 

                                               "height:8px;"
 

                                               "background:rgba(0,0,0,50%);"
 

                                               " border-radius:3px;"
 

                                               "min-width:50;"
 

                                               "}"
 

                                               "QScrollBar::add-line:horizontal"
 

                                               "{"
 

                                               "width:0px;height:8px;"
 

                                               "subcontrol-position:right;"
 

                                               "}"
 

                                               "QScrollBar::sub-line:horizontal"
 

                                                "{"
 

                                               "width:0px;height:8px;"
 

                                               "subcontrol-position:left;"
 

                                               "}"
 

                                               "QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal"
 

                                               "{"
 

                                               "background:rgba(0,0,0,10%);"
 

                                               "border-radius:3px;"
 

                                               "}"
 

                                               );
 -------------------------------------------- 

 

 

treeview stylesheet
 

--------------------------------------------
 

m_treeView->setStyleSheet( QString("QTreeView{ border-image:url(%1/images/ID_DM_LEFT_BG.png);padding-left:%5px;padding-top:%5px;color:rgb(15,108,181);font-size:%4px;}\
                                  QTreeView{show-decoration-selected:1;}\
                                  QTreeView::item{margin:%2px;height:%3px;}\
                                  QTreeView::item:selected{color:rgb(15,108,181);border-image:url(%1/images/ID_DM_TREEITEM_ACTIVED.png);}\
                                  QTreeView::item:has-children {color:rgb(15,108,181);}\
                                  QTreeView::item:!has-children {color:rgb(15,108,181);}\
                                  QTreeView::branch{background:rgb(242,242,242);}\
                                  QTreeView::branch:has-siblings:adjoins-item {border-image:url(%1/images/ID_DM_TREEITEM_BRANCHMORE.png) 0;}\
                                  QTreeView::branch:!has-children:!has-siblings:adjoins-item {border-image:url(%1/images/ID_DM_TREEITEM_BRANCHEND.png) 0;}\
                                  QTreeView::branch:closed:has-children{border-image:none;image:url(%1/images/ID_DM_TREEITEM_FOLD.png);}\
                                  QTreeView::branch:open:has-children{border-image:none;image:url(%1/images/ID_DM_TREEITEM_UNFOLD.png);}\
                                  ").arg(wsImagePath).arg(13*gRatioH).arg(25*gRatioV).arg(12*gRatioH).arg(2*gRatioH));
      //m_treeView->header()->setStyleSheet( "QHeaderView{ background-color:#585858 ; color:rgb(201,204,217);font-size:30px}" );
      m_treeView->header()->setStyleSheet( QString("QHeaderView{ background-color:#F2F2F2; color:rgb(15,108,181);font:bold;font-size:%1px;}").arg(18*gRatioH));
 
 

--------------------------------------------
 
 

QStringtempStyle=QString("QTreeView{\
 

                                border:0px solid dfdfdf;\
 

                                color:#f2f2f2;\
 

                                outline: none;\
 

                                show-decoration-selected: 1\
 

                                }\
 

                                QTreeView::item{\
 

                                height:20px;\
 

                                color:#333333;font-size:12px;font-family:'微软雅黑';\
 

                                }\
 

                                QTreeView::item:selected{\
 

                                background: #f2f2f2;\
 

                                }\
 

                                QTreeView::branch{\
 

                                    image:none;\
 

                                    background: #f2f2f2;\
 

                                }\
 

                                QTreeView::branch:open:has-children:!has-siblings, \
 

                                QTreeView::branch:open:has-children:has-siblings {\
 

                                 background: #f2f2f2;\
 

                                }\
 

                                QTreeView::branch:open:has-children:!has-siblings:selected, \
 

                                QTreeView::branch:open:has-children:has-siblings:selected {\
 

                                 background: #f2f2f2;\
 

                                }\
 

                                QTreeView::branch:has-children:!has-siblings:closed, \
 

                                QTreeView::branch:closed:has-children:has-siblings {\
 

                                 background: #f2f2f2;\
 

                                }\
 

                                QTreeView::branch:has-children:!has-siblings:closed:selected, \
 

                                QTreeView::branch:closed:has-children:has-siblings:selected {\
 

                                 background: #f2f2f2;\
 

                                }\
 

                            ");
 

 

                                m_treeWidget->setStyleSheet(tempStyle);
 

 

 

treeveiw去掉虚线框
 

        m_treeWidget->setStyleSheet("QTreeView::item{height:32px;font:bold;font-size:24px}");
 

    m_treeWidget->setRootIsDecorated( false ); //remove dotted line border frame
 

    m_treeWidget->setFrameStyle(QFrame::NoFrame); //remove border frame
 

    m_treeWidget->setStyleSheet("QTreeView::branch {image:none;}"); //remove children's dotted line border frame
 

 

 

 

treeveiw
 

 

 
 通过 
 Qt之QTreeView（一）即可正常加载数据， 
 Qt之QTreeView（二）即可自定义图标、按钮，注册事件等。。。那么，到这里，基本的使用已经完成，为了界面的美观性，这里提供三种样式以供选择。 
 
 
 
 
  样式一： 
 
 
 
 
  
QString styleOne = "QTreeView{\
        border: 1px solid lightgray;\
    }\
    QTreeView::item {\
            height: 40px;\
            border-radius: 2px;\
            border: 1px solid transparent;\
            background: transparent;\
            color: black;\
    }\
    QTreeView::item:hover {\
            border: 1px solid rgb(185, 215, 250);\
    }\
    QTreeView::item:selected {\
            border: 1px solid rgb(170, 190, 230);\
            background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 rgb(230, 240, 250), stop: 0.5 rgb(220, 235, 255), stop: 1.0 rgb(210, 230, 255));\
    }\
    QTreeView::branch:open:has-children {\
            image: url(./Resources/Images/branchOpen.png);\
    }\
    QTreeView::branch:closed:has-children {\
            image: url(./Resources/Images/branchClose.png);\
    }";

 
 
 
 

   效果如下： 
 
 
 
 
  
 
   Qt之QTreeView（三） 
  
 
  
 
   
 
  
 
  
 
   样式二： 
  
 
  
QString styleTwo = "QTreeView{\
            border: 1px solid lightgray;\
    }\
    QTreeView::item {\
            height: 40px;\
            border-radius: 2px;\
            border: 1px solid transparent;\
            background: transparent;\
            color: black;\
    }\
    QTreeView::item:has-children {\
            border: none;\
            border-bottom: 1px solid lightgray;\
    }\
    QTreeView::item:hover {\
            border: 1px solid rgb(170, 190, 230);\
            background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 rgb(230, 240, 250), stop: 0.5 rgb(220, 235, 255), stop: 1.0 rgb(210, 230, 255));\
    }\
    QTreeView::item:selected {\
            border: 1px solid rgb(170, 190, 230);\
            background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 rgb(230, 240, 250), stop: 0.5 rgb(220, 235, 255), stop: 1.0 rgb(210, 230, 255));\
    }\
    QTreeView::branch:open:has-children {\
            image: url(./Resources/Images/branchOpen2.png);\
    }\
    QTreeView::branch:closed:has-children {\
            image: url(./Resources/Images/branchClose2.png);\
    }";


 
 
 
 

   效果如下： 
 
 
 
 
  Qt之QTreeView（三） 
  
 
  
 
 
 
 
 
  样式三： 
 
 
 
 
  
QString styleThree = "QTreeView{\
            border: 1px solid lightgray;\
    }\
    QTreeView::item {\
            height: 25px;\
            border: none;\
            background: transparent;\
            color: black;\
    }\
    QTreeView::item:hover {\
            background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 rgb(255, 220, 130), stop: 0.5 rgb(255, 220, 130), stop: 1.0 rgb(255, 230, 150));\
    }\
    QTreeView::item:selected {\
            background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 rgb(255, 200, 100), stop: 0.5 rgb(255, 230, 150), stop: 1.0 rgb(255, 240, 150));\
    }\
    QTreeView::branch:open:has-children {\
            image: url(./Resources/Images/branchOpen.png);\
    }\
    QTreeView::branch:closed:has-children {\
            image: url(./Resources/Images/branchClose.png);\
    }";

 
 
 
 

   效果如下： 
 
 
 
 
  Qt之QTreeView（三） 
 
 
 
 
  
 
 
 
 

     
    
  以上主要通过对边框、背景、文本、滑过、选中来设置不同的样式，仅供参考。如要实现自己想要的效果，那么可以好好研究下QSS！ 
 
 
 

     
     
  好了，介绍了这么多，还是把源码奉上，地址： 
  自定义QTreeView（详解）。 
 
 
 
 
  
 
 
 
 
 
  
 
 
 
 
 
  
 
   注： 
  
 
  
 
      技术在于交流、沟通，转载请注明出处并保持作品的完整性。 
  
 
 
 

 

 

 

QStringstrOpenIconPath=QApplication::applicationDirPath()+"/plugin/resource/images/16X16.png";
 

    QString strCloseIconPath = QApplication::applicationDirPath() + "/plugin/resource/images/16X16.png";
 

 

    QString strOpenSelIconPath = QApplication::applicationDirPath() +"/plugin/resource/images/16X16.png";
 

    QString strCloseSelIconPath = QApplication::applicationDirPath() + "/plugin/resource/images/16X16.png";
 

 

    QString tempStyle = QString("QTreeView{\
 

                                border:0px solid gray;\
 

                                color:gray;\
 

                                outline: none;\
 

                                show-decoration-selected: 1\
 

                                }\
 

                                QTreeView::item{\
 

                                height:20px;\
 

                                color:#333333;font-size:12px;font-family:'微软雅黑';\
 

                                }\
 

                                QTreeView::item:selected{\
 

                                background: #41b700;\
 

                                }\
 

                                QTreeView::branch{\
 

                                    image:none;\
 

                                    background: white;\
 

                                }\
 

                                QTreeView::branch:open:has-children:!has-siblings, \
 

                                QTreeView::branch:open:has-children:has-siblings {\
 

                                 background: white;\
 

                                 image: url(%1);\
 

                                }\
 

                                QTreeView::branch:open:has-children:!has-siblings:selected, \
 

                                QTreeView::branch:open:has-children:has-siblings:selected {\
 

                                 background: #41b700;\
 

                                 image: url(%3);\
 

                                }\
 

                                QTreeView::branch:has-children:!has-siblings:closed, \
 

                                QTreeView::branch:closed:has-children:has-siblings {\
 

                                 background: white;\
 

                                 image: url(%2);\
 

                                }\
 

                                QTreeView::branch:has-children:!has-siblings:closed:selected, \
 

                                QTreeView::branch:closed:has-children:has-siblings:selected {\
 

                                 background: #41b700;\
 

                                 image: url(%4);\
 

                                }\
 

                            ").arg(strOpenIconPath).arg(strCloseIconPath).arg(strOpenSelIconPath).arg(strCloseSelIconPath);
 

 

 

    m_pTreeWidget->setDirViewStyleSheet(tempStyle);
 

    m_pTreeWidget->setObjectName("userTreeWidget");
 

    m_pTreeWidget->setStyleSheet(QString("QWidget#%1{border:1px solid gray;border-right:0px solid gray;border-bottom:0px solid gray;}")\
 

                                    .arg(m_pTreeWidget->objectName()));



 

 


                

        

        

    




    

      

        

            

              
                
                  flowerspring
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
stylesheet.zip

				
			

			

				

					03-01
				

			

		

		

			
				
qss界面美化实例,很好的学习开端。有助于帮助你进行程序界面美化。

			
		

	



                

              
                



	

		

			

				
					
styleSheets

				
			

			

				

					qq_44898394的博客
				

				

					10-04
					
					378
					
				

			

		

		

			
				
document.styleSheets

			
		

	



                


  
              

                


	

		

			

				
					
js操作styleSheets

				
			

			

				

					aomenglong0411的博客
				

				

					04-25
					
					393
					
				

			

		

		

			
				
Base.prototype.addRule = function (num, selectorText, cssText, position) {
	var sheet = document.styleSheets[num];
	if (typeof sheet.insertRule != 'undefined') {
	       sheet.insertRule(sel...

			
		

	





	

		

			

				
					
styleSheet简单介绍

				
			

			

				

					islinyoubiao的专栏
				

				

					02-07
					
					2527
					
				

			

		

		

			
				
styleSheet可以方便修改样式



要整体修改QPushButton可以如下：


QPushButton{
	border: 2px solid gray;
    border-radius: 10px;
    padding: 0 8px;
    background: yellow;
}

要单独修改QPushButton:


QPushButton#pushButton_2{
	border: 2px solid gray;
    border-radius: 10px;
    

			
		

	



		

			
		



	

		

			

				
					
document.styleSheets以及js中实现样式表的切换、样式的增加减少

				
			

			

				

					hellochenlu的博客
				

				

					10-19
					
					6222
					
				

			

		

		

			
				
document.styleSheets可以返回由网页中所用到的样式表组成的数组，但是不包括直接嵌在元素里的style。
例如：



上面代码弹出的对话框显示2。至于样式表在数组里的顺序由定义时的顺序决定，如上document.styleSheets[0]返回设定字体大小的style，document.styleSheets[1]返回样式表firstCSS.css。
js可以控制样式

			
		

	





	

		

			

				
					
matplotlib-stylesheets：Matplotlib的样式表

				
			

			

				

					02-05
				

			

		

		

			
				
`matplotlib-stylesheets` 是一个 Python 库，专为 Matplotlib，这是一个流行的 Python 数据可视化库，提供了丰富的样式表资源。这个库允许开发者轻松地应用预定义的样式到他们的图表，使得数据可视化的外观更加专业...

			
		

	





	

		

			

				
					
css-stylesheets:CSS样式表的颜色

				
			

			

				

					03-08
				

			

		

		

			
				
在网页设计领域，CSS（Cascading Style Sheets）样式表是一种强大的工具，用于定义和控制网页元素的外观、布局和结构。颜色是CSS中的一个重要概念，它赋予网页元素丰富的视觉效果，帮助创建出吸引人的界面。本文将...

			
		

	





	

		

			

				
					
load-stylesheets

				
			

			

				

					05-03
				

			

		

		

			
				
加载样式表  异步加载链接标签样式表，并带有表示加载完成的承诺结果。 也可以用于网站图标加载。... script src =" node_modules/load-stylesheets/dist/index-umd.js " > </ script >  全局将是loa

			
		

	





	

		

			

				
					
stylesheets:社区生成的最佳CSS资源集合

				
			

			

				

					05-02
				

			

		

		

			
				
#Stylesheets是社区生成的最佳CSS资源的集合。 创建它是为了让Web设计社区可以共享和分类所有可以找到的最佳工具，教程，代码片段和存储库。  您可以发布与CSS相关的任何内容，并让社区“加注星标”，以使其他人知道...

			
		

	





	

		

			

				
					
pyqt-stylesheets:PyQt5样式表作为子模块

				
			

			

				

					05-19
				

			

		

		

			
				
style_string = pyqtcss.get_style("dark_blue") qt_widget.setStyleSheet(style_string) 延长 在src中创建新文件夹。 文件夹名称将为样式名称 创建PyQt的资源文件style.qrc含style.qss和其他文件，如图标的PNG  ...

			
		

	





	

		

			

				
					
自定义QTreeView（详解）

				
			

			

				

					12-23
				

			

		

		

			
				
详细介绍QTreeView的使用，
包括：模型/视图，自定义委托、自定义样式等操作
以及无边框界面的拖拽等操作！

			
		

	





	

		

			

				
					
CSS3-JS-styleSheets的概述

				
			

			

				

					Marvel__Dead 胡艺宝的博客
				

				

					01-21
					
					1077
					
				

			

		

		

			
				
下面通过代码进行解释:<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    .box{width:100px;height:100px;background:#30D716;}
    .box2{width:200px;height:200px;background:#DF2894

			
		

	





	

		

			

				
					
css基础---操作样式表

				
			

			

				

					wenmin1987的博客
				

				

					06-02
					
					609
					
				

			

		

		

			
				
使用style对象可以操作行内样式，但无法访问样式表，而使用styleSheets对象可以访问<style>标签定义的内部样式表，以及<link>标签或@import命令导入的外部样式表，styleSheets对象属于document,通过document.styleSheets进行访问。

styleSheets为每个样式表定义了一个cssRules对象，用来包含指定样式...

			
		

	





	

		

			

				
					
CSS详解(Element中style属性，伪元素，StyleSheet对象)

					
热门推荐

				
			

			

				

					上善若泪
				

				

					05-03
					
					1万+
					
				

			

		

		

			
				
目录

1 HTML元素的style属性

2 Element节点的style属性

2.1 基本用法

2.2 cssText属性

2.3 CSS模块的侦测

2.4 setPropertyValue()，getPropertyValue()，removeProperty()

3 CSS伪元素

4 StyleSheet对象

4.1 获取样式表

4.2 属性

4.2.1 media属性...

			
		

	





	

		

			

				
					
追加样式表操作

				
			

			

				

					Cherry6376的博客
				

				

					04-04
					
					164
					
				

			

		

		

			
				
//addcss
    Base.prototype.addcss=function(num,selectortxt,csses,ind){
      var sheet=document.styleSheets[num];
      if(typeof sheet.insertRule!=undefined)
...

			
		

	





	

		

			

				
					
关于styleSheets1：获取css样式

				
			

			

				

					胡世林的博客
				

				

					09-13
					
					3250
					
				

			

		

		

			
				
不考虑其他情况，现在样式表主要是css，因此主要操作对象是：CSSStyleSheet

范围：包含元素和rel特性被设置为“stylesheet”的元素引入的样式表

限制：需要浏览器支持dom2级样式表

		
		
		
			.mydiv {
				width: 100px;
				height: 100px;
				border: 1px solid #000000;

			
		

	





	

		

			

				
					
 利用styleSheets快速生成一个图标库界面

				
			

			

				

					weixin_33912453的博客
				

				

					02-01
					
					122
					
				

			

		

		

			
				
&01.需求
需求 ： 实现一个图标库的选择界面，展示UI库中所有的图标并提供选择功能
ICON库——iview UI 共 860 个

&02.实现思路
思路 从 iview CSS 样式表中 提取所有的 .ivu-icon的样式，并处理成数组 利用 v-for 实现循环渲染
基本知识参考-CSS操作
CSSStyleD...

			
		

	





	

		

			

				
					
CSS（Cascading Style Sheets）基本样式

				
			

			

				

					Mr_Lee9的博客
				

				

					08-13
					
					554
					
				

			

		

		

			
				
css简介
1.什么是css

重叠样式表，主要是负责标签的样式，美化页面
一个网页分三大部分：

结构层：主要由HTML负责，负责页面的结构
表现层：主要由css负责，页面的展示样式，美化效果
行为层：主要由js负责，负责页面和用户的交互效果
css是单独的一种文件类型，后缀为.css的文件
css语法格式：




2.css的三种引入方式

行间样式

给标签添加style属性，值就是你要设...

			
		

	





	

		

			

				
					
styleSheets的用法

					
最新发布

				
			

			

				

					06-08
				

			

		

		

			
				
`document.styleSheets` 是一个只读属性，它返回一个包含当前文档所有样式表的 StyleSheetList 对象。可以使用这个对象来获取和修改样式表。  下面是一些常用的 `styleSheets` 的用法：  1. 获取样式表列表  ```...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值