meego中css主题文件的使用方法

简介: 转载时请注明出处和作者联系方式文章出处:http://blog.csdn.net/jack0106作者联系方式:冯牮 fengjian0106@yahoo.com.cn1. qtwidget里面有stylesheet(CSS)的概念,而原始的qtgraphicsview里面,并没有stylesheet概念,到了mtf里面,又引入了stylesheet,但是没有专门的文档进行介绍,我只能参照qtwidget里面关于stylesheet的介绍,在猜测验证的基础上,做出一些总结。

转载时请注明出处和作者联系方式
文章出处:http://blog.csdn.net/jack0106
作者联系方式:冯牮 fengjian0106@yahoo.com.cn
1. qtwidget里面有stylesheet(CSS)的概念,而原始的qtgraphicsview里面,并没有stylesheet概念,到了mtf里面,又引入了stylesheet,但是没有专门的文档进行介绍,我只能参照qtwidget里面关于stylesheet的介绍,在猜测验证的基础上,做出一些总结。也许会有不准确的地方,以后会随时修改。因此,建议先看一下qtwidget中的stylesheet的相关介绍文档。

2. qt中stylesheet使用的CSS标记语言,灵感是来自于html中的css,但是,仅仅是灵感,细节上还是有一些差别,建议学习一下html中css的概念和基本用法。后面所有的介绍,将不会讨论这些基础知识。

3.基本语法(可以参考源码目录中的示例程序/code-example/layout/layout_inside_layout ,建议修改目录里面的css文件,看看效果)
选择器{属性: 属性值;属性: 属性值;...}

3.1 选择器语法。
中括号内的属性-属性值,很好理解(需要介绍的是mtf中,都有哪些属性,这个在后面部分详细描述),重点在于选择器的一般语法(qt中选择器的语法,和html中选择器的语法是不一样的),下面给出一些例子:
<1>

 
 
MLabel {
font
: "Nokia Sans Wide" 21px ;
background-color
: #eeeeee ;
preferred-size
: 85 85 ;
maximum-size
: 80 30 ;
background-opacity
: 0.5
}

选择器匹配的是所有 MLabel和其子类的对象实例。

<2>

 
 
MLabel#item {
font
: "Nokia Sans Wide" 21px ;
background-color
: #eeeeee ;
preferred-size
: 85 85 ;
maximum-size
: 80 30 ;
background-opacity
: 0.5
}

 

选择器匹配的是所有 MLabel 的对象实例,并且该对象的object name是item(不确定是否包括MLabel的子类的对象实例,待补充)。

<3>

 
 
.MLabel {
font
: "Nokia Sans Wide" 21px ;
background-color
: #eeeeee ;
preferred-size
: 85 85 ;
maximum-size
: 80 30 ;
background-opacity
: 0.5
}

 

选择器匹配的是所有 MLabel 的对象实例(不包括它的子类对象实例)。

<4>

 
 
#item {
font
: "Nokia Sans Wide" 21px ;
background-color
: #eeeeee ;
preferred-size
: 85 85 ;
maximum-size
: 80 30 ;
background-opacity
: 0.5
}

 

选择器匹配的是所有 object name 为item的对象实例。

 

<5>qtwidget里面,还有其他几种选择器语法,目前还没有验证,可以先只使用上面几种。

3.2 属性-属性值介绍。
在mtf里面,属性-属性值也是有继承关系的。一MLabel为例,它的style的继承关系是 MStyle-->MWidgetStyle-->MLabelStyle。
<1>MStyle只是定义了共同的一些接口,没有实际的style,所以,从MWidgetStyle开始。

<2>MWidgetStyle是所有MWidget共有的style,包括:

代码
 
  
int marginLeft
int marginTop
int marginRight
int marginBottom
int paddingLeft
int paddingTop
int paddingRight
int paddingBottom
int reactiveMarginLeft
int reactiveMarginTop
int reactiveMarginRight
int reactiveMarginBottom
int backgroundBoxedPercent
MBackgroundTiles backgroundTiles
QColor backgroundColor
qreal backgroundOpacity
QSize preferredSize
QSize minimumSize
QSize maximumSize
MFeedback pressFeedback
MFeedback releaseFeedback
MFeedback cancelFeedback

 

<3>注意,前面列出了MWdiget中style的定义,但是,在css文件中,对应到属性-属性值中的时候,属性名字的写法,有小的差别,比如:
上面<2>中的 backgroundColor,对应到css中,就应该写成background-color。(详细的对照,还没有找到,先照猫画虎用"小写"加"-"吧)

<4>MLabelStyle,包括:

 
 
QColor color
QFont font
QColor highlightColor
QColor activeHighlightColor

 

<5>还是看上面给出的一个例子:

 
 
MLabel {
font
: "Nokia Sans Wide" 21px ;
background-color
: #eeeeee ;
preferred-size
: 85 85 ;
maximum-size
: 80 30 ;
background-opacity
: 0.5
}

在这个例子里面,设置了5个属性,其中font是MLabelStyle,而另外4个,都是MWidgetStyle。

 

<6>如果使用其他的widget,设置style的方法都类似,共有的属性就是MWidgetStyle,然后就是各自定义的style,查询对应的style文档即可。

<7>补充说明一点,widget的大小,可以用css来控制,比如MWidgetStyle中的maximumSize,要体会style的含义。
另外,MSceneWindowStyle有个style是int disappearTimeout,可见,style的灵活性。

<8>mtf中的MVC模式,看似复杂,但是有它的灵活性和优势,尤其是style,也可以控制实际的显示效果。

目录
相关文章
|
6月前
|
自然语言处理 前端开发 API
解析CSS文件
【5月更文挑战第23天】解析CSS文件。在Python中,可以使用一些第三方库来帮助解析CSS文件,例如`cssutils`。
72 2
|
3月前
|
前端开发 JavaScript
开发过程找不到css源文件?试试配置vite的css源文件映射
【8月更文挑战第3天】开发过程找不到css源文件?试试配置vite的css源文件映射
70 0
开发过程找不到css源文件?试试配置vite的css源文件映射
|
3月前
|
前端开发 JavaScript Linux
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
|
3月前
|
前端开发 容器
css中弹性布局使用方法
css中弹性布局使用方法
50 0
|
4月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
5月前
|
前端开发 文件存储 Python
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
|
5月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
6月前
|
负载均衡 前端开发 应用服务中间件
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400
|
5月前
|
XML 数据采集 前端开发
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
|
5月前
|
前端开发 JavaScript
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
40 0
下一篇
无影云桌面