开源跨平台移动项目Ngui【CSS样式表规则及用法】
2017-11-24 00:44
337 查看
Ngui简介
这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架,基于NodeJS/OpenGL,这也是第一个在移动端Android/iOS融合NodeJS的前端GUI项目,至此JavaScript成为了真正意义上前后端通吃的语言。Ngui的目标:在此基础上开发GUI应用程序可拥有开发WEB应用般简单与速度同时兼顾Native应用程序的性能与体验。
开源跨平台移动项目Ngui【简介】
开源跨平台移动项目Ngui【入门】
开源跨平台移动项目Ngui【视图与布局系统】
开源跨平台移动项目Ngui【Action动作系统】
开源跨平台移动项目Ngui【CSS样式表规则及用法】
NguiAPI文档
CSS样式表到底是什么
CSS样式表全称叫CascadingStyleSheets是一种用来表现HTML文件样式的语言,是Web前端开发中一定会用到的排版语言,那么Ngui中css的灵感就来自于此。与其说是灵感还不如果说是借鉴并通过精简而来,因为开发这个框架的初衷效率一直就是最重的目标,其次才是使用体验。
下面是Ngui中CSS样式表的写法:
import{CSS,Div,Text}from'ngui'; CSS({ '.a':{ width:'100%', height:'100%', contentAlign:'center', }, '.a.b':{ width:100, height:100, marginTop:'auto', marginBottom:'auto', backgroundColor:'#f00', }, }); constvx=( <Divclass="a"> <Textclass="b">Hello!</Text> </Div> );
是不是很熟悉呢。
CSS样式表运行时
这里说的是新式表到底是什么时间应用到视图上的。样式表并不会主动去查询class。请记住样式表只是静态的属性集合,样式表的应用是需要的视图对像主动查询。所以当一个视图先前已经应用过样式表,然后样式表属性被更改后并不会影响到先前应用样式表的视图。需要注意的一点是样式表样表应用只是简单的对视图对像属性的更改,并没有权重的概念,所以在应用样式表时需要注意与直接设置属性的先后顺序,很有可能先前设置的视图属性被样式表覆盖,因为样式表
class的设置并不会立即生效它总是在渲染开始前才应用到视图。
CSS样式表名称规则
非常抱歉的告诉各位,现在的样式表体系只支持class并不支持
id与
tagName。还是因为同样的原因效率问题,所以我希望尽量简单。当然这一切都需要在使用体验上付出代价,也许在某一天会有人想出更好的替代方案也说不定,要知道众人的力量是无穷的况且现在框架本身不需限制于任何标准。
名称组合
样式表首先都是全局的,后面定义的同名样式表会与前面定义的样式表合并如果有重复的属性会进行替换。怎样的名字是同名的呢?并不是说定义时的名称组合key本身,看下面的例子。
CSS({ '.a':{height:100}, '.b':{backgroundColor:'#f00'}, '.c':{border:'1#000'}, '.a.b':{width:100}, '.b.a':{width:200}, }); constvx=( <Divclass="abc"/> );
上面
.a.b与
.b.a表示其实是同一个名称。并且最后的
width为200。
并且越长的名称组合就会有越多的组合结果,也就是说查询也会需要更多的时间。比如
class="abc"的样式组合会有
.a、
.b、
.c、
.a.b、
.a.c、
.b.c、
.a.b.c7种结果,当视图应用这个样式时需要查询这7种可能性。所以在Ngui中CSS样式表的组合限制在4个,多于4个时的组合时可能会出现意想不到结果。
多级名称
样式表的数据结构其实是个树状结构,每个具名的样式表都可以有子样式表,子级样式表以空格区分且级数没有限制但理论来说越多的级数查询的速度也会越慢。如:CSS({ '.a':{width:200,height:200}, '.b':{height:100}, '.a.b':{width:100,height:200}, }); constvx=( <Divclass="a"> <Textclass="b">Hello!</Text> </Div> );
子级样式表权重会更高上面的例子中
height应该是
200
.a.b的样式表属性会覆盖
.b。
多级样式表的应用也必须对应视图的嵌套关系,这样样式才能生效,比如上面的例子中
.a.b这个样式表应用于视图时,这个视图的父级或顶级视图的样式表必须亦一个
.a。
伪类
伪类有三种类型分为normal、
hover、
down分别对应正常、光标进入、光标按下。当然在触摸屏上没有光标所有
hover也不会存在。只有
normal、
down对应触摸开始与触摸结束。
例:
CSS({ '.a':{width:100,height:100}, '.a:normal':{backgroundColor:'#aaa'}, '.a:hover':{backgroundColor:'#f00'}, '.a:down':{backgroundColor:'#f0f'}, }); constvx=( <Divclass="a"/> );
有一点需要注意伪类不可以再有子级伪类,如:
CSS({ '.a:hover':{backgroundColor:'#f00'}, '.a:hover.b':{width:200}, '.a:hover.b:hover':{backgroundColor:'#ff0'},//这条规则会抛出异常 });
相关文章推荐
- 开源跨平台移动项目Ngui【CSS样式表规则及用法】
- 开源跨平台移动项目Ngui【Action动作系统】
- 开源跨平台移动项目Ngui【简介】
- 开源跨平台移动项目Ngui【入门】
- 开源跨平台移动项目Ngui【Action动作系统】
- 开源跨平台移动项目Ngui【视图与布局系统】
- 开源跨平台移动项目Ngui【简介】
- 开源跨平台移动项目Ngui【视图与布局系统】
- 开源跨平台移动项目Ngui【入门】
- 跨平台开源项目Ngui【基准性能测试报告】
- 跨平台开源项目Ngui【基准性能测试报告】
- 跨平台开源项目Ngui【基准性能测试报告】
- [置顶] Android移动开发-在Android项目里集成开源框架ZXing实现扫描二维码的功能
- 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法
- 移动设备的“声波通信/验证”的实现——SinVoice开源项目介绍(二)
- 程序设计基石与实践系列之从开源项目学习C语言基本的编码规则
- dbutils开源项目用法
- 【Android开发经验】移动设备的“声波通信/验证”的实现——SinVoice开源项目介绍(三)
- 移动设备的“声波通信/验证”的实现——SinVoice开源项目介绍(一)
- 【Android移动开发技术】最常用的GitHub上优秀的 Android 开源项目